/* themes/alder/css/alder-clinics.css
   Alder /clinics (themes/alder/clinics.tpl.php). Rides on alder-pages.css
   (finder band, pager, empty state) and alder-hubs.css (head band); adds the
   two-field finder, the practice tile grid, the match tile and the "Meet the
   Teams" rail. Mobile first; the one breakpoint is 921px. Scoped to
   .al-pg--clinics. */

/* Head band sits on the finder band, one paper panel */
.al-pg--clinics .al-hubhead { padding-bottom: 0; }

/* Finder: practice name and city are both real fields on a phone too
   (the city is this page's main filter), so the location half shows at
   every width. On a phone the two fields split the pill evenly; min-width 0
   keeps the city input's intrinsic width from starving the name field. */
.al-pg--clinics .al-finder__loc {
  display: flex; align-items: center; flex: 1 1 0; min-width: 0; height: 100%;
  padding-left: 12px; border-left: 1px solid var(--al-line);
}
.al-pg--clinics .al-finder__glyph { width: 22px; height: 22px; }
/* Two inputs' intrinsic widths would stretch an auto grid column past the
   phone; the column takes the band's width instead. */
.al-pg--clinics .al-findband__grid { grid-template-columns: minmax(0, 1fr); }
.al-clinics__clear { margin-left: 6px; color: var(--al-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Body */
.al-clinics { padding-block: 24px var(--al-rhythm); }
@media (min-width: 921px) {
  .al-pg--clinics .al-findband__grid { grid-template-columns: minmax(0, 1fr) 150px; }
  .al-pg--clinics .al-finder__loc { flex: 0 0 38%; padding-left: 14px; }
  .al-pg--clinics .al-finder__glyph { width: 26px; height: 26px; }
  .al-clinics { padding-top: 36px; }
}

/* Practice tiles: one column on a phone, two from 600, three at 921 */
.al-ptgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 600px) { .al-ptgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 921px) { .al-ptgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* Match tile: the sand panel of the /providers match row, tile shaped */
.al-mtile {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  min-width: 0; padding: 20px; border-radius: var(--al-r);
  background: var(--al-sand); color: var(--al-ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.al-mtile:focus-visible { outline: 2px solid var(--al-ink); outline-offset: 3px; }
.al-mtile__art { width: 96px; margin-bottom: 6px; }
.al-mtile__art svg { display: block; width: 100%; height: auto; }
.al-mtile__kick { font: italic 400 15px/1.2 var(--al-serif); color: var(--al-muted); }
.al-mtile__h { font: 700 22px/1.15 var(--al-display); letter-spacing: -.02em; }
.al-mtile__p { font: 400 14.5px/1.55 var(--al-sans); color: var(--al-body); }
.al-mtile__go {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 44px; margin-top: auto; padding: 0 20px;
  border-radius: 999px; background: var(--al-pill); color: #fff;
  font: 600 14px/1 var(--al-sans);
}
.al-mtile__go .al-ico { width: 16px; height: 16px; }
.al-mtile__p + .al-mtile__go { margin-top: 10px; }
@media (hover: hover) { .al-mtile:hover .al-mtile__go { background: var(--al-moss); } }
@media (hover: none) { .al-mtile:active { scale: .98; } }

/* Logged-in provider with no practice: dismissible note above the grid */
.al-clinics__cta {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 20px; padding: 18px 12px 18px 20px;
  border-radius: var(--al-r); background: var(--al-paper);
}
.al-clinics__cta[hidden] { display: none; }
.al-clinics__ctabody { flex: 1 1 auto; min-width: 0; }
.al-clinics__ctah { font: 700 18px/1.25 var(--al-display); color: var(--al-ink); }
.al-clinics__ctabody p + p { margin-top: 4px; font-size: 15px; line-height: 1.55; }
.al-clinics__ctabody .al-pill { margin-top: 14px; }
.al-clinics__ctax { flex: none; width: 44px; height: 44px; }

/* Meet the Teams: one row that scrolls sideways (the profile rail recipe,
   [data-al-rail] in alder.js adds the mouse drag). .al-rail is also the
   profile's sticky side rail in alder-pages.css; every one of those
   properties is reset here. The row bleeds into the gutter on a phone so
   the cut-off card at the right edge says "more". */
.al-teams { padding-bottom: var(--al-rhythm); }
.al-teams__head { margin-bottom: 18px; }
.al-teams__h { font: 700 24px/1.2 var(--al-display); letter-spacing: -.015em; color: var(--al-ink); }
.al-teams__sub { margin-top: 4px; font-size: 15px; color: var(--al-muted); }
.al-pg--clinics .al-rail {
  position: static; top: auto; grid-column: auto; grid-row: auto; max-height: none;
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 16px; min-width: 0;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
  margin-inline: calc(var(--al-gutter) * -1); padding: 4px var(--al-gutter) 8px; scroll-padding-inline: var(--al-gutter);
}
.al-pg--clinics .al-rail::-webkit-scrollbar { display: none; }
.al-pg--clinics .al-rail > * { flex: none; width: min(78vw, 300px); scroll-snap-align: start; }
.al-pg--clinics .al-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.al-pg--clinics .al-rail.is-drag > * { pointer-events: none; }
.al-pg--clinics .al-rail img { -webkit-user-drag: none; user-select: none; }

/* Last card: "View all videos", a sand panel in the picture's place */
.al-vcard__all {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 18px 20px; background: var(--al-sand);
}
.al-vcard__allk { font: italic 400 14px/1.2 var(--al-serif); color: var(--al-muted); }
.al-vcard__allh { font: 700 20px/1.15 var(--al-display); letter-spacing: -.015em; color: var(--al-ink); }
.al-vcard__allp { font: 400 13.5px/1.45 var(--al-sans); color: var(--al-body); }
.al-vcard--all .al-vcard__row { min-height: 40px; }
.al-vcard--all .al-vcard__name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--al-sans); font-size: 15px; font-weight: 600; }
.al-vcard--all .al-vcard__name .al-ico { width: 16px; height: 16px; }

@media (min-width: 921px) {
  .al-teams__h { font-size: 28px; }
  .al-pg--clinics .al-rail { gap: 24px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .al-pg--clinics .al-rail > * { width: 300px; }
}