/* benidorm.co.uk DESIGN SYSTEM v1 components for the pSEO sections (theme parks, shows, flights, map).
   Source of truth: Claude Design System artifact "Benidorm.co.uk" (tokens + 12 components + 4 page templates).
   Same rules as the weather pages (scripts/build_weather.py): FactTile, Verdict, Chip, Button, FitBoxes, TableCard, grey panel.
   Tokens come from /assets/skin.css (:root). Every rule is scoped to .ds so nothing else on the site changes.
   Tokens only: no hex, no emoji, no icons, yellow only on grey. Built by scripts/ds.py. */
.ds{--ds-gap:var(--s5)}
.ds section{padding-block:var(--s4) var(--s2)}
.ds .k{font:700 15px/1.2 var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:0 0 var(--s2)}
.ds .lede{font-size:20px;line-height:1.45;max-width:var(--measure);margin:var(--s3) 0 0}
.ds .answer{background:var(--white);border:0;border-left:4px solid var(--red);border-radius:var(--r-card);padding:var(--s4) var(--s5);max-width:var(--measure);font-size:18px;line-height:1.5}
.ds .answer b{color:var(--ink)}
.ds .asof,.ds .src{font-size:14px;color:var(--muted)}
/* FactTile */
.ds .facts{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:var(--s4) 0;padding:0;list-style:none}
.ds .fact{background:var(--white);border-radius:var(--r-card);padding:var(--s4);transition:transform .18s,box-shadow .18s;min-width:0}
.ds .fact:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.ds .fact b{display:block;font:800 36px/1 var(--font-display);color:var(--red);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ds .fact span{display:block;font-size:14px;color:var(--muted);margin-top:var(--s1)}
.ds .fact.wide b{font-size:26px}
/* Chip */
.ds .chips{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.ds .chips li{border:1px solid var(--line);border-radius:var(--r-chip);padding:var(--s1) var(--s3);font-size:14px;font-weight:600;background:var(--white);color:var(--ink)}
/* Verdict */
.ds .verdict{background:var(--paper);border-radius:var(--r-card);padding:var(--s3) var(--s4);font-size:16px;max-width:var(--measure);margin:var(--s3) 0}
.ds section>.verdict,.ds>.verdict{background:var(--white)}
.ds .verdict b:first-child{display:block;font:800 18px var(--font-display);text-transform:uppercase;color:var(--red)}
/* Button */
.ds .btns{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin:var(--s4) 0 0}
.ds .btn{display:inline-block;background:var(--red);color:var(--white)!important;font:800 18px/1 var(--font-display);text-transform:uppercase;letter-spacing:.04em;padding:var(--s3) var(--s5);border-radius:var(--r-chip);text-decoration:none!important;border:2px solid var(--red);cursor:pointer}
.ds .btn:hover{background:var(--red-dark);border-color:var(--red-dark)}
.ds .btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--ink)}.ds .btn.ghost:hover{background:var(--ink);color:var(--white)!important}
.ds .btn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.ds a.book{background:none;color:var(--red-dark);font:700 14px var(--font-body);padding:0;border-radius:0;text-decoration:none;white-space:nowrap}
.ds a.book::after{content:" \2192"}.ds a.book:hover{text-decoration:underline}
/* FitBoxes */
.ds .fit{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:var(--s3) 0}
.ds .fit>div{border-radius:var(--r-card);padding:var(--s4)}.ds .fit .y{background:var(--good-tint)}.ds .fit .n{background:var(--red-tint)}
.ds .fit b{display:block;font:800 18px var(--font-display);text-transform:uppercase}.ds .fit .y b{color:var(--good)}.ds .fit .n b{color:var(--red-dark)}
.ds .fit ul{margin:var(--s2) 0 0;padding-left:18px}.ds .fit li{margin:2px 0}
/* adults-only / warning note = the red-tint "skip it if" box */
.ds .note{background:var(--red-tint);border:0;border-radius:var(--r-card);padding:var(--s3) var(--s4);margin:var(--s3) 0;max-width:var(--measure)}
.ds .note b:first-child{color:var(--red-dark);font:800 18px var(--font-display);text-transform:uppercase;margin-right:var(--s1)}
.ds .tag18{display:inline-block;background:var(--red);color:var(--white);font:800 16px/1 var(--font-display);padding:6px 10px;border-radius:var(--r-chip);margin-left:var(--s2);vertical-align:middle;letter-spacing:.04em}
/* TableCard */
.ds .tbl{background:var(--white);border:0;border-radius:var(--r-card);overflow-x:auto;box-shadow:0 1px 0 var(--line);margin:var(--s3) 0}
.ds .tbl table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px}
.ds .tbl th{background:var(--grey);color:var(--white);font:700 13px var(--font-body);text-transform:uppercase;letter-spacing:.05em;padding:11px var(--s3);text-align:left;border:0;white-space:nowrap}
.ds .tbl th.n,.ds .tbl td.n,html:root:not(#_) .ds .tbl thead th.n{text-align:right;font-variant-numeric:tabular-nums}
.ds .tbl td{padding:11px var(--s3);border-bottom:1px solid var(--line);background:transparent}
.ds .tbl tr:nth-child(even) td{background:var(--paper-soft)}.ds .tbl tr:hover td{background:var(--red-tint)}
.ds .tbl tr.hl td{background:var(--yellow-tint);font-weight:700}
.ds .tbl small,.ds .tbl .ty{color:var(--muted)}
/* cards (on paper) and the grey panel of cards (weather .fcl pattern) */
.ds .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3)}
.ds .card{display:block;background:var(--white);border:0;border-radius:var(--r-card);padding:var(--s4);text-decoration:none!important;color:var(--ink)!important;transition:transform .18s,box-shadow .18s}
.ds .card:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.ds .card h3{margin:0 0 var(--s1);font:800 21px/1.05 var(--font-display);text-transform:uppercase;color:var(--ink)}
.ds .card p{margin:0;color:var(--muted);font-size:15px}
.ds .panel.grey{background:var(--grey);color:var(--white);border-radius:var(--r-panel);padding:var(--s6);margin:var(--s4) 0}
.ds .panel.grey .k{color:var(--yellow)}.ds .panel.grey h2{color:var(--white)!important;margin:0 0 var(--s4)}
.ds .panel.grey p,.ds .panel.grey li{color:var(--on-grey)}.ds .panel.grey a:not(.card):not(.btn){color:var(--white)!important}
.ds .panel.grey .card{background:var(--grey-2);color:var(--white)!important}
.ds .panel.grey .card h3{color:var(--white)}.ds .panel.grey .card p{color:var(--on-grey)}
/* Photo */
.ds .photo{margin:0;border-radius:var(--r-img);overflow:hidden;background:var(--white)}
.ds .photo img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover}
.ds .photo figcaption{padding:var(--s3) var(--s4);font-size:14px;line-height:1.35;color:var(--muted)}
.ds .photo figcaption b{display:block;font:800 18px var(--font-display);text-transform:uppercase;color:var(--ink)}
/* Hotel-guide template header card (detail pages): kicker, name, lede, Verdict, Chips, buttons, one photo on the right */
.ds-hd{background:var(--white);border-radius:var(--r-panel);padding:var(--s6);display:grid;gap:var(--s5);grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;margin:var(--s3) 0 var(--s2)}
.ds-hd.solo{grid-template-columns:minmax(0,1fr)}
.ds-hd h1{margin:var(--s1) 0 0}
.ds-hd .lede{margin-top:var(--s3)}
.ds-hd .verdict{background:var(--paper)}
.ds-hd .photo{background:var(--paper)}.ds-hd .photo img{max-height:360px}
html:root:not(#_) header.page .ds-hd .kick{margin-top:0}
/* Section-page hero (hub pages): full-width captioned photo */
.ds-hero{margin:var(--s3) 0 var(--s2);border-radius:var(--r-img);overflow:hidden;background:var(--white)}
.ds-hero img{display:block;width:100%;height:clamp(200px,34vw,420px);object-fit:cover}
.ds-hero figcaption{padding:var(--s3) var(--s4);font-size:14px;line-height:1.35;color:var(--muted)}
.ds-hero figcaption b{display:block;font:800 18px var(--font-display);text-transform:uppercase;color:var(--ink)}
.ds-credit{font-size:13px;color:var(--muted);margin:var(--s2) 0 0}
/* DS: card and caption titles are uppercase (skin.css sets main h3 to none site-wide, so match its specificity here) */
html:root:not(#_) .ds .card h3,html:root:not(#_) .ds .mp-areas h3,html:root:not(#_) .ds .faq h3{text-transform:uppercase}
.ds .lede+.k,.ds .lede+section{margin-top:var(--s5)}
/* small page bits kept from the builders, restyled */
.ds .faq h3,.ds .pk-faq dt{font:800 21px/1.1 var(--font-display);text-transform:uppercase;margin:var(--s5) 0 var(--s1);color:var(--ink)}
.ds .faq p,.ds .pk-faq dd{margin:0;max-width:var(--measure)}
.ds .pk-faq{margin:0}
.ds .sheila{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3) var(--s4);margin:var(--s4) 0}
.ds .sheila a{color:var(--red-dark);font-weight:700}
.ds .flist{margin:0;padding:0;list-style:none;background:var(--white);border-radius:var(--r-card)}
.ds .flist li{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}.ds .flist li:last-child{border-bottom:0}
.ds .flist b{display:inline-block;min-width:9em;font:800 17px var(--font-display);text-transform:uppercase}
.ds .est{display:inline-block;font:700 13px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-chip);padding:2px var(--s2);background:var(--white)}
.ds .nights span{background:var(--white);border-radius:var(--r-chip)}
.ds .mp-areas article{background:var(--white);border:0;border-radius:var(--r-card);padding:var(--s4)}
.ds .mp-areas h3{font:800 21px/1.05 var(--font-display);text-transform:uppercase}
.ds .mp-map,.ds .mp-loc,.ds .mp-3d,.ds .fl-map{border:0;border-radius:var(--r-card);overflow:hidden}
.ds .fl-list{background:var(--white);border-radius:var(--r-card);padding:var(--s4) var(--s4) var(--s4) var(--s6)}
@media (max-width:760px){
 .ds-hd{grid-template-columns:minmax(0,1fr);padding:var(--s4)}
 .ds-hd .ds-hd-p{order:-1}
 .ds .panel.grey{padding:var(--s5) var(--s4)}
 .ds .fact b{font-size:30px}.ds .fact.wide b{font-size:22px}
 .ds .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ds .lede{font-size:18px}
 .ds .flist b{display:block}
 .ds .tbl table{font-size:14.5px}
}