/* ==========================================================================
 * BD4K CMS — Location pages: modern two-column layout + sidebar + button fix
 * Applied only to location pages (article[data-loc-page], set by location-pages.js).
 * Uses the site's own CSS variables so it matches the brand.
 * ========================================================================== */

/* ---- 1) FIX THE BUTTONS (.s-btn is used by hero/CTA blocks but was never
        styled anywhere in the site CSS, so buttons rendered as plain text) ---- */
.s-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:Fredoka,sans-serif;font-weight:600;font-size:15px;line-height:1;
  padding:14px 28px;border-radius:40px;border:none;cursor:pointer;text-decoration:none;
  background:var(--orange);color:#fff;box-shadow:0 14px 26px -10px #ff8a3dcc;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,filter .2s;
}
.s-btn:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 18px 30px -10px #ff8a3dcc}
.s-btn.lg{padding:16px 34px;font-size:16px}
.s-btn.light{background:#fff;color:var(--sky);box-shadow:0 14px 26px -12px rgba(45,42,110,.45)}
.s-btn.light:hover{color:var(--grape)}

/* ---- 2) TWO-COLUMN LAYOUT (no HTML block; blocks stay fully editable) ---- */
article[data-loc-page]{
  max-width:1200px;margin:26px auto;padding:0 24px 72px;
  display:grid;grid-template-columns:minmax(0,1fr) 330px;
  column-gap:44px;align-items:start;
}
/* hero spans full width as a rounded brand card */
article[data-loc-page] > .b-hero{
  grid-column:1 / -1;border-radius:var(--r);overflow:hidden;margin-bottom:8px;
  box-shadow:var(--shadow-sm);padding:64px 0;
}
/* all other blocks live in the main (left) column */
article[data-loc-page] > section:not(.b-hero){grid-column:1;padding:26px 0}
/* let block content fill the main column instead of its own centered max-width */
article[data-loc-page] > section:not(.b-hero) .s-wrap{max-width:none;padding:0}
/* soften rich text spacing for the narrower column */
article[data-loc-page] .b-rich h2{margin-bottom:10px}
article[data-loc-page] .b-rich h3{margin-top:20px}
article[data-loc-page] .b-image img{border-radius:var(--r);box-shadow:var(--shadow-sm)}
article[data-loc-page] > .b-cta{border-radius:var(--r);margin-top:14px}

/* ---- 3) STICKY SIDEBAR ---- */
.loc-side{
  grid-column:2;grid-row:2 / 9999;position:sticky;top:90px;align-self:start;
  display:flex;flex-direction:column;gap:20px;
}
.loc-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:22px;
}
.loc-card h3{
  font-family:Fredoka,sans-serif;font-size:16px;color:var(--navy);
  margin:0 0 14px;letter-spacing:.2px;
}

/* locations list with active tab */
.loc-locations ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.loc-locations a{
  display:flex;align-items:center;gap:9px;
  padding:10px 14px;border-radius:12px;text-decoration:none;
  font-family:Nunito,system-ui,sans-serif;font-weight:600;font-size:14.5px;
  color:var(--navy);transition:background .18s,color .18s,transform .18s;
}
.loc-locations a::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--line);flex:0 0 auto;transition:background .18s,transform .18s;
}
.loc-locations a:hover{background:var(--skybg);transform:translateX(2px)}
.loc-locations a:hover::before{background:var(--sky)}
.loc-locations a.active{
  background:linear-gradient(135deg,var(--sky),var(--grape));color:#fff;
  box-shadow:0 12px 22px -12px rgba(63,182,238,.9);
}
.loc-locations a.active::before{background:#fff;transform:scale(1.15)}

/* appointment CTA card */
.loc-appt{
  background:linear-gradient(150deg,var(--sky),var(--grape));color:#fff;border:none;
  text-align:center;overflow:hidden;position:relative;
}
.loc-appt h3{color:#fff;font-size:18px;margin-bottom:6px}
.loc-appt p{font-size:13.5px;opacity:.95;margin:0 0 16px;line-height:1.5}
.loc-btn{
  display:flex;justify-content:center;align-items:center;gap:8px;
  font-family:Fredoka,sans-serif;font-weight:600;font-size:14.5px;
  padding:12px 18px;border-radius:30px;text-decoration:none;transition:transform .2s,filter .2s;
}
.loc-btn:hover{transform:translateY(-2px)}
.loc-btn-primary{background:#fff;color:var(--grape);box-shadow:0 12px 22px -12px rgba(45,42,110,.5)}
.loc-btn-phone{
  margin-top:10px;background:rgba(255,255,255,.14);color:#fff;
  border:1.5px solid rgba(255,255,255,.5);
}
.loc-btn-phone:hover{background:rgba(255,255,255,.24)}

/* ---- 4) RESPONSIVE ---- */
@media (max-width:960px){
  article[data-loc-page]{grid-template-columns:1fr;column-gap:0}
  article[data-loc-page] > section:not(.b-hero){grid-column:1}
  .loc-side{grid-column:1;grid-row:auto;position:static;top:auto;
    flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:8px}
  .loc-side .loc-card{flex:1 1 260px}
}
@media (max-width:560px){
  article[data-loc-page]{margin:14px auto;padding:0 14px 48px}
  article[data-loc-page] > .b-hero{padding:44px 0}
  .loc-side{flex-direction:column}
}