/* ============================================================
   CRO rollout layer (2026-09-28) — components for the article
   conversion system: contextual pitches, image cards, opening
   card, end booking module, provider widgets, floating prompts.
   Palette + type come from styles.css tokens (Adobe & Pacific).
   Prefix wc- so nothing collides with existing classes.
   ============================================================ */

/* Legacy sticky never renders on optimized articles: the new
   desktop bar + mobile slide-in replace it (SKILL.md). Non-article
   pages are untouched. */
body.article .sticky-cta { display: none !important; }

/* ---- shared bits ---- */
.wc-eyebrow { display:block; font-size:.68rem; font-weight:800; letter-spacing:.11em; color:var(--sea-deep); margin:0 0 .55rem; }
.wc-copy { margin:0 0 .8rem; }
.wc-copy:last-child { margin-bottom:0; }
.wc-small { font-size:.8rem; color:var(--ink-soft); margin:.7rem 0 0 !important; }
.wc-btn { display:inline-block; max-width:100%; overflow-wrap:anywhere; text-align:center; }
.wc-note { display:block; font-size:.68rem; color:var(--ink-soft); margin-top:.55rem; }

/* ---- contextual text pitch (curiosity | urgency) ---- */
.wc-pitch { margin:1.8rem 0; padding:1rem 0 1rem 1.15rem; border-left:3px solid var(--gold); }
.wc-pitch.tone-urgency { border-left-color:var(--sea); }
.wc-pitch .wc-copy strong { color:var(--sea-deep); }
.wc-pitch .btn { margin-top:.15rem; }

/* ---- contextual single-tour image card ---- */
.wc-imgcard { display:grid; grid-template-columns:34% minmax(0,1fr); margin:2rem 0; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); }
.wc-imgcard > .wc-imgcard-media { margin:0; }
.wc-imgcard > .wc-imgcard-media img { width:100%; height:100%; min-height:240px; object-fit:cover; display:block; }
.wc-imgcard .wc-imgcard-body { padding:1.15rem 1.2rem; }
.wc-imgcard .btn { margin-top:.2rem; }
.wc-imgcard .tone-tag { display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.1em; color:var(--gold-ink); background:var(--gold-soft); border-radius:4px; padding:.2rem .5rem; margin-bottom:.5rem; }
.wc-imgcard.tone-urgency .tone-tag { color:var(--sea-deep); background:#E2EDEF; }

/* ---- opening recommendation card (SKILL 2026-09-25) ---- */
.wc-opening { margin:1.6rem 0 1.9rem; padding:1.25rem 1.3rem; background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--sea); border-radius:10px; }
.wc-opening .wc-opening-actions { display:flex; flex-wrap:wrap; gap:.8rem 1rem; margin-top:1rem; align-items:center; }
.wc-opening .wc-opening-actions .btn { flex:0 1 auto; }
.wc-opening .wc-eyebrow { color:var(--sea-deep); }

/* ---- end-of-article booking module (exactly one per article) ---- */
.wc-end { margin:3rem 0 0; padding:1.9rem 1.7rem; background:var(--surface); border:2px solid var(--sea); border-radius:12px; scroll-margin-top:95px; }
.wc-end > h2 { margin:.2rem 0 .6rem; font-size:1.75rem; line-height:1.15; }
.wc-end .wc-end-intro { max-width:62ch; }
.wc-end .wc-primary { display:grid; grid-template-columns:36% minmax(0,1fr); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:1.4rem 0 1.1rem; }
.wc-end .wc-primary-media { margin:0; }
.wc-end .wc-primary-media img { width:100%; height:100%; min-height:270px; object-fit:cover; display:block; }
.wc-end .wc-primary-body { padding:1.25rem 1.3rem; }
.wc-end .wc-primary-body h3 { margin:0 0 .4rem; font-size:1.28rem; line-height:1.25; }
.wc-end .wc-proof { font-size:.86rem; color:var(--ink-soft); margin:.2rem 0 .7rem; }
.wc-end .wc-proof .gold { color:var(--gold-ink); font-weight:700; }
.wc-end .wc-fit { font-size:.92rem; margin:.55rem 0; }
.wc-end .wc-limit { font-size:.8rem; color:var(--ink-soft); border-left:3px solid var(--line); padding-left:.7rem; margin:.8rem 0; }
.wc-end .wc-cta-row { margin-top:1rem; }

/* alternatives: optional support inside the one module (collapsed) */
.wc-end details.wc-support { border-top:1px solid var(--line); padding:.9rem 0 .2rem; }
.wc-end details.wc-support summary { cursor:pointer; font-weight:700; font-size:.95rem; }
.wc-end .wc-alt { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.4rem 1rem; align-items:center; padding:.85rem 0; border-bottom:1px dashed var(--line); }
.wc-end .wc-alt:last-child { border-bottom:0; }
.wc-end .wc-alt h4 { margin:0; font-size:.98rem; }
.wc-end .wc-alt h4 a { color:var(--brand); }
.wc-end .wc-alt-meta { font-size:.78rem; color:var(--ink-soft); margin:.15rem 0 0; }
.wc-end .wc-alt .btn { font-size:.8rem; padding:.55rem .8rem; white-space:normal; }

/* selector + calculator: expandable support inside the module */
.wc-end details.wc-tool { border-top:1px solid var(--line); padding:.9rem 0 .4rem; }
.wc-end details.wc-tool summary { cursor:pointer; font-weight:700; font-size:.95rem; }
.wc-end details.wc-tool > div { margin-top:1rem; }
.wc-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.2rem; }
.wc-form-grid label { display:block; font-size:.84rem; font-weight:650; }
.wc-form-grid select, .wc-form-grid input { width:100%; min-width:0; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); padding:.7rem; margin:.35rem 0 0; font:inherit; color:var(--ink); }
.wc-form-actions { margin-top:1rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.wc-form-actions .wc-reset { background:none; border:0; text-decoration:underline; font:inherit; font-size:.85rem; cursor:pointer; color:var(--ink-soft); padding:.6rem .4rem; }
.wc-result { margin-top:1.1rem; padding:1rem 1.1rem; border-left:3px solid var(--sea); background:var(--surface-2); border-radius:0 8px 8px 0; }
.wc-result h4 { margin:0 0 .45rem; font-size:1.02rem; }
.wc-result p { margin:.4rem 0; font-size:.9rem; }
.wc-result .btn { margin-top:.5rem; }
.wc-initial { margin:1.1rem 0 0; padding:.9rem 1.1rem; border:1px dashed var(--line); border-radius:8px; background:var(--paper); }
.wc-initial .wc-eyebrow { margin-bottom:.35rem; }
.wc-initial p { margin:.2rem 0; font-size:.9rem; }

/* cost calculator */
.wc-calc-output { font-weight:700; margin-top:.7rem; }
.wc-calc-why { font-size:.88rem; margin:.5rem 0 0; }

/* ---- provider widgets (GYG native + Viator schedule) ---- */
.wc-widget { margin:2rem 0; padding:1.4rem 1.5rem; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); scroll-margin-top:95px; }
.wc-widget h3 { margin:.2rem 0 .6rem; font-size:1.3rem; }
.wc-widget p { margin:0 0 1rem; max-width:62ch; }
.wc-widget .wc-widget-slot { margin:1rem 0 .4rem; min-height:52px; }
.wc-widget .wc-widget-fallback { margin-top:.6rem; }
.wc-widget .wc-widget-fallback .btn { font-size:.84rem; padding:.6rem .85rem; }
.wc-viat-form { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin:.9rem 0 .2rem; }
.wc-viat-form label { font-size:.84rem; font-weight:650; }
.wc-viat-form input[type="date"] { border:1px solid var(--line); border-radius:6px; background:#fff; padding:.55rem .6rem; font:inherit; color:var(--ink); }
.wc-viat-form button { font:inherit; font-weight:700; background:var(--sea-deep); color:#fff; border:0; border-radius:6px; padding:.65rem .9rem; cursor:pointer; }
.wc-viat-form button:hover { background:var(--sea); }
.wc-viat-times { margin:.7rem 0 0; font-size:.92rem; }
.wc-viat-times .wc-viat-status { font-size:.8rem; color:var(--ink-soft); }
.wc-viat-times ul { margin:.4rem 0 0; padding-left:1.1rem; }

/* ---- floating prompts: desktop bar, mobile slide-in, exit dialog ---- */
.wc-float { position:fixed; z-index:80; bottom:16px; left:50%; transform:translateX(-50%); width:min(680px, calc(100% - 24px)); display:flex; gap:1.1rem; align-items:center; padding:13px 44px 13px 18px; background:#FFFDF7; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 35px rgba(32,24,18,.18); }
.wc-float[hidden] { display:none; }
.wc-float .wc-float-text { min-width:0; }
.wc-float .wc-eyebrow { margin-bottom:.15rem; font-size:.6rem; }
.wc-float strong { display:block; font-size:.9rem; line-height:1.3; }
.wc-float .btn { margin-left:auto; flex:0 0 auto; font-size:.85rem; padding:.7rem .9rem; white-space:normal; line-height:1.3; }
.wc-dismiss { position:absolute; right:6px; top:6px; border:0; background:none; font-size:1.45rem; line-height:1; padding:8px; cursor:pointer; color:var(--ink-soft); }

.wc-slidein { position:fixed; z-index:81; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); display:none; padding:14px 40px 14px 15px; background:#FFFDF7; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 35px rgba(32,24,18,.2); }
.wc-slidein[hidden] { display:none; }
.wc-slidein strong { display:block; font-size:.92rem; line-height:1.3; margin-bottom:.55rem; }
.wc-slidein .btn { display:block; width:100%; text-align:center; }

.wc-dialog { width:min(460px, calc(100% - 32px)); border:0; border-radius:14px; padding:2.1rem; box-shadow:0 20px 80px rgba(0,0,0,.25); }
.wc-dialog::backdrop { background:rgba(16,38,43,.45); }
.wc-dialog h2 { margin:.5rem 0 .7rem; font-size:1.45rem; line-height:1.2; }
.wc-dialog p { margin:0 0 1.2rem; }
.wc-dialog .btn { font-size:.92rem; }
.wc-dialog-close { position:absolute; right:8px; top:8px; border:0; background:none; font-size:1.5rem; line-height:1; padding:8px; cursor:pointer; color:var(--ink-soft); }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .wc-imgcard, .wc-end .wc-primary { display:block; }
  .wc-imgcard > .wc-imgcard-media img, .wc-end .wc-primary-media img { height:190px; min-height:0; aspect-ratio:16/9; }
  .wc-imgcard-body, .wc-end .wc-primary-body { padding:1rem; }
  .wc-end { padding:1.3rem 1rem; }
  .wc-end > h2 { font-size:1.4rem; }
  .wc-form-grid { grid-template-columns:1fr; }
  .wc-end .wc-alt { grid-template-columns:minmax(0,1fr); }
  .wc-end .wc-alt .btn { justify-self:start; }
  /* desktop bar hides; slide-in is the mobile surface */
  .wc-float { display:none; }
  .wc-slidein { display:block; }
}
@media (min-width: 761px) { .wc-slidein { display:none !important; } }

@media (prefers-reduced-motion: no-preference) {
  .wc-float:not([hidden]), .wc-slidein:not([hidden]) { animation: wc-rise .2s ease-out; }
  @keyframes wc-rise { from { opacity:0; transform:translateX(-50%) translateY(14px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
  .wc-slidein:not([hidden]) { animation-name: wc-rise-m; }
  @keyframes wc-rise-m { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
}

:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }