/* ==========================================================================
   locations.css
   Styles for city / location landing pages (Fort Lauderdale, Brickell,
   Miami Shores, Vail, ...). Enqueued by functions.php only when
   stay_today_is_location_page() matches the current URL against the canonical
   list in inc/locations-data.php - the same list that renders the
   "Our Florida Locations" block. Adding a city there is all that is needed;
   no page outside that list can pick these styles up.

   Scope class: .st-loc  - wraps each content section on a location page.

   Shared components live in css/custom-overrides.css and are class-scoped,
   so they are safe site-wide:
     .st-card     dark content panel  (+ .st-card--noframe, .st-card--mb)
     .st-cmp      comparison table    (.st-val / .st-ico / .st-txt)
     .st-nblist   neighbourhood / feature card list
   Only location-page-specific rules belong here.
   ========================================================================== */

/* Section scope. Heading SIZES are deliberately not redefined - the theme
   sets those. Heading MARGINS are, because the site reads as a block system:
   the gap ABOVE a heading is roughly double the gap below it, so a heading
   visibly belongs to what follows rather than floating between two blocks. */
.st-loc{max-width:100%;margin:0;padding:0;color:#fff;}
.st-loc+.st-loc{margin-top:40px;}
.st-loc h2{margin:0 0 24px;}
.st-loc h3{margin:76px 0 24px;}
.st-loc>:first-child{margin-top:0;}
@media (max-width:900px){.st-loc h3{margin-top:60px;}}
@media (max-width:600px){.st-loc h2{margin-bottom:18px;}.st-loc h3{margin:48px 0 18px;}.st-loc+.st-loc{margin-top:28px;}}

/* Anchor landing offset: the header is fixed (98px), so #hash jumps
   would otherwise hide the heading behind it. */
.st-loc[id]{scroll-margin-top:120px;}

/* Comparison table column split. Only the two answer columns are pinned here;
   the criteria column width and every mobile value live in the .st-cmp
   component itself, so nothing here can out-specify its breakpoints. */
@media (min-width:821px){
  .st-loc .st-cmp thead th:nth-child(2),
  .st-loc .st-cmp thead th:nth-child(3){width:35%;}
}

/* Mobile page rhythm.
   Theme default is .page-content{gap:5rem} = 80px between every block, which on
   a phone reads as a black chasm around each block while the content inside
   sits almost glued together. Tightened on location pages only. */
@media (max-width:767px){
  .page-content{gap:3rem;}
}

/* ==========================================================================
   BLOCK: Platform badge cards (.stbdg)
   Airbnb / Booking.com / Houfy trust row.
   Desktop (>1023px): 3 vertical cards.
   Tablet + mobile (<=1023px): one column, compact horizontal cards
   (brand strip on the left, content on the right) so the row does not turn
   into a 3-storey tower on a phone.
   All brand colours are modifier classes - no inline styles.
   ========================================================================== */
.stbdg-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0;}
.stbdg-row>br{display:none;}          /* wpautop guards */
.stbdg-row>p{display:contents;margin:0;}

.stbdg-card{display:flex;flex-direction:column;min-width:0;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);text-decoration:none;color:#1c1917;font-family:inherit;transition:transform .25s ease,box-shadow .25s ease;}
a.stbdg-card:hover,a.stbdg-card:focus-visible{text-decoration:none;color:#1c1917;transform:translateY(-3px);box-shadow:0 26px 52px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.35);}
.stbdg-nolink{cursor:default;}

.stbdg-head{display:flex;align-items:center;justify-content:center;text-align:center;padding:20px 12px 16px;min-height:76px;}
.stbdg-head svg{width:40px;height:40px;fill:#fff;display:block;}
.stbdg-brand{font-size:27px;line-height:1;font-weight:700;letter-spacing:-.4px;color:#fff;}

.stbdg-body{display:flex;flex-direction:column;flex:1;min-width:0;padding:18px 20px 20px;}
.stbdg-eyebrow{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:7px;}
.stbdg-mid{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:13px;}
.stbdg-title{font-size:17px;line-height:1.3;font-weight:700;color:#1c1917;min-width:0;}
.stbdg-foot{display:block;margin-top:auto;padding-top:12px;font-size:12.5px;font-weight:600;}

/* Rating widgets */
.stbdg-score{flex:none;font-size:26px;line-height:1;font-weight:700;color:#e31952;white-space:nowrap;}
.stbdg-rate{flex:none;text-align:right;}
.stbdg-badge{display:block;background:#003580;color:#fff;border-radius:12px 12px 12px 2px;padding:6px 11px;font-size:19px;line-height:22px;font-weight:700;white-space:nowrap;}
.stbdg-badge small{font-size:12px;font-weight:600;color:#b9cbe4;}
.stbdg-badge-label{display:block;margin-top:5px;font-size:11.5px;line-height:14px;font-weight:700;color:#003580;white-space:nowrap;}
.stbdg-role{color:#e6197e;}
.stbdg-ava{position:relative;display:block;width:52px;height:52px;flex:none;}
.stbdg-ava img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff;}
.stbdg-ava i{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;box-sizing:border-box;border-radius:50%;background:#e6197e;border:2px solid #fff;display:flex;align-items:center;justify-content:center;}
.stbdg-ava i svg{width:12px;height:12px;display:block;fill:none;stroke:#fff;}

/* Brand modifiers */
.stbdg-card--airbnb{background:#fffdfc;}
.stbdg-card--airbnb .stbdg-head{background:linear-gradient(135deg,#FF385C 0%,#E61E4D 60%,#D70466 100%);}
.stbdg-card--airbnb .stbdg-eyebrow{color:#8c8279;}
.stbdg-card--airbnb .stbdg-foot{border-top:1px solid #f0ebe6;color:#E61E4D;}
.stbdg-card--booking{background:#fcfdff;}
.stbdg-card--booking .stbdg-head{background:linear-gradient(135deg,#0071c2 0%,#003580 60%,#00224f 100%);}
.stbdg-card--booking .stbdg-eyebrow{color:#6b7a90;}
.stbdg-card--booking .stbdg-foot{border-top:1px solid #e4eaf0;color:#0071c2;}
.stbdg-card--houfy{background:#fcfeff;}
.stbdg-card--houfy .stbdg-head{background:linear-gradient(135deg,#0aa6bf 0%,#00768c 60%,#005567 100%);}
.stbdg-card--houfy .stbdg-brand{letter-spacing:-.8px;font-size:30px;}
.stbdg-card--houfy .stbdg-eyebrow{color:#7b8b90;}
.stbdg-card--houfy .stbdg-foot{border-top:1px solid #e2eef1;color:#00768c;}

/* Tablet + mobile: compact horizontal card */
@media (max-width:1023px){
  /* Own margin kept minimal - the ACF block wrapper already supplies the
     outer vertical rhythm. Air goes between the cards, not around the row.
     grid-auto-rows:1fr forces all three cards to the same height, so the
     brand strips, titles and footers line up across the stack. */
  .stbdg-row{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:24px;margin:6px 0;}
  .stbdg-card{flex-direction:row;align-items:stretch;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.45);}
  a.stbdg-card:hover,a.stbdg-card:focus-visible{transform:none;box-shadow:0 10px 26px rgba(0,0,0,.45);}
  /* Hard-locked width: flex-basis alone is not enough, a long wordmark
     ("Booking.com") would push the strip wider than its neighbours. */
  .stbdg-head{flex:0 0 112px;width:112px;min-width:112px;max-width:112px;min-height:0;padding:12px 8px;overflow:hidden;}
  .stbdg-head svg{width:34px;height:34px;}
  .stbdg-brand{font-size:17px;letter-spacing:-.2px;white-space:nowrap;}
  .stbdg-card--booking .stbdg-brand{font-size:13px;letter-spacing:-.3px;}
  .stbdg-card--houfy .stbdg-brand{font-size:19px;}
  .stbdg-body{padding:18px 16px 18px;}
  .stbdg-eyebrow{font-size:9.5px;letter-spacing:.12em;margin-bottom:7px;}
  .stbdg-mid{min-height:0;margin-bottom:14px;gap:10px;}
  .stbdg-title{font-size:15.5px;}
  .stbdg-score{font-size:22px;}
  .stbdg-badge{font-size:16px;line-height:19px;padding:5px 9px;border-radius:10px 10px 10px 2px;}
  .stbdg-badge small{font-size:11px;}
  .stbdg-badge-label{font-size:10.5px;margin-top:3px;}
  .stbdg-foot{padding-top:13px;font-size:11.5px;}
  .stbdg-ava{width:44px;height:44px;}
  .stbdg-ava i{width:19px;height:19px;right:-2px;bottom:-2px;}
}

/* Small phones */
@media (max-width:400px){
  .stbdg-row{gap:20px;margin:4px 0;}
  .stbdg-head{flex:0 0 92px;width:92px;min-width:92px;max-width:92px;}
  .stbdg-head svg{width:30px;height:30px;}
  .stbdg-brand{font-size:15px;}
  .stbdg-card--booking .stbdg-brand{font-size:11.5px;}
  .stbdg-card--houfy .stbdg-brand{font-size:17px;}
  .stbdg-body{padding:16px 14px;}
  .stbdg-title{font-size:14.5px;}
  .stbdg-score{font-size:20px;}
  .stbdg-badge{font-size:15px;line-height:18px;padding:4px 8px;}
  .stbdg-ava{width:40px;height:40px;}
}
/* ===== /BLOCK: Platform badge cards ===== */