/* Article offer layer (build/article-offer.mjs; kit: build/free-site-redesign), loaded on guides and blog posts only.
   Translated from the approved mockup's #article view onto the site's own tokens: --surface,
   --ink, --ink-soft, --line, --accent, --gold, --shadow, --display, --body. Font families come
   from the tokens only, never hardcoded. The two pay-what-you-want tag colours are the mockup's
   --free / --free-bg pair, scoped here and redefined for dark mode with the site's guard. */
:root {
  --ao-free: #2F6B3A; --ao-free-bg: #DDEBDC;
  --ao-scrim: rgba(10,22,28,.78);
  --ao-muted: var(--ink-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ao-free: #7CCB88; --ao-free-bg: #1C3322; --ao-scrim: rgba(4,10,13,.8); }
}
:root[data-theme="dark"] { --ao-free: #7CCB88; --ao-free-bg: #1C3322; --ao-scrim: rgba(4,10,13,.8); }

/* ---- short answer box (guides: quick_answer; blogs: the opening bold answer) ---- */
.article .quick-answer { border:0; border-left:5px solid var(--accent); border-radius:12px; padding:20px 24px; max-width:860px; }
.article .quick-answer p { font-size:clamp(1.05rem, 1rem + .35vw, 1.16rem); line-height:1.55; max-width:none; }
.prose > p.ao-lead { background:var(--surface); color:var(--ink); border-left:5px solid var(--accent); border-radius:12px;
  padding:20px 24px; box-shadow:var(--shadow); font-size:clamp(1.05rem, 1rem + .35vw, 1.16rem); line-height:1.55; }
.prose > p.ao-lead strong { font-weight:600; }

/* ---- offer card after paragraph 1 ---- */
.ao-offer { display:grid; grid-template-columns:200px minmax(0,1fr); gap:20px; align-items:center;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:5px solid var(--accent);
  border-radius:14px; padding:14px; margin:6px 0 28px; box-shadow:var(--shadow); }
.prose > .ao-offer { max-width:64ch; }
.ao-offer.ao-noimg { grid-template-columns:minmax(0,1fr); }
.ao-offer .ao-media { display:block; align-self:stretch; min-height:130px; border-radius:10px; overflow:hidden; background:var(--paper-2); }
.ao-offer .ao-media img, .prose .ao-offer .ao-media img { width:100%; height:100%; min-height:130px; max-width:none; object-fit:cover;
  display:block; margin:0; border-radius:0; box-shadow:none; }
.ao-b { display:flex; flex-direction:column; gap:7px; min-width:0; }
.ao-b p, .ao-sb p, .ao-pb p { margin:0; max-width:none; }
.ao-title { font-family:var(--display); font-size:22px; line-height:1.2; color:var(--ink); overflow-wrap:anywhere; }
.ao-meta { font-size:14px; line-height:1.45; color:var(--ao-muted); }
.ao-rate { font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; }
.ao-st { color:var(--gold); }
.ao-free { display:inline-flex; font:700 13px/1 var(--body); color:var(--ao-free); background:var(--ao-free-bg); border-radius:999px; padding:7px 10px; }
.ao-cta { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:4px !important; }
.ao-btn { white-space:nowrap; }
.prose a.ao-btn, .ao-slide a.ao-btn, .ao-pop a.ao-btn { color:var(--accent-ink); text-decoration:none; }
.ao-via { font-size:13.5px; color:var(--ao-muted); }
@media (max-width:560px) {
  .ao-offer { grid-template-columns:minmax(0,1fr); }
  .ao-offer .ao-media, .ao-offer .ao-media img, .prose .ao-offer .ao-media img { height:170px; min-height:0; }
  .ao-offer .ao-btn { width:100%; }
  .ao-cta { flex-direction:column; align-items:stretch; text-align:center; }
}

/* ---- secondary in-text links ---- */
.prose a.ao-inl { font-weight:700; color:var(--brand); text-decoration:underline; text-decoration-thickness:2px;
  text-decoration-color:color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset:2px; }

/* ---- slide-in (replaces the sitewide sticky bar on articles) ---- */
.ao-slide { position:fixed; right:20px; bottom:20px; width:360px; max-width:calc(100vw - 32px); z-index:48;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.25); padding:14px; display:grid; grid-template-columns:88px minmax(0,1fr); gap:12px;
  transform:translateY(calc(100% + 40px)); 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:88px; height:88px; object-fit:cover; border-radius:10px; }
.ao-sb { min-width:0; }
.ao-stitle { font-family:var(--body); font-size:15.5px; font-weight:800; line-height:1.25; padding-right:24px; overflow-wrap:anywhere; }
.ao-slide .ao-rate { font-size:13.5px; margin-top:3px !important; }
.ao-tag { font-size:13px; color:var(--ao-free); font-weight:700; margin-top:2px !important; }
.ao-slide .ao-btn { grid-column:1/-1; width:100%; }
.ao-slide .ao-via { grid-column:1/-1; margin-top:-4px; text-align:center; }
.ao-x { position:absolute; top:6px; right:6px; width:36px; height:36px; border-radius:50%; border:0; background:transparent;
  color:var(--ink-soft); font:500 24px/1 var(--body); cursor:pointer; }
.ao-x:hover { background:var(--paper-2); }
.ao-x:focus-visible, .ao-no:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
/* Phones: a compact bottom bar (thumb, name, button), never a card over the article. */
@media (max-width:560px) {
  .ao-slide { left:0; right:0; bottom:0; width:auto; max-width:none; padding:8px 44px calc(8px + env(safe-area-inset-bottom)) 10px;
    border-radius:14px 14px 0 0; border-width:1px 0 0;
    grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; }
  .ao-thumb { width:44px; height:44px; border-radius:8px; }
  .ao-stitle { font-size:14px; padding-right:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ao-slide .ao-rate { font-size:12.5px; margin-top:1px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ao-slide .ao-tag, .ao-slide .ao-via { display:none; }
  .ao-slide .ao-btn { grid-column:auto; width:auto; min-height:44px; padding:.55rem .9rem; font-size:.92rem; }
  .ao-x { top:50%; right:2px; transform:translateY(-50%); width:40px; height:40px; font-size:22px; }
}
@media (max-width:360px) { .ao-slide .ao-rate { display:none; } }

/* ---- exit-intent dialog (desktop only; offer.js never opens it on touch or narrow screens) ---- */
.ao-pop { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:16px; }
.ao-pop[hidden] { display:none; }
.ao-backdrop { position:absolute; inset:0; background:var(--ao-scrim); }
.ao-dialog { position:relative; background:var(--surface); color:var(--ink); border-radius:18px; max-width:520px; width:100%;
  overflow:hidden auto; box-shadow:0 30px 80px rgba(0,0,0,.4); max-height:calc(100vh - 32px); animation:ao-pop-in .25s ease; }
.ao-dialog:focus { outline:none; }
.ao-pop-img { width:100%; aspect-ratio:16/8; height:auto; object-fit:cover; display:block; }
.ao-pb { padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; }
.ao-pop-title { font-family:var(--display); font-size:28px; line-height:1.15; color:var(--ink); }
.ao-pop-text { color:var(--ink-soft); font-size:16px; line-height:1.5; }
.ao-pop .ao-btn { width:100%; padding:15px; }
.ao-pop .ao-via { text-align:center; margin-top:-2px; }
.ao-no { background:none; border:0; color:var(--ink-soft); font:600 14px/1 var(--body); cursor:pointer; padding:10px; min-height:44px; text-decoration:underline; }
.ao-x-img { background:rgba(0,0,0,.55); color:#fff; top:10px; right:10px; }
.ao-x-img:hover { background:rgba(0,0,0,.7); }
html.ao-locked { overflow:hidden; }
@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; }
}
@media print { .ao-slide, .ao-pop { display:none !important; } }

/* A picks band that lost the primary walk to dedupe keeps two cards: two columns, centred, no
   empty third slot (same rule as wroclawtravelguide.com's article layer). */
@media (min-width:700px) {
  .article .tour-picks .tp-grid:has(> .tp-card:nth-child(2):last-child) { grid-template-columns:repeat(2, minmax(0,1fr)); max-width:46rem; margin-inline:auto; }
}

/* port-site: star glyph darkened for 4.5:1 on this site's light grounds */
.ao-st { color:#755211; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ao-st { color:var(--gold); } }
:root[data-theme="dark"] .ao-st { color:var(--gold); }