/* Hotel batch: layout + typography + HD sprites, 13 Sep 2026 */
.batch-thumb{display:block;width:100%;height:100%;background-color:var(--ink);background-image:url('/assets/hotels/batch-sprite.jpg?v=3.0');background-repeat:no-repeat;background-size:600% 500%;transition:transform 320ms ease,filter 180ms ease;}
.batch-thumb.batch-thumb-13{background-image:url('/assets/hotels/batch-sprite-2026-09-13.jpg?v=2.0');background-size:500% 900%;}
.hotel-choice-card:hover .batch-thumb{transform:scale(1.025);filter:brightness(.96);}

/* Stay hub: intro above the grid, then ten bases on two compact rows. */
.practical-title-above{min-height:0;padding:0 0 30px;border:0;max-width:760px;}
.practical-title-above h2{max-width:16ch;margin:0;font-size:clamp(34px,3.8vw,52px);line-height:1.02;}
.practical-title-above p{max-width:620px;margin:14px 0 0;color:rgba(255,255,255,.82);font-size:14px;line-height:1.6;}
@media (min-width:981px){
  .practical-grid-ten{grid-template-columns:repeat(5,minmax(0,1fr));}
  .practical-grid-ten .practical-link{min-height:180px;padding:22px;}
  .practical-grid-ten .practical-link h3{font-size:22px;}
}

/* Destination pages: editorial hierarchy without a second oversized hero. */
.v3-section.hotel-chooser{padding-top:clamp(44px,4.5vw,64px);padding-bottom:clamp(40px,4vw,56px);}
.chooser-intro{margin-bottom:26px;}
/* The style and budget choosers are navigation aids, not section titles:
   a compact heading on a wider column, and tiles sized to their content. */
.chooser-intro h2{max-width:none;font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.03em;}
@media (min-width:761px){
  .hotel-chooser .chooser-intro{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:clamp(28px,4vw,56px);}
}
.style-nav strong{font-size:24px;}
/* The tiles jump to the sections below the chooser: the arrow says so. */
.hotel-chooser .style-nav a{position:relative;min-height:0;padding:18px 44px 18px 20px;}
.hotel-chooser .style-nav a::after{content:"↓";position:absolute;top:17px;right:18px;color:var(--coral);font-size:15px;line-height:1;}
.hotel-chooser .style-nav strong{margin-top:10px;}
/* Stay Nice — price legend: three relative price bands, for information
   only (no links, no button look), on one compact ruled line. */
.price-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.price-legend-item{padding:14px 20px 14px 0;}
.price-legend-item+.price-legend-item{padding-left:20px;border-left:1px solid var(--line);}
.price-legend-item span{margin-right:8px;color:var(--coral);font-family:var(--serif);font-size:15px;font-style:italic;}
.price-legend-item strong{color:var(--ink);font-family:var(--serif);font-size:19px;font-weight:500;}
.price-legend-item small{display:block;margin-top:5px;color:var(--ink-soft);font-size:12px;line-height:1.5;}
@media (max-width:760px){
  .price-legend{grid-template-columns:1fr;}
  .price-legend-item,.price-legend-item+.price-legend-item{padding:12px 0;border-left:0;}
  .price-legend-item+.price-legend-item{border-top:1px solid var(--line);}
}
.hotel-style-section{padding:clamp(52px,6vw,78px) 0;}
.hotel-style-heading{margin-bottom:34px;}
.hotel-style-heading h2{max-width:21ch;font-size:clamp(28px,3vw,42px);line-height:1.08;letter-spacing:-.035em;}

@media (max-width:980px){
  .practical-title-above{padding-bottom:24px;max-width:680px;}
}
@media (max-width:760px){
  .practical-title-above h2{font-size:34px;}
  .practical-grid-ten .practical-link{min-height:150px;}
  .chooser-intro h2{font-size:26px;}
  .hotel-style-heading h2{font-size:32px;}
  .hotel-chooser .style-nav a{align-items:flex-start;}
}


.hotel-choice-tags .hotel-price-band,.hotel-choice-copy>.hotel-price-band{font-weight:800;letter-spacing:.08em;color:#17365f;background:#f4ead8;border:1px solid rgba(23,54,95,.14);border-radius:999px;padding:3px 8px}
/* Nice hotel hub: area picker (Step 1 · Choose the area), October 2026 */
.area-picker .ap-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:28px}
.area-picker h2{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,42px);line-height:1.06;letter-spacing:-.03em;color:var(--ink)}
.area-picker .ap-head>p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.7}
.area-picker .ap-map{max-width:560px;margin:0 auto 32px;background:var(--white);border:1px solid var(--line);overflow:hidden}
.area-picker .ap-map svg{width:100%;height:auto;display:block}
.area-picker .ap-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,56px);border-top:1px solid rgba(21,58,101,.18)}
.area-picker .ap-item{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid rgba(21,58,101,.18)}
.area-picker .ap-num{font-family:var(--serif);font-size:38px;font-weight:300;line-height:1;color:var(--ink)}
.area-picker h3{margin:2px 0 6px;font-family:var(--serif);font-size:24px;font-weight:500;color:var(--ink)}
.area-picker .ap-best{margin:0 0 8px;color:var(--ink);font-size:15px;line-height:1.5}
.area-picker .ap-pm{display:flex;gap:10px;margin:0;color:var(--ink-soft);font-size:14px;line-height:1.6}
.area-picker .ap-pm span{flex:0 0 12px;opacity:.7}
.area-picker .ap-picks{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.area-picker .ap-picks span{display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.area-picker .ap-picks a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(21,58,101,.35)}
.area-picker .ap-verdict{margin-top:36px;padding:24px 28px;background:#E8EFF0;color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:center}
.area-picker .ap-verdict .eyebrow{margin-bottom:8px;color:var(--coral)}
.area-picker .ap-verdict strong{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.15;letter-spacing:-.02em}
.area-picker .ap-verdict p{margin:8px 0 0;color:var(--ink-soft);font-size:14px;line-height:1.6}
.area-picker .ap-actions{display:flex;flex-direction:column;gap:10px}
@media (max-width:820px){
.area-picker .ap-head,.area-picker .ap-list,.area-picker .ap-verdict{grid-template-columns:1fr}
.area-picker .ap-map{margin:0 0 24px}
.area-picker .ap-item{grid-template-columns:44px 1fr}.area-picker .ap-num{font-size:30px}
}