/* Our locations, option C (TEST build, 2 Nov 2026). Paul chose it from locations-mockups-INTERNAL.html.
   One full-width row per clinic (photo one side, details the other, alternating), Hambleton Pharmacy as a shorter row,
   and home visits in a section of their own. Photos fill the full height of their card, so there are no empty gaps:
   the card is exactly as tall as its words. */
#locations .lcc-near{display:flex;flex-direction:column;align-items:center;gap:8px;margin:-4px 0 30px}
#locations .lcc-near[hidden],#locations .lcc-near [hidden]{display:none}
#locations .lcc-note{font-size:.88rem;color:#6E5F52;text-align:center;max-width:56ch;line-height:1.5}
#locations .lcc-note b{color:#2A1F1A}

/* the cards */
#locations .lcc-row,#locations .lcc-strip,#locations .lcc-band{
  position:relative;display:grid;overflow:hidden;border-radius:28px;
  background:var(--sp-surface,linear-gradient(160deg,#FFFCF8 0%,#FCF8F3 42%,#F4ECE2 100%));
  border:1px solid rgba(201,162,91,.32);
  box-shadow:0 1px 2px rgba(74,50,32,.06),0 6px 16px -4px rgba(74,50,32,.10),inset 0 1px 0 rgba(255,255,255,.92)}
#locations .lcc-row{grid-template-columns:1.08fr 1fr;margin-bottom:26px}
#locations .lcc-row--flip{grid-template-columns:1fr 1.08fr}
#locations .lcc-row--flip .lcc-photo{order:2}
#locations .lcc-strip{grid-template-columns:minmax(240px,34%) 1fr}
#locations .lcc-band{grid-template-columns:1fr 1.06fr}

/* photos stretch to the card's height (no fixed height, so no gap above or below the words) */
#locations .lcc-photo{position:relative;display:block;overflow:hidden;background:#E9DDD0;min-height:220px}
#locations .lcc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
#locations .lcc-band .lcc-photo img{object-position:55% 22%}
#locations .lcc-photo picture{display:contents}

/* the words */
#locations .lcc-body{padding:clamp(24px,3vw,36px) clamp(24px,3.2vw,40px);min-width:0}
#locations .lcc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
#locations .lcc-tag{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8A6A2E;background:rgba(201,162,91,.16);border-radius:99px;padding:5px 12px;line-height:1.2}
#locations .lcc-tag--new{color:#4F6B45;background:rgba(110,150,95,.16)}
#locations .lcc-tag--today{color:#fff;background:linear-gradient(160deg,#D8B06A,#C9A25B)}
#locations .lcc-name{font-family:var(--serif,'Playfair Display',Georgia,serif);font-weight:600;font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.1;color:#2A1F1A;margin:0}
#locations .lcc-name a{color:inherit;text-decoration:none}
#locations .lcc-name a:hover{text-decoration:underline;text-decoration-color:rgba(201,162,91,.7);text-underline-offset:5px}
#locations .lcc-addr{font-size:.98rem;color:#6E5F52;margin:6px 0 0}
#locations .lcc-txt{font-size:1rem;line-height:1.65;color:#5C5048;margin:12px 0 0}
#locations .lcc-price{font-family:var(--serif,'Playfair Display',Georgia,serif);font-size:1.18rem;color:#2A1F1A;margin:14px 0 0}
#locations .lcc-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
#locations .lcc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border-radius:99px;
  font:600 .95rem/1.2 'Outfit',sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s,border-color .2s,box-shadow .25s}
#locations .lcc-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#locations .lcc-btn--go{color:#fff;border:0;background:linear-gradient(160deg,#5A3A74 0%,#482C5B 55%,#3A2349 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 4px rgba(53,34,75,.18),0 12px 24px -12px rgba(53,34,75,.55)}
#locations .lcc-btn--go:hover{background:linear-gradient(160deg,#654183 0%,#52316A 55%,#412855 100%)}
#locations .lcc-btn--alt{color:#482C5B;background:#fff;border:1.5px solid rgba(72,44,91,.4)}
#locations .lcc-btn--alt:hover{border-color:#482C5B;background:#FCF8F3}
#locations .lcc-btn:focus-visible,#locations .lcc-photo:focus-visible,#locations .lcc-name a:focus-visible{outline:2px solid #E6B85C;outline-offset:3px}

/* home visits: a section of its own */
#locations .lcc-home{margin-top:clamp(40px,5vw,60px)}
#locations .lcc-sub{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 24px;
  font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#8A6A2E}
#locations .lcc-sub::before,#locations .lcc-sub::after{content:'';width:48px;height:1px;background:rgba(201,162,91,.55)}
#locations .lcc-areas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
#locations .lcc-areas li{margin:0;font-size:.88rem;font-weight:600;color:#8A3E26;background:#fff;border:1px solid rgba(201,162,91,.5);border-radius:99px;padding:6px 13px}
#locations .lcc-areas a{color:inherit;text-decoration:underline;text-decoration-color:rgba(201,162,91,.7);text-underline-offset:3px}
#locations .lcc-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
#locations .lcc-facts p{margin:0;background:rgba(255,255,255,.7);border:1px solid rgba(201,162,91,.32);border-radius:16px;padding:12px 16px}
#locations .lcc-facts b{display:block;font-family:var(--serif,'Playfair Display',Georgia,serif);font-size:1.5rem;font-weight:600;color:#2A1F1A;line-height:1.1}
#locations .lcc-facts span{font-size:.88rem;color:#5C5048}

/* the place "Find the nearest to me" picked */
#locations .lcc-hit{outline:3px solid rgba(230,184,92,.9);outline-offset:4px}

/* pressable cards lift a little on hover (the site's rule); the home-visits section stays still */
#locations .lcc-row,#locations .lcc-strip{transition:opacity .8s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s cubic-bezier(.2,.7,.2,1),border-color .5s ease !important}
@media(hover:hover) and (pointer:fine){
  #locations .lcc-row:hover,#locations .lcc-strip:hover{transform:translateY(-3px) !important;border-color:rgba(201,162,91,.55);
    box-shadow:0 2px 4px rgba(74,50,32,.06),0 16px 34px -10px rgba(74,50,32,.20),inset 0 1px 0 rgba(255,255,255,.92)}
  #locations .lcc-row:hover .lcc-photo img,#locations .lcc-strip:hover .lcc-photo img{transform:scale(1.025)}
}

/* tablets: still side by side, a little tighter */
@media(min-width:641px) and (max-width:900px){
  #locations .lcc-row,#locations .lcc-row--flip,#locations .lcc-band{grid-template-columns:1fr 1fr}
  #locations .lcc-strip{grid-template-columns:38% 1fr}
  #locations .lcc-body{padding:22px 24px 24px}
}
/* phones: photo on top, words underneath */
@media(max-width:640px){
  #locations .lcc-row,#locations .lcc-row--flip,#locations .lcc-strip,#locations .lcc-band{grid-template-columns:1fr}
  #locations .lcc-row--flip .lcc-photo{order:0}
  #locations .lcc-photo{min-height:0;aspect-ratio:16/9}
  #locations .lcc-row{margin-bottom:18px}
}
@media(max-width:480px){
  #locations .lcc-row,#locations .lcc-strip,#locations .lcc-band{border-radius:22px}
  #locations .lcc-body{padding:20px 18px 22px}
  #locations .lcc-btns .lcc-btn{flex:1 1 auto}
  #locations .lcc-btns .lcc-btn--go{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  #locations .lcc-row,#locations .lcc-strip,#locations .lcc-photo img{transition:none !important}
  #locations .lcc-row:hover,#locations .lcc-strip:hover{transform:none !important}
}