/* ============================================================
   mobile-make-the-case.css
   
   Mobile-only redesign for make-the-case.html.
     F1. Hero padding-top so the eyebrow clears the topnav.
     F2. Letter action buttons (Print / Download / Open in Docs)
         flex-wrap to 1-up at full width — were crushed into a
         3-up 80px-wide row, 108px tall with 3-4 lines of text.
     F3. Hide the decorative typewriter sketch on mobile.
     A.  Role-card accordion (Engineering / Security & Compliance /
         Sales & BD / Marketing / Executive) — collapsed by default.
     B.  Letter preview + reveal — letter-card and visa-spec keep
         their letterhead + first paragraph visible; the rest of
         the body collapses behind a "Read the full template"
         button.
   
   JS in mobile-make-the-case.js wires interaction.
   ============================================================ */

@media (max-width: 640px) {

  /* ============================================================
     F1 · HERO clearance from topnav + readable headline
     ============================================================ */
  html body .mtc-hero,
  html body .page-header.mtc-hero {
    padding-top: 128px !important;    /* topnav (73) + breathing room */
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 28px !important;
  }
  html body .mtc-hero h1,
  html body .page-header.mtc-hero h1 {
    font-size: clamp(34px, 10.5vw, 42px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    padding-right: 4px !important;
    padding-bottom: 0.45em !important;
  }
  /* Allow the inline nowrap span to wrap on mobile (designed for
     desktop's wider column). */
  html body .mtc-hero h1 .mtc-h1-line {
    white-space: normal !important;
    display: inline !important;
  }
  /* Tighten the eyebrow stamp row */
  html body .mtc-hero .stamp-row {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 18px !important;
  }
  /* Lede paragraph below H1 */
  html body .mtc-hero .reg-hero-sub,
  html body .mtc-hero .lede {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-top: 24px !important;
  }

  /* ============================================================
     TYPEWRITER SKETCH on mobile — kept but resized so it sits
     under the hero copy as a small editorial mark (not a wide
     desktop illustration that takes 340px of vertical real estate).
     ============================================================ */
  html body .mtc-hero .mtc-tw-slot,
  html body .mtc-hero .page-header-sketch {
    display: block !important;
    max-width: 240px !important;
    width: 70% !important;
    margin: 24px auto 0 !important;
    transform: none !important;
  }
  html body .mtc-hero .mtc-tw-slot svg,
  html body .mtc-hero .page-header-sketch svg {
    width: 100% !important;
    height: auto !important;
  }
  /* Now the page-header-inner is a single-column flow */
  html body .mtc-hero .page-header-inner {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  /* Constrain decorative atmosphere overlays to the hero box */
  html body .mtc-hero .page-header-halo,
  html body .mtc-hero .page-header-flash,
  html body .mtc-hero .page-header-sparks {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }


  /* ============================================================
     F2 · LETTER ACTION BUTTONS — stack 1-up at full width
     Was: flex-row nowrap, 3 buttons × 80-100px wide × 108px tall
     ============================================================ */
  html body .letter-card .actions,
  html body .case-row .actions {
    flex-wrap: wrap !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  html body .letter-card .actions a.btn,
  html body .letter-card .actions button.btn,
  html body .case-row .actions a.btn,
  html body .case-row .actions button.btn {
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 13px 16px !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
  }


  /* ============================================================
     A · ROLE-CARD ACCORDION
     Collapsed: num + h3 + quote visible. Hide ul + pill.
     Tap to expand.
     ============================================================ */
  html body .role-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  html body .role-card {
    padding: 20px 22px !important;
    min-height: 0 !important;
    border: 1px solid rgba(40, 28, 12, 0.16) !important;
    background: linear-gradient(180deg, rgba(255, 247, 222, 0.5) 0%, rgba(255, 247, 222, 0.0) 100%) !important;
    border-radius: 6px !important;
    position: relative !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    margin: 0 !important;
    transition: border-color 200ms ease, background 200ms ease !important;
  }
  html body .role-card:hover,
  html body .role-card:active {
    border-color: rgba(182, 138, 62, 0.50) !important;
  }
  /* Brass-foil top edge to match the rest of the site */
  html body .role-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 2px !important;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(182,138,62,0.45) 18%,
      rgba(229,199,122,0.80) 50%,
      rgba(182,138,62,0.45) 82%,
      transparent 100%) !important;
    border-radius: 6px 6px 0 0 !important;
    pointer-events: none !important;
  }
  /* The +/− indicator on the right */
  html body .role-card::after {
    content: '+' !important;
    position: absolute !important;
    top: 18px !important;
    right: 16px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 14px !important;
    color: var(--filament-d, #8a6620) !important;
    border: 1px solid rgba(182, 138, 62, 0.45) !important;
    border-radius: 50% !important;
    transition: transform 220ms ease !important;
    line-height: 1 !important;
  }
  html body .role-card.is-open::after {
    content: '−' !important;
    background: rgba(26, 18, 8, 0.92) !important;
    color: var(--paper, #FBF5E5) !important;
    border-color: rgba(26, 18, 8, 0.92) !important;
  }

  /* Always-visible summary: num, h3, quote */
  html body .role-card .num {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: rgba(40, 28, 12, 0.55) !important;
    margin: 0 0 6px !important;
    padding-right: 36px !important;
  }
  html body .role-card h3 {
    font-family: 'Newsreader', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin: 0 0 8px !important;
    padding-right: 36px !important;
  }
  html body .role-card h3 em {
    font-style: italic !important;
    color: rgba(40, 28, 12, 0.92) !important;
  }
  html body .role-card .quote {
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: rgba(40, 28, 12, 0.72) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* When collapsed, truncate the quote to ~2 lines so the
     summary stays compact. */
  html body .role-card:not(.is-open) .quote {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Hide body until expanded */
  html body .role-card ul,
  html body .role-card .pill {
    display: none !important;
  }
  html body .role-card.is-open ul {
    display: block !important;
    margin: 16px 0 0 !important;
    padding: 14px 0 0 0 !important;
    list-style: none !important;
    border-top: 1px dashed rgba(40, 28, 12, 0.18) !important;
  }
  html body .role-card.is-open .quote {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
    margin-bottom: 4px !important;
  }
  html body .role-card.is-open li {
    font-family: 'Newsreader', Georgia, serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: rgba(40, 28, 12, 0.78) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    position: relative;
  }
  html body .role-card.is-open li::before {
    content: '·' !important;
    color: var(--filament-d, #8a6620) !important;
    margin-right: 8px !important;
    font-weight: 700 !important;
  }
  html body .role-card.is-open .pill {
    display: inline-block !important;
    margin: 14px 0 0 !important;
    padding: 6px 14px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--filament-d, #8a6620) !important;
    border: 1px solid rgba(182, 138, 62, 0.45) !important;
    border-radius: 999px !important;
    background: transparent !important;
  }


  /* ============================================================
     B · LETTER PREVIEW + REVEAL
     For both .case-row .letter-card and .visa-row .visa-spec:
       - Keep letterhead, h4 title, first paragraph visible
       - Collapse remaining paragraphs as .mc-letter-extra
       - Show "Read the full template" button
       - Reveal on tap
     ============================================================ */

  /* Hide the extra paragraphs by default */
  html body .letter-card .mc-letter-extra,
  html body .visa-spec .mc-letter-extra {
    display: none !important;
  }
  /* Reveal them when .is-revealed is on the parent letter */
  html body .letter-card.is-revealed .mc-letter-extra,
  html body .visa-spec.is-revealed .mc-letter-extra {
    display: revert !important;
    margin: 0 0 14px !important;
  }
  /* Also hide non-paragraph trailing content (signoff, signature
     blocks etc.) until revealed. They sit after the paragraphs;
     match common signoff classes. */
  html body .letter-card .signoff,
  html body .letter-card .sig,
  html body .letter-card .lc-foot,
  html body .visa-spec .signoff,
  html body .visa-spec .sig,
  html body .visa-spec .vs-foot,
  html body .visa-spec .vs-fields {
    display: none !important;
  }
  html body .letter-card.is-revealed .signoff,
  html body .letter-card.is-revealed .sig,
  html body .letter-card.is-revealed .lc-foot,
  html body .visa-spec.is-revealed .signoff,
  html body .visa-spec.is-revealed .sig,
  html body .visa-spec.is-revealed .vs-foot,
  html body .visa-spec.is-revealed .vs-fields {
    display: block !important;
  }
  /* The actions block (Print / Download / Open in Docs) stays
     visible since it's the call-to-action even at preview state.
     Already handled by F2 above. */

  /* The reveal button itself */
  .mc-letter-reveal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 14px 0 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(255, 247, 222, 0.6) 0%, rgba(255, 247, 222, 0.2) 100%);
    border: 1px solid rgba(182, 138, 62, 0.35);
    border-radius: 4px;
    color: var(--filament-d, #8a6620);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 180ms ease, border-color 180ms ease;
  }
  .mc-letter-reveal:hover,
  .mc-letter-reveal:active {
    background: linear-gradient(180deg, rgba(255, 244, 210, 0.8) 0%, rgba(255, 244, 210, 0.4) 100%);
    border-color: rgba(182, 138, 62, 0.55);
  }
  .mlr-chev {
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 220ms ease;
  }
  .letter-card.is-revealed .mc-letter-reveal .mlr-chev,
  .visa-spec.is-revealed .mc-letter-reveal .mlr-chev {
    transform: rotate(-135deg);
    margin-top: 3px;
  }


  /* ============================================================
     Section heads — tighten + allow wrapping
     The h2s use desktop <br> breaks that produce mash-up reads
     like "the deskacross from you." on narrow widths. Fix.
     ============================================================ */
  html body .makecase .section-head h2,
  html body .makecase h2 {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.15 !important;
    margin: 8px 0 !important;
    letter-spacing: -0.015em !important;
  }
  /* The desktop h2s use <br> line breaks for typographic shape.
     Replace them with a visible space on mobile (display:none
     made adjacent words run together — "the partthat stops you"). */
  html body .makecase .section-head h2 br {
    content: " ";
    display: inline !important;
    white-space: pre;
  }
  html body .makecase .section-head h2 br::after {
    content: " ";
    white-space: pre;
  }
  html body .makecase .section-head .lede {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
  }


  /* ============================================================
     Misc tightening for the letter-card chrome
     ============================================================ */
  html body .letter-card,
  html body .visa-spec {
    padding: 24px 22px !important;
    margin: 0 !important;
  }
  html body .letter-card .head,
  html body .visa-spec .head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }
  html body .letter-card h4,
  html body .visa-spec h4 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin: 8px 0 14px !important;
  }
  /* ============================================================
     VISA LINK-OUT — replace inline .visa-row content on mobile
     with a single editorial card linking to the standalone
     register/visa-support-letter.html page. Single source of
     truth + ~900px saved on Make-the-Case mobile.
     JS injects .mc-visa-linkout as the first child of .visa-row.
     ============================================================ */
  html body .visa-row {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }
  /* Hide the inline visa letter and notes on mobile */
  html body .visa-row > :not(.mc-visa-linkout) {
    display: none !important;
  }
  /* Style the injected link-out card */
  .mc-visa-linkout {
    display: block !important;
    text-decoration: none !important;
    padding: 26px 24px !important;
    background: linear-gradient(180deg, rgba(255, 247, 222, 0.7) 0%, rgba(255, 247, 222, 0.25) 100%) !important;
    border: 1px solid rgba(40, 28, 12, 0.18) !important;
    border-radius: 6px !important;
    position: relative !important;
    transition: border-color 200ms ease, background 200ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .mc-visa-linkout:hover,
  .mc-visa-linkout:active {
    border-color: rgba(182, 138, 62, 0.55) !important;
    background: linear-gradient(180deg, rgba(255, 244, 210, 0.85) 0%, rgba(255, 244, 210, 0.40) 100%) !important;
  }
  .mc-visa-linkout::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 2px !important;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(182,138,62,0.45) 18%,
      rgba(229,199,122,0.80) 50%,
      rgba(182,138,62,0.45) 82%,
      transparent 100%) !important;
    border-radius: 6px 6px 0 0 !important;
    pointer-events: none !important;
  }
  .mvl-tag {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--filament-d, #8a6620);
    margin-bottom: 10px;
  }
  .mvl-title {
    display: block;
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    color: rgba(40, 28, 12, 0.92);
    margin-bottom: 10px;
    letter-spacing: -0.005em;
  }
  .mvl-title em {
    font-style: italic;
    color: rgba(40, 28, 12, 0.95);
  }
  .mvl-body {
    display: block;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(40, 28, 12, 0.72);
    margin-bottom: 16px;
  }
  .mvl-body em {
    font-style: italic;
    color: var(--filament-d, #8a6620);
  }
  .mvl-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px dashed rgba(182, 138, 62, 0.35);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--filament-d, #8a6620);
  }
  .mvl-cta-arrow {
    font-size: 16px;
    transition: transform 220ms ease;
  }
  .mc-visa-linkout:hover .mvl-cta-arrow {
    transform: translateX(3px);
  }
}