/* Single-destination cards keep their original accessible link and native link hit area. */
.rr-linked-card { position: relative; }
.rr-linked-card > .rr-card-hitbox { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.rr-linked-card:focus-within { outline: 2px solid var(--rr-card-highlight); outline-offset: 3px; }
@media (max-width: 1023px) {
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular { overflow: visible; margin-inline: 0; padding: 0; width: 100%; max-width: 100%; scroll-snap-type: none; }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular .service-rail__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: 100%; min-width: 0; padding: 0; }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular .service-tile { flex: none; width: auto; min-width: 0; max-width: none; min-height: 0; aspect-ratio: auto; padding: 1rem .75rem; scroll-snap-align: none; }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular .service-tile__title { font-size: clamp(1rem, 4.5vw, 1.6rem); overflow-wrap: break-word; }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular .service-tile p.text-muted-foreground { font-size: .8rem; line-height: 1.5; }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular .service-tile p.text-accent { font-size: .8rem; }
}

/* Resolve the brand accent at the root, before red bands override local text colors.
   City mobile rails: one full card + 32% of the next (gap accounted for). */
:root {
  --rr-card-highlight: hsl(var(--accent));
  --rr-city-card-gap: 1rem;
  --rr-city-card-peek: 0.32;
  --rr-city-card-width: calc((100cqi - var(--rr-city-card-gap)) / (1 + var(--rr-city-card-peek)));
}
@media (hover: hover) and (pointer: fine) {
  .rr-linked-card:hover, a.service-tile:hover, .booking-card:hover {
    border-color: var(--rr-card-highlight);
    outline: 1px solid var(--rr-card-highlight);
    outline-offset: 0;
  }
}
.rr-linked-card:active, a.service-tile:active, .booking-card:active,
.rr-linked-card:focus-within, a.service-tile:focus-visible, .booking-card:focus-within {
  border-color: var(--rr-card-highlight);
  outline: 2px solid var(--rr-card-highlight);
  outline-offset: 2px;
}

.rr-linked-card > .rr-card-hitbox:focus { outline: none; }

/* Non-hub city services: three roomy columns, two rows, with horizontal scrolling. */
@media (max-width: 1023px) {
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding-bottom: 1rem; contain: inline-size layout paint; container-type: inline-size;
  }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular .service-rail__track {
    width: max-content; grid-template-columns: repeat(3, var(--rr-city-card-width)); grid-template-rows: repeat(2, auto); gap: var(--rr-city-card-gap);
  }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular .service-tile {
    padding: 1.25rem; scroll-snap-align: start;
  }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular .service-tile__title {
    font-size: 1.5rem;
  }
}

/* Each three-card city row scrolls independently. Hub and home rails stay as they are. */
@media (max-width: 1023px) {
  .city-service-row.service-rail--city-popular { overflow-x: auto; overflow-y: hidden; width: 100%; max-width: 100%; contain: inline-size layout paint; container-type: inline-size; scroll-snap-type: x proximity; padding-bottom: 1rem; }
  .city-service-row + .city-service-row { margin-top: 1rem; }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .city-service-row .service-rail__track { display: flex; grid-template-columns: none; grid-template-rows: none; width: max-content; gap: var(--rr-city-card-gap); }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .city-service-row .service-tile { flex: 0 0 var(--rr-city-card-width); width: var(--rr-city-card-width); scroll-snap-align: start; }
}

@media (min-width: 1024px) { .city-service-row + .city-service-row { margin-top: 1.25rem; } }

/* Four-service city sections stay on one swipeable row at phone/tablet widths. */
@media (max-width: 1023px) {
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular[data-city-service-count="4"] .service-rail__track {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    grid-template-rows: none;
    width: max-content;
    max-width: none;
  }
  body:not(.page-escondido-hub):not(.page-encinitas-hub) .service-rail--city-popular[data-city-service-count="4"] .service-tile {
    flex: 0 0 var(--rr-city-card-width);
    width: var(--rr-city-card-width);
  }
}

/* Six-service city hubs: one swipe rail below desktop; three columns/two rows on desktop. */
@media(max-width:1023px){
  body .city-service-rail--six.service-rail--city-popular[data-city-service-count="6"]{overflow-x:auto;overflow-y:hidden;margin-inline:0;padding-inline:0;padding-bottom:1rem;width:100%;max-width:100%;contain:inline-size layout paint;container-type:inline-size;scroll-snap-type:x proximity}
  body .city-service-rail--six.service-rail--city-popular[data-city-service-count="6"] .service-rail__track{display:flex;flex-wrap:nowrap;grid-template-columns:none;grid-template-rows:none;gap:var(--rr-city-card-gap);width:max-content;max-width:none;padding:0}
  body .city-service-rail--six.service-rail--city-popular[data-city-service-count="6"] .service-tile{flex:0 0 var(--rr-city-card-width);width:var(--rr-city-card-width);min-width:0;scroll-snap-align:start}
}
@media(min-width:1024px){
  body .city-service-rail--six.service-rail--city-popular[data-city-service-count="6"] .service-rail__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:1.25rem;width:100%;padding:0}
}