/* =====================================================================
   Alfred landing — HERO + spec-strip + risk-strip · part 2/6 port
   All values extracted 1:1 from the inline styles of the design prototype
   (design_handoff_alfred_landing/Alfred.dc.html, hero section).

   Class contract: .al-* — part-1 NOTES contract was unavailable, so these
   classes are defined here; keyframe names (blink, glow) match the
   prototype exactly so identical duplicates from other parts dedupe
   cleanly at assembly. See NOTES.md.

   Expected from the global shell (part 1):
   - fonts: Playfair Display 700 (+italic), Inter 400/500/600 (latin-ext)
   - body { background:#0B1929; color:#F4EDE0; font-family:'Inter',... }
   - *{box-sizing:border-box}  ·  ::selection brass  ·  smooth scroll
   - h2,h3,h4{text-wrap:balance}  ·  p{text-wrap:pretty}
   - a:focus-visible{outline:2px solid #B8935A;outline-offset:2px}
   - :root{--illo-sw:1.6}  (prototype container value; var() fallbacks
     below keep this file standalone-safe)
   ===================================================================== */

/* --- keyframes (shared candidates — names + bodies identical to prototype) --- */
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes glow{0%,100%{opacity:.5}50%{opacity:1}}

/* --- section wrapper --- */
.al-hero-section{background:#0B1929;position:relative;color:#F4EDE0;}
#vrh{scroll-margin-top:62px;} /* prototype global: [id]{scroll-margin-top:62px} */

/* --- hero grid: 1.12fr / .88fr --- */
.al-hero{
  max-width:1140px;
  margin:0 auto;
  padding:clamp(20px,4vw,44px) clamp(20px,5vw,56px) clamp(64px,8vw,104px);
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(28px,5vw,60px);
  align-items:center;
}

/* --- eyebrow (shared candidate — same style reused across sections) --- */
.al-eyebrow{margin:0;font:600 12px 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#B8935A;}

/* --- dialog card (#0F2237) ---
   FIXED heights: .al-hero-cmd reserves 3 lines at line-height 1.35,
   .al-hero-reply reserves 3 lines at line-height 1.4 — the typewriter can
   never shift layout. Do not remove the min-height rules. */
.al-hero-dialog{
  margin-top:22px;
  background:#0F2237;
  border:1px solid rgba(184,147,90,.35);
  border-radius:2px;
  padding:clamp(20px,3vw,32px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
}
.al-hero-cmd-row{display:flex;gap:12px;align-items:flex-start;}
.al-hero-quote{color:#B8935A;font-family:'Playfair Display',serif;font-size:26px;line-height:1;}
.al-hero-cmd{
  margin:0;
  font-family:'Playfair Display',serif;
  font-size:clamp(20px,2.5vw,28px);
  line-height:1.35;
  color:#F4EDE0;
  min-height:calc(1.35em * 3);
}
.al-hero-reply-row{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(184,147,90,.18);
}
.al-hero-a{stroke:#B8935A;stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:4px;}
.al-hero-reply{
  margin:0;
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:clamp(17px,2.1vw,22px);
  line-height:1.4;
  color:#B8935A;
  min-height:calc(1.4em * 3);
}

/* --- brass typing caret — hidden until hero.js arms it with [data-on] --- */
.al-hero-caret{display:none;width:2px;height:1em;background:#B8935A;margin-left:3px;vertical-align:-2px;}
.al-hero-caret[data-on]{display:inline-block;animation:blink 1s step-end infinite;}

/* --- »Naslednje:« preview — min-height reserves the line --- */
.al-hero-next{margin:12px 0 0;font-size:13px;line-height:1.5;color:rgba(244,237,224,.45);min-height:1.5em;}
.al-hero-next-q{font-style:italic;}

/* --- sub + CTA row --- */
.al-hero-sub{margin:22px 0 0;font-size:clamp(15px,1.7vw,18px);line-height:1.6;color:rgba(244,237,224,.82);max-width:36ch;}
.al-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.al-btn-primary{
  background:#B8935A;color:#0B1929;
  font:600 15px 'Inter',sans-serif;
  padding:15px 24px;border-radius:2px;text-decoration:none;
  transition:background .2s ease;
}
.al-btn-primary:hover{background:#C4A067;}
.al-btn-outline{
  border:1px solid rgba(184,147,90,.6);color:#F4EDE0;
  font:600 15px 'Inter',sans-serif;
  padding:15px 24px;border-radius:2px;text-decoration:none;
  transition:background .2s ease;
}
.al-btn-outline:hover{background:rgba(184,147,90,.14);}
.al-btn-primary:focus-visible,.al-btn-outline:focus-visible{outline:2px solid #B8935A;outline-offset:2px;}

/* --- night house (line-art) --- */
.al-hero-art{justify-self:center;}
.al-hero-house{
  max-width:400px;
  stroke:#B8935A;
  stroke-width:calc(var(--illo-sw,1.6) * 1);
  fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
/* prototype had this as a presentation attribute with var() — invalid in
   browsers, so the 1.1× wall weight lives here instead */
.al-hero-house .al-house-wall{stroke-width:calc(var(--illo-sw,1.6) * 1.1);}
.al-house-win{animation:glow 5s ease-in-out infinite;}
.al-house-win--r{animation-delay:2.4s;}

/* --- spec strip (navy, brass dots) --- */
.al-spec-strip{background:#0B1929;border-top:1px solid rgba(184,147,90,.2);}
.al-spec-strip-inner{
  max-width:1140px;margin:0 auto;
  padding:20px clamp(20px,5vw,56px);
  display:flex;flex-wrap:wrap;gap:12px 26px;
  align-items:center;justify-content:center;
  font:500 13.5px 'Inter',sans-serif;
  letter-spacing:.01em;
  color:rgba(244,237,224,.86);
}
.al-spec-dot{width:5px;height:5px;border-radius:50%;background:#B8935A;flex:none;}

/* --- risk strip (mist, sage checks) --- */
.al-risk-strip{background:#E5E1D8;color:#2C3440;}
.al-risk-strip-inner{
  max-width:1140px;margin:0 auto;
  padding:18px clamp(20px,5vw,56px);
  display:flex;flex-wrap:wrap;gap:16px 40px;
  align-items:center;justify-content:center;
  font:600 14px 'Inter',sans-serif;
}
.al-risk-item{display:inline-flex;align-items:center;gap:9px;}
.al-risk-check{stroke:#7A8B5C;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;}

/* --- a11y utility (shared candidate) --- */
.al-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* --- responsive (prototype breakpoints: 820 px grid collapse, 640 px CTA full width) --- */
@media (max-width:820px){
  .al-hero{grid-template-columns:1fr;}
  .al-hero-art{display:none;}
}
@media (max-width:640px){
  .al-cta a{flex:1 1 100%;text-align:center;}
}

/* --- reduced motion: no caret, no glow (hero.js renders static first pair) --- */
@media (prefers-reduced-motion: reduce){
  .al-hero-caret{display:none!important;}
  .al-house-win{animation:none!important;}
}