/* ============================================================
   Liravo — Guides article page
   Geometry & type from Figma 1761:8340 (1440 x 65316)
   ============================================================ */

.article-page { background: var(--white); }

.art-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
}

/* ---------- Hero ---------- */
.art-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 100px below the nav (Figma 1761:8340: nav 28–68, Go back at 168). */
  margin-top: 100px;
}

.art-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 15px;
  border-radius: 20px;
  background: var(--bg-soft);
  border: 1px solid #e2e2e2;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 17px;
  color: var(--ink);
  transition: background .15s ease;
}
.art-back:hover { background: #ededf2; }

.art-h1 {
  margin-top: 30px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 96px;
  color: var(--ink);
}

.art-hero-meta {
  display: flex;
  /* Figma 1761:8502 — the date box (y485–505) bottom-aligns with the byline
     block (y460–505), i.e. it lines up with the role line, not the row center. */
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
}

.art-byline {
  display: flex;
  align-items: center;
  gap: 20px;
}

.art-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
}

.art-byline-text {
  display: flex;
  flex-direction: column;
  /* Figma 1761:8500/8501 — name box y460–480, role box y485–505: 5px between
     the lines. The 45px text block then exactly matches the 45px avatar, so
     the flex centering has no slack. */
  gap: 5px;
}

.art-byline-name,
.art-byline-role,
.art-date {
  font-family: var(--font-wix);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  /* Figma 1761:8340 — all three hero meta lines are #7b7b7b / Wix 500. */
  color: #7b7b7b;
}

/* ---------- Hero route map ---------- */
.art-hero-map {
  position: relative;
  margin-top: 40px;
  border-radius: 7px;
  overflow: hidden;
  /* TOC "01 Route Overview" lands here (Boss 2026-10-29: the map must be
     visible): drop clear of the fixed 76px nav bar + small gap. */
  scroll-margin-top: 90px;
}

.art-hero-map > img:first-child {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Route timeline ---------- */
.art-timeline {
  position: relative;
  margin-top: 40px;
  height: 94px;
}

.art-tl-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 1px;
  /* Figma Line 209: 1px stroke, 4/5 dash, round caps, #A0A0A0 */
  background-image: repeating-linear-gradient(to right, #a0a0a0 0 4px, transparent 4px 9px);
}

.art-tl {
  list-style: none;
  margin: 0;
  padding: 0;
}

.art-tl li {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: 0;
  transform: translateX(-50%);
  width: 130px;
  text-align: center;
}

.art-tl-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-family: 'Inter', var(--font-ui);
  font-size: 15px;
  line-height: 18px;
}

.art-tl-name {
  display: block;
  margin-top: 19px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: var(--ink);
}

.art-tl-days {
  display: block;
  margin-top: 11px;
  font-family: 'Inter', var(--font-ui);
  font-size: 16px;
  line-height: 19px;
  color: #7b7b7b; /* Figma 1761:8340 */
}

/* ---------- Two-column body ---------- */
.art-layout {
  display: grid;
  grid-template-columns: minmax(0, 710px) 210px;
  column-gap: 121px;
  margin-top: 90px;
}

.art-main { min-width: 0; }

/* Desktop: the footer starts 100px below the article's last block
   (Figma measurement on the 1761:8340 canvas). Mobile footer rules
   already match their own design — untouched. */
@media (min-width: 769px) {
  .article-page main { margin-bottom: 100px; }

  /* The guide nav is a fixed 76px white bar (explore.css, Boss 2026-10-27
     bug 1.1.4). It replaces the in-flow nav's 20+56, so shift the article
     down by the same 76 — the hero geometry is unchanged. Padding, not
     margin: as the body's first in-flow child now, a top margin would
     collapse straight through and do nothing. Anchors and the sticky TOC
     card stay clear of the bar (76 + the old 24 gap). */
  /* nav compensation lives at body level in explore.css (bug 2.1.9) */
  .article-page .art-h2 { scroll-margin-top: 100px; }
  .article-page .art-toc-card { top: 100px; }
}

.art-block { margin-top: calc(var(--sp, 40px) * var(--sp-scale, 1)); }
.art-block:first-child { margin-top: 0; }

/* ---------- Type scale ---------- */
.art-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 54px;
  color: var(--ink);
  scroll-margin-top: 24px;
}

.art-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: var(--ink);
}

.art-h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: var(--ink);
}

.art-p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #3d3d3d;
  /* Figma copy carries hard line breaks (pasted from a doc) — preserve them at
     desktop so the article keeps the frame's rhythm, reflow freely on mobile. */
  white-space: pre-line;
}

/* Blank lines in the Figma copy became separate <p> elements; the gap is one
   line-height (26 desktop / 24 mobile per Figma 1761:8340 and 1761:7201). */
.art-p + .art-p { margin-top: 26px; }

/* Structured label lines (Figma 7371/7921/7388/7937): "Label:" in Golos
   Medium, value Regular; consecutive design lines carry no extra gap (a
   blank line in the design = the regular .art-p + .art-p margin). */
.art-lbl { font-weight: 500; }
.art-p.art-l + .art-p.art-l { margin-top: 0; }

/* Inline Medium emphasis spans (Figma 1761:7372/7373, desktop 1761:8449):
   designer sets Golos Medium (500) on key phrases inside otherwise-Regular
   paragraphs. Shared rule — both breakpoints carry the same emphasis. */
.art-em { font-weight: 500; }

.art-p.art-lead { font-weight: 500; }

.art-meta,
.art-small {
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--ink);
}
/* Meta lines (🕐 Time needed: …): Golos 400 with #3d3d3d fill on both frames —
   16/19.2 desktop (1761:8340 nodes 8450–8473), 15/18 mobile (1761:7201
   node 7455+; mobile override in the 768px block). */
.art-meta { font-size: 16px; line-height: 19.2px; color: #3d3d3d; }
.art-small { font-size: 15px; line-height: 18px; }

.art-sep {
  border: none;
  border-top: 1px solid #dedede;
  margin: 0;
}

/* ---------- Figures ---------- */
.art-figrow {
  display: flex;
  gap: 9px;
  /* Rows with 3+ images (Alhambra/Córdoba 4-image galleries) wrap
     into a 2-wide grid: 2×350+9 = 709 fills one line exactly, extra images
     drop to the next line and the 9px gap applies on both axes — same 2x2
     geometry the old stacked --sp:9px blocks produced. 1- and 2-image rows
     fit one line, so wrap is a no-op for them. Mobile resets to nowrap:
     there the row is a horizontal swipe track, not a grid. */
  flex-wrap: wrap;
}

.art-figrow img {
  display: block;
  width: 350px;
  height: 469px;
  object-fit: cover;
}

.art-figrow img:only-child {
  width: 100%;
  max-width: 709px;
  height: auto;
  aspect-ratio: 709 / 469;
}

/* V4 (t_18fae39f): slot single image keeps the pair-slot geometry instead of
   full-width landscape — desktop 350×469 left-aligned (Figma 1761:8340 [1761:9299]).
   Scoped to the .art-figrow--slot modifier; all other single-image rows stay
   full-width via the rule above. */
.art-figrow--slot img:only-child {
  width: 350px;
  max-width: none;
  height: 469px;
  aspect-ratio: auto;
}

/* ---------- Info card ---------- */
.art-info {
  display: flex;
  border: 1px solid #dedede;
  border-radius: 8px;
}

.art-info-cell { padding: 30px; }
.art-info-cell:first-child { flex: 0 0 246px; }
.art-info-cell + .art-info-cell {
  flex: 1;
  margin: 30px 0;
  padding: 0 30px;
  border-left: 1px solid #dedede;
}

.art-info-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 18px;
  color: var(--ink);
}

.art-info-value {
  margin-top: 23px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  color: var(--ink);
}

/* Multi-item values: inline with dots on desktop (Figma 1761:8340),
   stacked lines on mobile (Figma 1761:7201). */
.art-info-value span + span::before { content: " • "; }

/* ---------- Route journey list (mobile, Figma 1761:7201) ----------
   Hidden at desktop where the Route table renders. */
.art-route { display: none; }

/* ---------- Callout card (Lunch/Dinner idea) ---------- */
.art-callout {
  width: calc(var(--cw, 709) * 1px);
  max-width: 100%;
  padding: 20px;
  border: 1px solid #dedede;
  border-radius: 8px;
}

.art-callout-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: var(--ink);
  margin-bottom: 20px;
}

/* ---------- Tables ---------- */
.art-table-wrap {
  width: calc(var(--tw, 709) * 1px);
  max-width: 100%;
  border: 1px solid #dedede;
  border-radius: 8px;
  overflow: hidden;
}

.art-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 19.2px;
  color: var(--ink);
}

.art-table th,
.art-table td {
  /* 19px side padding gives 2px of slack: Figma text boxes sit exactly on the
     column bound, and Chrome's metrics round a hair wider -> would wrap */
  padding: 20px 19px;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}

.art-table th,
.art-table td.b { font-weight: 500; }

.art-table tbody tr + tr th,
.art-table tbody tr + tr td,
.art-table thead + tbody tr:first-child th,
.art-table thead + tbody tr:first-child td {
  border-top: 1px solid #ededed;
}

.art-table th + th,
.art-table td + td { border-left: 1px solid #ededed; }

/* Boss 2026-10-29: Alcázar Winter group — the season cell rowspans its 3
   rows so the horizontal entry lines cross ONLY the Days/Hours columns,
   never the merged Season column. The sub-row first cell still carries the
   Season|Days column line (the rowspan ate the cells that drew it). */
.art-season-a tbody tr.art-sub td:first-child { border-left: 1px solid #ededed; }

/* Ticket tables (Figma 1761:8340): cells that wrap to two lines are lh-26 /
   52px-tall text boxes in the design (nodes 8835/8836/8837/8838/8840/8842/
   8846/8847/8848) while 1-line cells keep the 19.2 base — 2-line rows pitch
   92 vs 79. art-2l tags the nine wrapped cells; the mobile block re-flows
   them as plain 14/24 text lines, so this stays desktop-only. */
.art-ticket .art-table td.art-2l { line-height: 26px; }

/* ---------- Table of contents ----------
   Row styling follows the reference pattern: plain rows, muted 14/22 text,
   and an 8px-radius pill on hover and on the section currently in view. */
.art-aside {
  position: relative;
}

.art-toc-card {
  position: sticky;
  top: 24px;
}

.art-aside-title {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--ink);
}

.art-toc {
  list-style: none;
  margin: 35px 0 32px;
  padding: 0;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.art-toc::-webkit-scrollbar { width: 5px; }
.art-toc::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
.art-toc::-webkit-scrollbar-track { background: transparent; }

.art-toc li + li { margin-top: 14px; }

.art-toc a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #000;
}

.art-toc-num { flex: 0 0 20px; line-height: 26px; color: #a0a0a0; }
.art-toc a.is-active .art-toc-num,
.art-toc a:hover .art-toc-num { color: var(--ink); }

/* ---------- Mobile contents drawer (Figma 1761:8207) ---------- */
.art-contents-toggle,
.art-contents-panel,
.art-contents-scrim { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .art-container { padding: 0 24px; }
  .art-layout { grid-template-columns: minmax(0, 1fr); }
  .art-aside { display: none; }

  .art-contents-toggle {
    display: block;
    position: fixed;
    left: 0;
    bottom: 45px;
    width: 92px;
    height: 55px;
    border: none;
    border-radius: 0 26px 27.5px 0;
    background: var(--bg-soft);
    box-shadow: 0 8px 20.2px -7px rgba(0, 0, 0, .19);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 17px;
    color: var(--ink);
    text-align: left;
    padding-left: 15px;
    cursor: pointer;
    z-index: 40;
  }

  .art-contents-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .2);
    z-index: 95; /* above the fixed nav bar (90) — Boss 2026-10-29 */
  }

  .art-contents-panel {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 227px;
    padding: 30px 30px 0;
    background: #fff;
    overflow-y: auto;
    z-index: 96; /* above the fixed nav bar (90) — Boss 2026-10-29 */
  }

  .art-contents-scrim[hidden],
  .art-contents-panel[hidden] { display: none; }

  .art-contents-panel .art-aside-title { font-size: 16px; }
  .art-contents-panel .art-toc { margin-top: 22px; margin-bottom: 19px; max-height: none; }
  .art-contents-panel .art-toc li + li { margin-top: 22px; }
  .art-contents-panel .art-toc a { font-size: 14px; line-height: 24px; }
  .art-contents-panel .art-toc-num { flex-basis: 20px; line-height: 24px; }
}

@media (max-width: 768px) {
  /* Boss 2026-10-15 (revised same day): mobile gutter = 29 (deliberate
     deviation from the design frame's x30 origin) — content column 335 at
     393. Every gutter-tied value below (full-bleed -29 breakouts, fluid
     widths) follows this basis; Figma-comment "333" references describe the
     frame's 30-gutter geometry and stay as historical design notes. */
  .art-container { padding: 0 29px; }

  /* Mobile hero (Figma 1761:8109): no Go Back; stacking is date -> title ->
     byline -> full-bleed map with 30/10/20/30 gaps. .art-hero-meta goes
     display:contents so .art-date can order above .art-h1. */
  .art-actions { display: none; }
  .art-hero { display: flex; flex-direction: column; }
  .art-hero-meta { display: contents; }
  .art-date {
    order: -2;
    margin-top: 30px;
    font-size: 12px;
    line-height: 15.12px;
    color: #7b7b7b;
  }
  .art-h1 { order: -1; margin-top: 10px; font-size: 24px; line-height: 36px; }
  .art-byline { gap: 10px; margin-top: 20px; }
  /* Figma 1761:8122/8123 — name box y196–211, role box y214–229: 3px between
     the lines (block then matches the 33px avatar). */
  .art-byline-text { gap: 3px; }
  .art-avatar { width: 33px; height: 33px; }
  .art-byline-name,
  .art-byline-role { font-size: 12px; line-height: 15.12px; color: #7b7b7b; }
  .art-hero-map { margin: 30px -29px 0; border-radius: 0; height: 308px; }
  .art-hero-map > img:first-child { height: 100%; object-fit: cover; }
  /* .art-main is a grid item, so the first .art-block's margin never
     collapses through it — the layout wrapper must add nothing here or the
     two 40s stack (the 80px bug). The first block's :has(> .art-h2) 40px
     margin alone provides the timeline-end -> h2 gap (Figma 1761:7201: 40). */
  .art-layout { margin-top: 0; }

  .art-main { --sp-scale: 1; }

  /* Section separators are desktop-only — the mobile frame (1761:7201) has
     no hairlines between POI sections, just the 30px gap. The whole block is
     removed (not just the hr) so it can't leak margin into the rhythm. */
  .art-block:has(> .art-sep) { display: none; }

  /* Vertical rhythm per Figma 1761:7201 gap matrix: 20px after headings/
     image rows/callout cards; 30px otherwise; 40px before Day h2s. */
  .art-block { margin-top: 30px; }
  .art-block:has(> .art-h2) { margin-top: 40px; }
  .art-block:has(> .art-h2) + .art-block,
  .art-block:has(> .art-h3) + .art-block,
  .art-block:has(> .art-h4) + .art-block,
  .art-block:has(> .art-figrow) + .art-block,
  .art-block:has(> .art-callout) + .art-block,
  .art-block:has(> .art-callout) + .art-block:has(> .art-sep) + .art-block { margin-top: 20px; }

  /* Budget-card → note gap: 20px, not the flat 30 default (Figma 1761:7201,
     e.g. Madrid Day 10 card: card bottom y45582 → note y45602 = 20). The
     11 "Accommodation isn't included" note blocks are tagged art-budget-note
     in the HTML; every other junction keeps the gap matrix above. Desktop
     is untouched — the note blocks' inline --sp:40px rhythm applies there. */
  .art-block.art-budget-note { margin-top: 20px; }

  .art-h2 { font-size: 20px; line-height: 30px; }
  .art-h3 { font-size: 16px; line-height: 24px; }
  .art-h4 { font-size: 16px; line-height: 24px; }
  .art-p { font-size: 14px; line-height: 24px; color: #3d3d3d; white-space: normal; }
  .art-p + .art-p { margin-top: 24px; }
  .art-meta { font-size: 15px; line-height: 18px; }

  /* Meal-idea callout cards (Figma 1761:7201, nodes 1761:7483/7484/7485):
     container 333 wide, r8, transparent fill, 1px inside stroke at 0.9313
     (≈#ededed — lighter than the #dedede budget/ticket cards, which the
     desktop frame keeps for callouts too, hence the mobile-only override),
     padding 20, label Poppins-Medium 16/24 #000 (desktop is 20/30),
     label→body gap 20, body is plain .art-p 14/24. */
  .art-callout { border-color: #ededed; }
  .art-callout-label { font-size: 16px; line-height: 24px; }

  /* Route list: vertical rail + numbered stops (Figma 1761:7201) — no sideways
     scrolling; the nine stops stack down the page instead. Rows are bare
     content-height rows like the design (18px texts, 20px circles at row
     top — circle centers stay aligned with the text via align-items:center
     in the 20px track), 30px BETWEEN rows so circle tops keep pitch 50, and
     the section ends at the last row's content bottom (no 50px boxes with
     trailing space). Padding-top 30 (not margin) keeps the map→timeline
     gap at 30. (Until 2026-10-29 this section held the #route-overview
     anchor; Boss moved it to .art-hero-map so the TOC jump shows the map.)
     Line 209 runs BEHIND the circles (first→last center: top 40 = 30 padding
     + 10 row-center, bottom 10); z-index:1 on the list paints the black
     circles over the dashes, visible only between circles. */
  .art-timeline { height: auto; margin-top: 0; padding-top: 30px; overflow: visible; }
  .art-tl-line {
    left: 10px;
    right: auto;
    top: 40px;
    bottom: 10px;
    width: 1px;
    height: auto;
    background-image: repeating-linear-gradient(to bottom, #a0a0a0 0 4px, transparent 4px 9px);
  }
  .art-tl { display: block; position: relative; z-index: 1; }
  .art-tl li {
    position: static;
    transform: none;
    width: auto;
    text-align: left;
    display: grid;
    grid-template-columns: 20px 73px auto;
    column-gap: 20px;
    align-items: center;
  }
  .art-tl li + li { margin-top: 30px; }
  .art-tl-dot { width: 20px; height: 20px; margin: 0; font-size: 12px; line-height: 14.5px; }
  .art-tl-name { margin-top: 0; font-size: 15px; line-height: 18px; }
  .art-tl-days {
    margin-top: 0;
    font-family: 'Inter', var(--font-ui);
    font-size: 15px;
    line-height: 18.2px;
    color: #7b7b7b;
  }

  /* Two-image rows per Figma 1761:7201: side-by-side 276×370 with a 10px gap,
     the second image peeking past the right screen edge — the row is a
     horizontal swipe gallery (scrollbar hidden, overscroll contained).
     Single-image rows stay full-width landscape (333×221). */
  .art-figrow {
    flex-direction: row;
    /* Base (desktop) rule wraps 4-image rows into a 2x2 grid — the mobile
       row is a single-line swipe track instead, so wrapping stays off. */
    flex-wrap: nowrap;
    gap: 10px;
    /* Track breaks out of the 29px gutter so the swipe area runs flush to
       the right screen edge; trailing pad 29 mirrors the left gutter when
       fully scrolled. */
    margin-right: -29px;
    padding-right: 29px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .art-figrow::-webkit-scrollbar { display: none; }
  .art-figrow img { flex: none; width: 276px; height: 370px; }
  .art-figrow:has(> img:only-child) { margin-right: 0; padding-right: 0; overflow: visible; }
  .art-figrow img:only-child { width: 100%; height: auto; aspect-ratio: 709 / 469; }
  /* V4 (t_18fae39f): slot single keeps the mobile pair-slot 276×370 at x30
     (Figma 1761:7201, Mask group y46170) instead of full-width 333×221. */
  .art-figrow--slot img:only-child {
    width: 276px;
    height: 370px;
    aspect-ratio: auto;
  }

  /* Info cards: two side-by-side bordered cards per Figma 1761:7201
     (161x141, 11px gap, r8 #ededed, 15px padding, icon 16 + 13px label,
     14/20 values stacked). */
  .art-info { flex-direction: row; gap: 11px; border: none; }
  .art-info-cell,
  .art-info-cell:first-child,
  .art-info-cell + .art-info-cell {
    flex: 1;
    margin: 0;
    padding: 15px;
    border: 1px solid #ededed;
    border-radius: 8px;
  }
  .art-info-label { font-size: 13px; line-height: 16px; gap: 5px; }
  .art-info-label svg { width: 16px; height: 16px; }
  .art-info-value { font-size: 14px; line-height: 20px; margin-top: 15px; font-weight: 400; /* Figma 1761:7399/7400: mobile values Regular; desktop stays 500 */ }
  .art-info-value span { display: block; }
  .art-info-value span + span::before { content: none; }

  /* Route journey list per Figma 1761:7201: card #dedede r8, 7 legs at 90px
     pitch (Train 12px centered, cities 16px, duration 12px centered, hairline
     separators, day-trip double arrow + note). Arrow vectors 1761:7414-7421:
     fixed 108px slot at card-rel x112-220 (grid minmax(0,1fr) 108px
     minmax(0,1fr), cities pinned outward), 1px #000 stroke, dash [1,3] with
     round caps (renders 2px on / 2px off, 4px period) + an OPEN chevron head
     (4.5px arms, 1px stroke, tip x108.4). Day-trip = Arrow 8, the same arrow
     rotated 180deg -> chevrons on both ends. */
  .art-route-table { display: none; }
  .art-route {
    display: block;
    border: 1px solid #dedede;
    border-radius: 8px;
  }
  .art-route-leg { position: relative; padding: 20px 20px 22px; text-align: center; }
  .art-route-leg + .art-route-leg { border-top: 1px solid #ededed; }
  .art-route-train,
  .art-route-time {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #000;
  }
  .art-route-cities {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr);
    align-items: center;
    margin-top: 1px;
  }
  .art-route-from { justify-self: start; }
  .art-route-to { justify-self: end; }
  .art-route-from,
  .art-route-to {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #000;
  }
  .art-route-arrow {
    position: relative;
    height: 1px;
    background: repeating-linear-gradient(to right, #000 0 2px, transparent 2px 4px);
  }
  .art-route-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.5px;
    width: 4.5px;
    height: 4.5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: translateY(-50%) rotate(45deg);
  }
  .art-route-arrow.is-daytrip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5px;
    width: 4.5px;
    height: 4.5px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: translateY(-50%) rotate(-45deg);
  }
  /* Day-trip note (Figma 1761:7449 @(8948,3186)): sits on the duration row
     under the destination city, out of flow — the leg keeps the standard
     pitch and the card stays 620px tall (1761:7406). Note fill is #000. */
  .art-route-note {
    position: absolute;
    right: 20px;
    bottom: 22px;
    margin: 0;
    text-align: right;
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #000;
  }

  /* Non-budget tables per Figma 1761:7201 render as text blocks, not tables:
     Opening Hours entries are stacked ("· date" Medium line, time line below);
     ticket/season entries join "· label: value" on one Medium line with
     detail lines below; entries separated by a blank line (24px). */
  .art-table-wrap:not(.art-budget):not(.art-route-table) { overflow: visible; }
  .art-table-wrap:not(.art-budget):not(.art-route-table) {
    border: none;
    border-radius: 0;
  }
  .art-table-wrap:not(.art-budget):not(.art-route-table) .art-table,
  .art-table-wrap:not(.art-budget):not(.art-route-table) .art-table tbody {
    display: block;
  }
  .art-table-wrap:not(.art-budget):not(.art-route-table) .art-table thead { display: none; }
  .art-table-wrap:not(.art-budget):not(.art-route-table) .art-table tr {
    display: block;
    padding: 0;
  }
  .art-table-wrap:not(.art-budget):not(.art-route-table) .art-table tbody tr + tr {
    margin-top: 24px;
  }
  .art-table-wrap:not(.art-budget):not(.art-route-table) .art-table th,
  .art-table-wrap:not(.art-budget):not(.art-route-table) .art-table td {
    display: block;
    padding: 0;
    border: none;
    font-size: 14px;
    line-height: 24px;
    color: #3d3d3d;
  }

  .art-hours .art-table td:first-child { font-weight: 500; }
  .art-hours .art-table td:first-child::before { content: "· "; }

  /* Visit-type hours (Casa Batlló, Figma 7368): "Label: value" single lines,
     Medium label, no bullets, consecutive lines. */
  .art-table-wrap.art-hours-inline:not(.art-budget) .art-table td { display: inline; }
  .art-table-wrap.art-hours-inline:not(.art-budget) .art-table tbody tr + tr { margin-top: 0; }
  .art-table-wrap.art-hours-inline:not(.art-budget) .art-table td:first-child { font-weight: 500; }
  .art-table-wrap.art-hours-inline:not(.art-budget) .art-table td:first-child::after { content: ": "; }

  .art-table-wrap.art-ticket .art-table td:first-child,
  .art-table-wrap.art-ticket .art-table td:nth-child(2) { display: inline; }
  .art-table-wrap.art-ticket .art-table td:first-child::before { content: "· "; }
  .art-table-wrap.art-ticket .art-table td:first-child::after { content: ": "; }
  /* Figma 1761:7372/7373: mobile ticket ENTRY lines are Golos Medium — the
     whole line, label and price; only descriptions and body text override to
     Regular. Desktop (>=769px) is the opposite and stays untouched. */
  .art-table-wrap.art-ticket .art-table tbody td:first-child { font-weight: 500; }
  /* Approximate prices: the mobile design prefixes the Gaudí-site ticket
     prices with '~' (Figma 1761:7372-7375); desktop keeps exact values, so
     the hook is mobile-only. Casa Vicens cells read "From €20" — the word is
     hidden on mobile where '~' replaces it. */
  .art-table-wrap.art-ticket .art-table td.art-approx::before { content: "~"; }
  .art-table-wrap.art-ticket .art-table td.art-approx .art-from { display: none; }
  /* Figma 1761:8074: the compact two-column ticket tables render as
     consecutive 24px lines — zero inter-row gap on mobile. The 24px
     separator from the generic non-budget rule stays for the three-column
     tables (price + includes/description rows) and season tables. */
  .art-table-wrap.art-ticket.art-compact .art-table tbody tr + tr { margin-top: 0; }

  /* Figma 1761:8078 (Giralda, Day 8): the three-column office-price ticket
     table renders as the design's text lines on mobile — Medium label line
     ("· label:"), then "Online €n" / "At the ticket office €n" sub-lines at
     8px indent (design has two leading spaces); cells holding only the em
     dash (no office price, td.art-na) do not render at all. Rows keep the
     generic 24px blank-line gap. Desktop (>=769px) keeps the 3-column table
     with the "—" dashes. */
  .art-table-wrap.art-ticket.art-3col .art-table td:first-child,
  .art-table-wrap.art-ticket.art-3col .art-table td:nth-child(2) { display: block; }
  .art-table-wrap.art-ticket.art-3col .art-table td:nth-child(2)::before { content: "Online "; }
  .art-table-wrap.art-ticket.art-3col .art-table td:nth-child(3)::before { content: "At the ticket office "; }
  .art-table-wrap.art-ticket.art-3col .art-table td:nth-child(2),
  .art-table-wrap.art-ticket.art-3col .art-table td:nth-child(3) { text-indent: 8px; }
  .art-table-wrap.art-ticket.art-3col .art-table td.art-na { display: none; }

  /* ── Season tables (Figma 1761:7201 frame): the Alcázar (1761:7966),
     Sagrada Família (1761:7369) and Royal Palace (1761:7967) opening-hours
     tables render as the design's text lines on mobile — season label line
     Medium, value lines Regular 24px consecutive, blank 24px line between
     season groups; '—' cells and empty season cells do not render. The
     wraps drop art-ticket (its inline '· label: value' join produced the
     broken '· : Sat' lines) and gain art-season + a per-table modifier.
     Desktop (>=769px) keeps the three tables untouched. */

  /* Alcázar (Day 9 Córdoba, Season|Days|Hours, 1761:7966): value lines are
     time-then-day, so the Hours cell is visually reordered before the Days
     cell (flex order) and joined with a real space — white-space: pre on
     the generated separator keeps the space from collapsing at line end.
     The Closed row renders 'Closed: value' on one line; its '—' Hours cell
     (td.art-na) does not render. Value rows are consecutive; the blank 24px
     line sits before Summer and before Closed (group starts). */
  .art-table-wrap.art-season.art-season-a .art-table tbody tr {
    display: flex;
    flex-wrap: wrap;
  }
  .art-table-wrap.art-season.art-season-a .art-table td:first-child { flex-basis: 100%; }
  .art-table-wrap.art-season.art-season-a .art-table td:first-child:empty { display: none; }
  .art-table-wrap.art-season.art-season-a .art-table td:first-child:not(:empty)::after { content: ":"; }
  .art-table-wrap.art-season.art-season-a .art-table td:nth-child(3) { order: 2; }
  .art-table-wrap.art-season.art-season-a .art-table td:nth-child(2) { order: 3; }
  .art-table-wrap.art-season.art-season-a .art-table td:nth-child(3)::after {
    content: " ";
    white-space: pre;
  }
  .art-table-wrap.art-season.art-season-a .art-table td.art-na { display: none; }
  .art-table-wrap.art-season.art-season-a .art-table tr:has(td.art-na) td:first-child { flex-basis: auto; }
  .art-table-wrap.art-season.art-season-a .art-table tr:has(td.art-na) td:first-child::after {
    content: ": ";
    white-space: pre;
  }
  .art-table-wrap.art-season.art-season-a .art-table tbody tr + tr { margin-top: 0; }
  .art-table-wrap.art-season.art-season-a .art-table tbody tr:nth-child(4),
  .art-table-wrap.art-season.art-season-a .art-table tbody tr:nth-child(5) { margin-top: 24px; }

  /* Winter sub-rows (rowspan group, Boss 2026-10-29): only Day + Hours
     cells remain; keep the "hours day" line join and stop the season-label
     rules (full-width basis, ":" suffix) from firing on them. */
  .art-table-wrap.art-season.art-season-a .art-table tbody tr.art-sub td:first-child {
    flex-basis: auto;
    order: 2;
  }
  .art-table-wrap.art-season.art-season-a .art-table tbody tr.art-sub td:first-child::after { content: none; }
  .art-table-wrap.art-season.art-season-a .art-table tbody tr.art-sub td:nth-child(2) { order: 1; }
  .art-table-wrap.art-season.art-season-a .art-table tbody tr.art-sub td:nth-child(2)::after {
    content: " ";
    white-space: pre;
  }

  /* Sagrada Família (Day 3 Barcelona, Season|Mon–Fri|Sat|Sun, 1761:7369):
     the column headers become the line labels — '· Season' Medium bullet
     line (no colon), then 'Day: hours' lines with Medium day label +
     Regular value (the .art-lbl/.art-l pattern). The generic 24px row gap
     is the blank line between season groups. */
  .art-table-wrap.art-season.art-season-b .art-table td:first-child::before { content: "· "; }
  .art-table-wrap.art-season.art-season-b .art-table td:nth-child(2)::before {
    content: "Monday–Friday: ";
    font-weight: 500;
  }
  .art-table-wrap.art-season.art-season-b .art-table td:nth-child(3)::before {
    content: "Saturday: ";
    font-weight: 500;
  }
  .art-table-wrap.art-season.art-season-b .art-table td:nth-child(4)::before {
    content: "Sunday: ";
    font-weight: 500;
  }

  /* Royal Palace (Day 10 Madrid, Season|Mon–Sat|Sun, 1761:7967): value
     lines are time-then-day with the design's abbreviated day labels
     appended to the Regular hours value; the generic 24px row gap is the
     blank line between the two season groups. */
  .art-table-wrap.art-season.art-season-c .art-table td:first-child::after { content: ":"; }
  .art-table-wrap.art-season.art-season-c .art-table td:nth-child(2)::after { content: " Mon–Sat"; }
  .art-table-wrap.art-season.art-season-c .art-table td:nth-child(3)::after { content: " Sun"; }

  .art-table-wrap.art-budget {
    border-color: #dedede;
    border-radius: 8px;
    overflow: hidden;
  }
  .art-table-wrap.art-budget .art-table {
    display: block;
    width: 100%;
    /* Figma 1761:7510/7534/7606: mobile budget type is 14px / lh 16.8. */
    font-size: 14px;
    line-height: 16.8px;
  }
  .art-table-wrap.art-budget .art-table colgroup { display: none; }
  .art-table-wrap.art-budget .art-table thead,
  .art-table-wrap.art-budget .art-table tbody { display: contents; }
  /* Rows are pure grid tracks: NO padding and NO border on tr (Boss
     2026-10-14: padding-top/bottom and the border belong on the cells —
     border on tr is what broke the header→body divider across the
     thead/tbody DOM boundary and needed the old first-child hack).
     Label column = 181px (20 left pad + 161 content) so the vertical
     line (border-left on the value cell) lands at x211 per Figma
     Line 251; values sit 20px past it. */
  .art-table-wrap.art-budget .art-table tr {
    display: grid;
    grid-template-columns: 181px 1fr;
  }
  .art-table-wrap.art-budget .art-table th,
  .art-table-wrap.art-budget .art-table td {
    display: block;
    text-align: left;
    border: none;
  }
  .art-table-wrap.art-budget .art-table td.b { font-weight: 500; }
  /* Figma lines have zero layout height; the 1px cell border-top sits
     inside the 40px text gap: 1px border + 19px pad-top = text 20px below
     the line top; 20px pad-bottom = line 20px above the previous text
     bottom. Header cells carry no line (card top edge) so they take the
     full 20px pad-top. Every tbody cell paints its own top border, so
     the line is continuous regardless of row/DOM boundaries. */
  .art-table-wrap.art-budget .art-table thead th { padding: 20px 20px 20px; }
  .art-table-wrap.art-budget .art-table tbody td {
    border-top: 1px solid #dedede;
    padding: 19px 20px 20px;
  }
  /* Wrapped label rows (Figma): 2-line labels use 24px line-height (48px tall
     boxes) while single-line rows stay 14/16.8 — row pitch 88 vs 56.8. */
  .art-table-wrap.art-budget .art-table tr.art-tall td:first-child { line-height: 24px; }
  /* Pre-total divider sits 27px below the last data row ONLY on Days 1–3
     (Figma mobile 12234/17932/19434: text→divider 27); Days 4–12 use the
     normal 57px row (verified across all 12 design cards 2026-10-14). */
  .art-table-wrap.art-budget.pre27 .art-table tbody tr:nth-last-child(2) td { padding-bottom: 27px; }
  /* Label wrap is PER-ROW in the design (hand-drawn boxes: 2-line boxes run
     105–149px wide, single-line boxes up to 144). Column content is 161px;
     the wrap boundary is set by the label cell's right padding:
     default 20 → wraps at 141; .art-w1 = design single-line (0 → 161);
     .art-w2 = 2-line labels whose emoji+long-word break 3 lines at 141
     (4px → 157). Cells always span the full column so the row border
     stays continuous. */
  .art-table-wrap.art-budget .art-table tbody td:first-child { padding-right: 20px; }
  .art-table-wrap.art-budget .art-table tbody td.art-w1 { padding-right: 0; }
  .art-table-wrap.art-budget .art-table tbody td.art-w2 { padding-right: 4px; }
  /* Vertical column divider per Figma Line 251 (x211), full card height. */
  .art-table-wrap.art-budget .art-table th:last-child,
  .art-table-wrap.art-budget .art-table td:last-child {
    border-left: 1px solid #dedede;
  }
}