/* The page for tourist offices (SPEC.md §2.24): the live preview of a
   destination in the app, and its printable sticker. The notebook and the
   polaroids copy DestinationSpotlightView, colour for colour. */

.offer { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 1.5rem; margin: 2rem 0; text-align: center; }
.offer .price { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; }
.offer .was { text-decoration: line-through; color: var(--muted); margin-left: .5rem; font-size: 1.2rem; }
.offer p { margin: .4rem 0; }
.offer .cta { margin-top: 1rem; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; position: relative; padding: .6rem 0 .6rem 2.4rem; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: .6rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; display: grid; place-items: center; }

/* --- the form ------------------------------------------------------------- */
.builder { display: grid; gap: .9rem; background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 1.25rem; }
.builder label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
.builder input[type=text], .builder textarea { font: inherit; font-weight: 400; padding: .6rem .7rem; border-radius: 10px;
  border: 1px solid var(--rule); background: var(--page); color: var(--ink); }
.builder textarea { min-height: 4.5rem; resize: vertical; }
.builder .hint { font-weight: 400; font-size: .85rem; color: var(--muted); }
.builder a, .offer a:not(.cta):not(.badge) { color: var(--accent); }
.builder .ok { color: #2E7D4F; font-weight: 400; font-size: .85rem; }
.builder .warn { color: var(--accent); font-weight: 400; font-size: .85rem; }
.slugrow { display: flex; align-items: center; gap: .25rem; font-weight: 400; }
.slugrow span { color: var(--muted); white-space: nowrap; }
.slugrow input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace !important; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }

/* --- the three phones ------------------------------------------------------ */
.phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem; margin: 1.5rem 0;
  /* Wider than the text column: three phones side by side on a desktop. */
  width: min(calc(100vw - 2.5rem), 60rem); margin-left: 50%; transform: translateX(-50%); }
.phone { border: 10px solid #1C1A19; border-radius: 36px; overflow: hidden; aspect-ratio: 9 / 19.5; background: #F2F2F7;
  position: relative; box-shadow: 0 12px 30px rgba(0,0,0,.18); color: #1C1C1E; }
.phone figcaption { text-align: center; font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.pv { position: absolute; inset: 0; overflow: hidden; }

/* The splash: DestinationSpotlightView's paper, ink and terracotta. */
.notebook { background: #F7F0E0 repeating-linear-gradient(to bottom, transparent 0 27px, rgba(140,168,204,.28) 27px 28px);
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14% 8% 6%; }
.notebook::before { content: ""; position: absolute; left: 11%; top: 0; bottom: 0; width: 1px; background: rgba(188,80,52,.35); }
.nb-label { font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: #BC5034; font-weight: 600; margin: 0; }
.nb-name { font-family: "Noteworthy", "Bradley Hand", "Segoe Print", "Comic Neue", cursive; font-weight: 700; font-size: 1.45rem;
  color: #2B2926; margin: .2rem 0 0; line-height: 1.15; }
.nb-prints { position: relative; width: 100%; flex: 1; min-height: 50%; }
.print { position: absolute; left: 50%; top: 48%; width: 58%; margin: 0; padding: 5% 5% 18%; background: #FCFCFC;
  box-shadow: 1px 4px 8px rgba(0,0,0,.25); transform: translate(calc(-50% + var(--x) * .52), calc(-50% + var(--y) * .52)) rotate(var(--a)); }
.print img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.tape { position: absolute; top: -6%; left: 31%; width: 38%; height: 10%; background: rgba(237,224,184,.85); transform: rotate(-8deg); }
.nb-blurb { font-family: "Noteworthy", "Bradley Hand", "Segoe Print", cursive; font-size: .8rem; color: #2B2926; margin: .3rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nb-count { font-size: .62rem; color: rgba(43,41,38,.6); margin: .2rem 0 .5rem; }
.nb-go { display: block; width: 100%; background: #BC5034; color: #fff; border-radius: 999px; padding: .55rem; font-weight: 600; font-size: .8rem; }
.nb-skip { display: block; font-size: .75rem; color: rgba(43,41,38,.7); margin-top: .45rem; }

/* The home card. */
.home { padding: 18% 5% 0; }
.pv-section { font-weight: 600; color: #6B6B70; font-size: .8rem; margin: 0 0 .4rem .3rem; }
.home-card { height: 42%; min-height: 150px; border-radius: 14px; background: #ddd center/cover; position: relative; overflow: hidden; }
.home-card-text { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem; color: #fff; display: grid;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.home-card-text span { font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.home-card-text strong { font-size: 1rem; }
.home-card-text em { font-style: normal; font-size: .7rem; }
.home-rows { margin-top: .8rem; display: grid; gap: .5rem; }
.home-rows div { height: 2.2rem; border-radius: 10px; background: #fff; }

/* The walk. */
.walk { background: #F2F2F7; overflow-y: auto; padding-bottom: 8%; }
.walk-photo { display: block; width: 100%; height: 30%; min-height: 110px; object-fit: cover; }
.walk-name { font-weight: 700; margin: .6rem .8rem .1rem; font-size: .95rem; }
.walk-badge { color: #BC5034; font-size: .68rem; margin: 0 .8rem .3rem; }
.walk-desc { font-size: .7rem; margin: 0 .8rem .4rem; line-height: 1.35; }
.walk-stats { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: .2rem .8rem .5rem; }
.walk-stats dd, .walk-stats dt { white-space: nowrap; }
.walk-stats dt { font-size: .55rem; text-transform: uppercase; color: #6B6B70; }
.walk-stats dd { margin: 0; font-weight: 600; font-size: .8rem; }
#pv-map { height: 34%; min-height: 130px; margin: 0 .6rem; border-radius: 10px; }

/* --- the QR code and the stickers ------------------------------------------- */
.qr { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 1.25rem; align-items: center; }
@media (max-width: 560px) { .qr { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
#qr-box canvas { width: 100%; max-width: 220px; height: auto; display: block; border-radius: 8px; image-rendering: pixelated; }
#qr-address { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; word-break: break-all; color: var(--muted); }
.qr .buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.qr button { font: inherit; font-weight: 600; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--accent);
  background: none; color: var(--accent); cursor: pointer; }
.qr button.primary { background: var(--accent); color: #fff; }
#sheet { display: none; }

/* Printing gives one A4 sheet of six stickers and nothing else: a label
   sheet from any stationer, or plain paper cut out, or the PNG sent to a
   printer (the app links one per country). */
@media print {
  /* Everything but the sheet is taken out of the flow, not just hidden: a
     hidden page still has its height and printed as four blank sheets. */
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .wrap > *:not(#sheet) { display: none !important; }
  #sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10mm; padding: 12mm; background: #fff; }
  .sticker { border: 1px dashed #bbb; border-radius: 6mm; padding: 6mm; text-align: center; color: #000; display: grid; justify-items: center; gap: 1mm;
    break-inside: avoid; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
  .sticker img { width: 45mm; height: 45mm; image-rendering: pixelated; }
  .sticker strong { font-size: 14pt; }
  .sticker span { font-size: 10pt; color: #BC5034; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
  .sticker em { font-style: normal; font-size: 9pt; }
  .sticker small { font-size: 7pt; color: #555; }
  @page { size: A4; margin: 0; }
}