/* build/article-offers - offer card, slide-in, exit dialog. Uses the site's own tokens with
   neutral fallbacks so any pipeline site can load it unchanged. */
.ao-card { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:1.1rem; align-items:center;
  margin:1.6rem 0; padding:1rem; background:var(--surface,#fff); color:var(--ink,#1F1D1B);
  border:1px solid var(--line,#CBB68F); border-left:4px solid var(--accent,#7A2E1F); border-radius:var(--radius,8px);
  box-shadow:var(--shadow,0 6px 20px rgba(0,0,0,.08)); }
.ao-card.ao-noimg { grid-template-columns:minmax(0,1fr); }
.ao-card .ao-media { aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-sm,5px); background:var(--paper-2,#EAE0D0); }
.ao-card .ao-media img, .prose .ao-card .ao-media img { width:100%; height:100%; max-width:none; object-fit:cover; display:block; margin:0; border-radius:0; box-shadow:none; }
.ao-card .ao-body { min-width:0; }
.ao-card p { margin:0 0 .45rem; }
.ao-title, .ao-pop-title { font-family:var(--display,inherit); font-weight:800; font-size:var(--step-1,1.25rem); line-height:1.25; color:var(--ink,#1F1D1B); overflow-wrap:anywhere; }
.ao-why { color:var(--ink-soft,#4A433B); font-size:var(--step-0,1rem); line-height:1.45; }
.ao-proof { color:var(--ink,#1F1D1B); font-size:var(--step--1,.9rem); line-height:1.4; }
.ao-star { color:var(--gold,#6B4F13); font-weight:800; }
.ao-card .ao-cta { margin-top:.35rem; }
.ao-cta { display:inline-flex; align-items:center; justify-content:center; min-height:44px; text-align:center; text-decoration:none; }
.prose .ao-card a.ao-cta, .ao-slide a.ao-cta, .ao-pop a.ao-cta { color:var(--accent-ink,#fff); text-decoration:none; }
@media (max-width:640px) {
  .ao-card { grid-template-columns:minmax(0,1fr); padding:.85rem; }
  .ao-card .ao-media { aspect-ratio:16/9; }
  .ao-card .ao-cta { width:100%; }
}
.ao-intext a { font-weight:700; }

/* Slide-in: bottom-right card on desktop, bottom sheet on phones. */
.ao-slide { position:fixed; z-index:60; right:1.2rem; bottom:1.2rem; width:min(360px, calc(100vw - 2.4rem));
  display:flex; gap:.8rem; align-items:center; padding:.85rem 2.4rem .85rem .85rem;
  background:var(--surface,#fff); color:var(--ink,#1F1D1B); border:1px solid var(--line,#CBB68F);
  border-radius:var(--radius,8px); box-shadow:0 12px 36px rgba(0,0,0,.22);
  transform:translateY(calc(100% + 2rem)); opacity:0; transition:transform .35s ease, opacity .35s ease; }
.ao-slide[hidden] { display:none; }
.ao-slide.ao-in { transform:none; opacity:1; }
.ao-thumb { width:84px; height:84px; flex:0 0 84px; object-fit:cover; border-radius:var(--radius-sm,5px); }
.ao-sbody { min-width:0; flex:1 1 auto; }
.ao-sbody p { margin:0 0 .3rem; }
.ao-stitle { font-weight:800; font-size:var(--step-0,1rem); line-height:1.25; overflow-wrap:anywhere; }
.ao-slide .ao-cta { padding:.5rem 1rem; font-size:var(--step--1,.92rem); width:100%; }
.ao-x { position:absolute; top:.3rem; right:.3rem; width:36px; height:36px; border:0; background:transparent;
  color:var(--ink,#1F1D1B); font-size:1.5rem; line-height:1; cursor:pointer; border-radius:50%; }
.ao-x:hover { background:var(--paper-2,#EAE0D0); }
.ao-x:focus-visible, .ao-later:focus-visible { outline:3px solid var(--focus,#164F45); outline-offset:2px; }
@media (max-width:640px) {
  .ao-slide { left:0; right:0; bottom:0; width:auto; border-radius:14px 14px 0 0; border-width:1px 0 0;
    padding:.8rem 2.6rem calc(.8rem + env(safe-area-inset-bottom)) 1rem; }
  .ao-thumb { width:64px; height:64px; flex-basis:64px; }
}

/* Exit-intent dialog (desktop only; the script never opens it on touch or narrow screens). */
.ao-pop { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:1rem; }
.ao-pop[hidden] { display:none; }
.ao-backdrop { position:absolute; inset:0; background:rgba(15,12,10,.55); }
.ao-dialog { position:relative; width:min(460px, 100%); max-height:calc(100vh - 2rem); overflow:auto;
  background:var(--surface,#fff); color:var(--ink,#1F1D1B); border-radius:var(--radius,8px);
  box-shadow:0 24px 60px rgba(0,0,0,.35); animation:ao-pop-in .25s ease; }
.ao-dialog:focus { outline:none; }
.ao-pop-img { width:100%; height:200px; object-fit:cover; display:block; border-radius:var(--radius,8px) var(--radius,8px) 0 0; }
.ao-pop-body { padding:1.1rem 1.3rem 1.3rem; }
.ao-pop-body p { margin:0 0 .5rem; }
.ao-pop-lead { color:var(--ink-soft,#4A433B); font-size:var(--step--1,.9rem); }
.ao-pop .ao-cta { width:100%; margin-top:.4rem; }
.ao-pop .ao-x { background:var(--surface,#fff); top:.5rem; right:.5rem; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.ao-later { display:block; margin:.6rem auto 0; background:none; border:0; color:var(--brand,#164F45);
  font:inherit; font-size:var(--step--1,.9rem); text-decoration:underline; cursor:pointer; min-height:44px; }
@keyframes ao-pop-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .ao-slide { transition:none; }
  .ao-dialog { animation:none; }
}

/* LEGACY IN-ARTICLE BOXES, restyled to the offer card's compact look (2026-09-29). The writer's
   older {{ cta_box }} / {{ tour_pick }} boxes shipped a 36px title, a full-width 4:3 photo and
   heavy padding, so they out-shouted the article-matched card above them. Same frame, type scale
   and 220px thumbnail as .ao-card; loaded after the site stylesheet, so equal specificity wins. */
.prose .cta-box.cta-card, .blog-post .cta-box.cta-card { max-width:64ch;
  display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:1.1rem; align-items:center;
  margin:1.6rem 0; padding:1rem; text-align:left; background:var(--surface,#fff);
  border:1px solid var(--line,#CBB68F); border-left:4px solid var(--accent,#7A2E1F); border-top-width:1px;
  border-radius:var(--radius,8px); box-shadow:var(--shadow,0 6px 20px rgba(0,0,0,.08)); }
.prose .cta-box.cta-card .cb-media { aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-sm,5px); }
.prose .cta-box.cta-card .cb-media img { width:100%; height:100%; min-height:0; max-width:none; object-fit:cover; margin:0; box-shadow:none; }
.prose .cta-box.cta-card .cb-h { font-size:var(--step-1,1.25rem); line-height:1.25; margin:0 0 .45rem; text-align:left; overflow-wrap:anywhere; }
.prose .cta-box.cta-card .cb-body p { margin:0 0 .45rem; font-size:var(--step-0,1rem); line-height:1.45; color:var(--ink-soft,#4A433B); }
.prose .cta-box.cta-card .cb-body p:last-child { margin:0; }
.prose .cta-box.cta-card .tp-proof { color:var(--ink,#1F1D1B); font-size:var(--step--1,.9rem); }
.prose .cta-box.cta-card .btn { margin-top:.35rem; }
/* single tour pick: horizontal card at the prose measure instead of a tall full-width tile */
.prose .tour-picks.tp-solo, .blog-post .tour-picks.tp-solo { width:auto; max-width:64ch; margin:1.6rem 0; transform:none; padding:0; background:none; border:0; }
.prose .tp-solo .tp-grid { grid-template-columns:minmax(0,1fr); max-width:none; }
.prose .tp-solo .tp-card { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); align-items:center; gap:1.1rem; padding:1rem;
  border:1px solid var(--line,#CBB68F); border-left:4px solid var(--accent,#7A2E1F); border-radius:var(--radius,8px); box-shadow:var(--shadow,0 6px 20px rgba(0,0,0,.08)); }
.prose .tp-solo .tp-media { border-radius:var(--radius-sm,5px); }
.prose .tp-solo .tp-body { padding:0; gap:.35rem; }
.prose .tp-solo .tp-title { font-family:var(--display,inherit); font-weight:800; font-size:var(--step-1,1.25rem); line-height:1.25; }
.prose .tp-solo .tp-body .btn { width:auto; align-self:flex-start; margin-top:.35rem; }
/* a grid the rewrite left with two cards: two columns, no empty third slot */
@media (min-width:700px) { .prose .tour-picks .tp-grid:has(> .tp-card:nth-child(2):last-child) { grid-template-columns:repeat(2,1fr); max-width:46rem; margin-inline:auto; } }
@media (max-width:640px) {
  .prose .cta-box.cta-card, .prose .tp-solo .tp-card { grid-template-columns:minmax(0,1fr); padding:.85rem; }
  .prose .cta-box.cta-card .cb-media, .prose .tp-solo .tp-media { aspect-ratio:16/9; }
  .prose .cta-box.cta-card .btn, .prose .tp-solo .tp-body .btn { width:100%; }
}
/* The legacy grid's sitewide season line (an airport-transfer note on a food grid) is unrelated
   to the cards under it; in articles the grid stands on its cards alone. */
.prose .tour-picks .tp-season { display:none; }