/* ═══════════════════════════════════════════════════════════════════════
   BHLR — Emmy / red-carpet cluster add-ons (2026-09-06)

   Scoped to #rvp so it inherits every route-v2.css design token; it adds
   no font, framework or network request. Loaded only by the five cluster
   pages, after route-v2.css:
     <link rel="stylesheet" href="/assets/css/emmy-cluster.css?v=1">

   Rules: 44px minimum interactive targets, visible focus, no sticky bar
   that can cover content, no horizontal overflow at 320px.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Conversion module ─────────────────────────────────────────────── */
#rvp .ec-cta{
  background:var(--rv-card);
  border:1px solid var(--rv-line);
  border-left:3px solid var(--rv-gold);
  border-radius:18px;
  padding:clamp(22px,3.4vw,38px);
  box-shadow:var(--rv-shadow);
}
#rvp .ec-cta .rv-h2{margin:0 0 14px}
#rvp .ec-cta-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:26px;
}
#rvp .ec-btn{min-height:52px;text-align:center}
#rvp .ec-email{
  margin:0;font-size:15px;line-height:1.5;color:var(--rv-slate);font-weight:500;
}
#rvp .ec-email a{
  color:var(--rv-gold-text);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;word-break:break-word;
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
}
#rvp .ec-email a:hover{color:var(--rv-ac)}
#rvp .ec-cta-alt{margin:18px 0 0;font-size:14.5px;color:var(--rv-faint)}
#rvp .ec-cta-alt a{color:var(--rv-ac);font-weight:600;text-decoration:underline;text-underline-offset:3px}
#rvp .ec-cta-note{
  margin:16px 0 0;padding-top:16px;border-top:1px solid var(--rv-line-soft);
  font-size:13px;line-height:1.6;color:var(--rv-faint);
}

/* Explicit focus ring for every conversion target. route-v2.css already sets
   `#rvp.rv-wrap :focus-visible`; this restates it on the CTA elements so the
   requirement holds even if this stylesheet is used without that one. */
#rvp .ec-btn:focus-visible,
#rvp .ec-email a:focus-visible,
#rvp .ec-cta-alt a:focus-visible,
#rvp .ec-cluster a:focus-visible,
#rvp .ec-duo a:focus-visible{
  outline:3px solid var(--rv-ac);outline-offset:3px;border-radius:8px;
}

/* ── Verified-date line ────────────────────────────────────────────── */
#rvp .ec-verified{
  display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap;
  margin:0 0 22px;font-size:13.5px;line-height:1.6;color:var(--rv-slate);font-weight:500;
}
#rvp .ec-verified time{color:var(--rv-ink);font-weight:700}
#rvp .ec-dot{
  width:9px;height:9px;border-radius:50%;background:var(--rv-ac);
  flex:0 0 auto;margin-top:6px;
}

/* ── Note panels (gala, limits, lifecycle) ─────────────────────────── */
#rvp .ec-note{
  margin-top:26px;padding:22px 24px;
  background:var(--rv-ac-bg);
  border:1px solid var(--rv-line);
  border-radius:14px;
}
#rvp .ec-note h3{margin:0 0 10px;font-size:17px}
#rvp .ec-note p{margin:0 0 12px;font-size:14.5px;line-height:1.72;color:var(--rv-slate)}
#rvp .ec-note p:last-child{margin-bottom:0}
#rvp .ec-note strong{color:var(--rv-ink)}
#rvp .ec-note-limit{
  padding-top:12px;border-top:1px solid var(--rv-line-soft);
  font-size:13.5px;color:var(--rv-faint);
}
#rvp .ec-note--past{background:var(--rv-bg-soft)}

/* ── Two-column "who controls what" table ──────────────────────────── */
#rvp .ec-split th{width:50%}

/* ── Compact definition cards (point-to-point vs hourly) ───────────── */
#rvp .ec-duo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;margin-top:30px;
}
#rvp .ec-duo article{
  background:var(--rv-card);border:1px solid var(--rv-line);
  border-radius:16px;padding:24px;
}
#rvp .ec-duo h3{margin:0 0 10px;font-size:18px}
#rvp .ec-duo p{margin:0 0 12px;font-size:14.5px;line-height:1.7;color:var(--rv-slate)}
#rvp .ec-duo p:last-child{margin-bottom:0}
#rvp .ec-duo a{color:var(--rv-ac);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ── Itinerary chain (illustrative only) ───────────────────────────── */
#rvp .ec-chain{
  list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
#rvp .ec-chain li{
  background:var(--rv-bg-soft);border:1px solid var(--rv-line);
  border-radius:999px;padding:9px 16px;
  font-size:13.5px;font-weight:600;color:var(--rv-ink);
}
#rvp .ec-chain li + li::before{
  content:"→";margin-right:8px;color:var(--rv-gold-text);font-weight:700;
}

/* ── Requirements list ─────────────────────────────────────────────── */
#rvp .ec-req{
  margin:24px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px 26px;
}
#rvp .ec-req li{
  position:relative;padding-left:22px;font-size:14.5px;line-height:1.65;color:var(--rv-slate);
}
#rvp .ec-req li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:2px;background:var(--rv-gold);
}

/* ── Cluster navigation cards ──────────────────────────────────────── */
#rvp .ec-cluster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;margin-top:30px;
}
#rvp .ec-cluster a{
  display:block;background:var(--rv-card);border:1px solid var(--rv-line);
  border-radius:16px;padding:22px;text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s ease;
}
#rvp .ec-cluster a:hover{transform:translateY(-3px);border-color:var(--rv-ac)}
#rvp .ec-cluster b{display:block;font-size:16px;color:var(--rv-ink);margin-bottom:6px;font-weight:700}
#rvp .ec-cluster span{display:block;font-size:14px;line-height:1.6;color:var(--rv-slate)}

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width:640px){
  #rvp .ec-cta-actions{flex-direction:column;align-items:stretch;gap:12px}
  #rvp .ec-btn{width:100%}
  #rvp .ec-email{text-align:center}
  #rvp .ec-cta{border-left-width:2px}

  /* Stack wide tables into labelled rows — matches the pattern already
     used by the route pages; keeps the page free of horizontal scroll.
     route-v2.css sets `#rvp table.rv-table{min-width:640px}` (specificity
     1,1,1), so the override MUST also qualify the element or the table stays
     640px wide and is clipped inside the wrapper on a 320px screen.
     The wrapper keeps overflow-x:auto so anything that cannot stack scrolls
     inside its own card instead of being cut off. */
  /* Drop CSS table layout entirely while stacked. Leaving display:table in
     place lets the table's min-content width win over width:100% (a 2-column
     comparison table measured 449px inside a 280px card), so the rows are
     turned into plain blocks instead. */
  #rvp table.rv-table{display:block;width:100%;min-width:0}
  #rvp .rv-table caption{display:block;width:100%}
  #rvp .rv-table tbody{display:block;width:100%}
  #rvp .rv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  #rvp .rv-table tr{
    display:block;margin:0 0 14px;border:1px solid var(--rv-line);
    border-radius:12px;overflow:hidden;
  }
  #rvp .rv-table td{display:block;width:100%;padding:11px 14px}
  #rvp .rv-table td::before{
    content:attr(data-label);display:block;font-size:10.5px;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--rv-gold-text);margin-bottom:4px;
  }
  #rvp .rv-table td:empty{display:none}
}

@media (prefers-reduced-motion:reduce){
  #rvp .ec-cluster a,#rvp .ec-btn{transition:none}
}