/* ============================================================
   Gulf to Orbit — article.css
   Shared styles for long-form article pages.
   Link AFTER /styles.css. Page-specific components stay inline.
   ============================================================ */

/* === ARTICLE HERO === */
.article-hero{position:relative;min-height:520px;display:flex;align-items:flex-end;padding:60px 32px 60px;overflow:hidden;}
.article-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;}
.article-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,27,42,0.3) 0%,rgba(13,27,42,0.6) 40%,rgba(13,27,42,0.92) 100%);z-index:1;}
.article-hero-content{position:relative;z-index:2;max-width:720px;margin:0 auto;width:100%;padding-top:80px;}
.article-hero .breadcrumb{font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:rgba(245,240,232,0.4);margin-bottom:20px;}
.article-hero .breadcrumb a{color:rgba(245,240,232,0.4);transition:color .2s;}
.article-hero .breadcrumb a:hover{color:var(--cream);}
.article-hero .breadcrumb .sep{margin:0 8px;color:rgba(245,240,232,0.2);}
.article-hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,5vw,52px);font-weight:400;color:var(--cream);line-height:1.15;margin-bottom:16px;}
.article-hero .article-meta{font-size:13px;color:rgba(245,240,232,0.4);display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.article-hero .article-meta .dot{color:rgba(245,240,232,0.2);}

/* === ARTICLE BODY === */
.article-body{max-width:720px;margin:0 auto;padding:64px 32px 80px;}
.article-body p{font-size:16px;color:var(--text);line-height:1.85;margin-bottom:24px;}
.article-body p.lead{font-size:18px;color:var(--text-med);line-height:1.8;margin-bottom:32px;}
.article-body h2{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3.5vw,34px);font-weight:400;color:var(--navy);line-height:1.2;margin:48px 0 20px;padding-top:16px;}
.article-body h3{font-size:18px;font-weight:700;color:var(--navy);margin:32px 0 12px;}
.article-body ul,.article-body ol{margin:0 0 24px 24px;font-size:16px;color:var(--text);line-height:1.85;}
.article-body li{margin-bottom:8px;}
.article-body strong{font-weight:600;color:var(--text);}
.article-body a{color:inherit;text-decoration:none;font-style:italic;}
.article-body a:hover{opacity:0.65;}
.article-body blockquote{border-left:3px solid var(--red);padding:16px 24px;margin:32px 0;background:var(--white);border-radius:0 6px 6px 0;}
.article-body blockquote p{font-size:15px;color:var(--text-med);margin-bottom:0;font-style:italic;}
.article-body figure{margin:32px 0;}
.article-body figure img{border-radius:6px;width:100%;}
.article-body figure figcaption{margin-top:10px;font-size:13px;color:var(--text-light);font-style:italic;text-align:center;}
.article-body figure .photo-credit{display:block;margin-top:4px;font-size:11px;color:var(--text-light);font-style:normal;letter-spacing:0.5px;}
.article-body p.closing{margin-top:48px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.08);font-size:15px;color:var(--text-med);}

/* === CALLOUT BOXES === */
.callout{background:var(--white);border-radius:8px;padding:28px 28px;margin:36px 0;border-left:4px solid var(--red);}
.callout .callout-label{font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:12px;}
.callout p{margin-bottom:0;font-size:15px;color:var(--text);line-height:1.7;}
.callout .callout-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 32px;}
@media(max-width:600px){.callout .callout-grid{grid-template-columns:1fr;}}
.callout .callout-stat{display:flex;flex-direction:column;}
.callout .callout-stat .stat-value{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:500;color:var(--navy);line-height:1.2;}
.callout .callout-stat .stat-desc{font-size:13px;color:var(--text-med);line-height:1.5;}

/* === MOBILE — 320px–600px (Android + iPhone) === */
@media(max-width:600px){
  .article-hero{min-height:380px;padding:32px 20px 32px;}
  .article-hero-content{padding-top:48px;}
  .article-hero h1{margin-bottom:10px;}
  .article-body{padding:28px 20px 40px;}
  .article-body p{font-size:15px;line-height:1.7;margin-bottom:16px;}
  .article-body p.lead{font-size:16px;margin-bottom:20px;line-height:1.65;}
  .article-body h2{margin:28px 0 12px;padding-top:10px;}
  .article-body h3{margin:24px 0 8px;}
  .article-body ul,.article-body ol{margin:0 0 16px 20px;line-height:1.7;}
  .article-body li{margin-bottom:4px;}
  .article-body blockquote{padding:12px 16px;margin:18px 0;}
  .article-body blockquote p{font-size:14px;}
  .article-body figure{margin:18px -20px;}
  .article-body figure img{border-radius:0;}
  .article-body figure figcaption{margin-top:8px;padding:0 20px;}
  .article-body p.closing{margin-top:28px;padding-top:16px;}
  .callout{padding:20px 18px;margin:20px 0;}
  .callout .callout-label{margin-bottom:8px;}
}