/* Page CSS for the driving school directory. Uses the styles.css tokens
   ("Modernist" design system). Not part of the design system: only the layout
   specific to these screens lives here. */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav-lang {
  display: inline-flex;
  gap: 6px;
  font: 700 12px var(--font-body);
  letter-spacing: 0.04em;
}
.nav-lang a { color: var(--color-neutral-600); }
.nav-lang a[aria-current="page"] { color: var(--color-accent); }

.page-main {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  min-width: 0;
}

/* — sections — */
.section {
  padding: var(--space-6);
  border-bottom: 2px solid var(--color-divider);
}
.section-hero {
  padding: var(--space-8) var(--space-6) var(--space-6);
}
.kicker {
  font: 700 12px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 var(--space-2);
}
.hero-title {
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.05;
  margin: 0 0 var(--space-3);
  max-width: 18ch;
}
.hero-lead {
  font: 400 16px/1.5 var(--font-body);
  color: var(--color-neutral-700);
  margin: 0 0 var(--space-4);
  max-width: 60ch;
}
.section-title {
  font-size: 22px;
  margin: 0 0 var(--space-4);
}

/* Contact and opening hours sit side by side, stacking on a narrow screen. */
.section-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border-bottom: 2px solid var(--color-divider);
}
.section-split > .section {
  border-bottom: 0;
}
.section-split > .section + .section {
  border-left: 2px solid var(--color-divider);
}
@media (max-width: 640px) {
  .section-split > .section + .section {
    border-left: 0;
    border-top: 2px solid var(--color-divider);
  }
}

/* — search box — */
.searchbox {
  display: flex;
  gap: var(--space-2);
  max-width: 560px;
  border: 2px solid var(--color-text);
  padding: 4px;
}
.searchbox-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}
.searchbox-field svg { flex: none; color: var(--color-neutral-600); }
.searchbox input {
  border: none;
  outline: none;
  flex: 1;
  font: 400 15px var(--font-body);
  background: transparent;
  padding: 10px 0;
  color: var(--color-text);
}
.searchbox .btn { width: 110px; flex: none; }

/* — card grid — */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.school-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--color-text);
}
.school-card:hover { text-decoration: none; }
.school-card:hover .card-title { color: var(--color-accent); }
.school-card-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.initial-box {
  width: 48px;
  height: 48px;
  flex: none;
  background: var(--color-text);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 20px var(--font-heading);
}
.initial-box.lg { width: 64px; height: 64px; font-size: 26px; }
.tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* — detail page — */
.detail-crumbs {
  padding: var(--space-3) var(--space-6);
  font: 600 12px var(--font-body);
  color: var(--color-neutral-600);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.detail-crumbs .sep { color: var(--color-neutral-400); }
.detail-crumbs .current { color: var(--color-text); }
.detail-header {
  padding: 0 var(--space-6) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}
.detail-header-main {
  max-width: 640px;
  display: flex;
  gap: var(--space-4);
}
.detail-title {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.1;
  margin: 0 0 var(--space-2);
}
.detail-address {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font: 400 14px var(--font-body);
  color: var(--color-neutral-700);
  margin: var(--space-2) 0 0;
}
.detail-address svg { flex: none; margin-top: 2px; }
.detail-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 220px;
}
.detail-aside .btn { width: 220px; }
.detail-hours { margin: 0; font: 400 13px var(--font-body); color: var(--color-neutral-700); max-width: 420px; }
.detail-hours th { width: 45%; white-space: nowrap; }
.detail-hours td { text-align: right; font-variant-numeric: tabular-nums; }
/* Today's row is the one people came for, so it carries the accent. */
.detail-hours .today th,
.detail-hours .today td { color: var(--color-accent); font-weight: 600; }

.info-dl { margin: 0; display: grid; gap: var(--space-3); }
.info-dl > div { border-bottom: 1px solid var(--color-neutral-300); padding-bottom: var(--space-3); }
.info-dl dt {
  font: 700 11px var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin: 0 0 2px;
}
.info-dl dd { margin: 0; font: 400 15px var(--font-body); }

.map-frame {
  border: 2px solid var(--color-divider);
  line-height: 0;
}
.map-frame iframe { border: 0; width: 100%; display: block; }

.body-text {
  font: 400 15px/1.6 var(--font-body);
  color: var(--color-neutral-700);
  margin: 0;
}

/* — stats (state) — */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  border-top: 2px solid var(--color-divider);
  padding-top: var(--space-4);
  max-width: 640px;
}
.stat-num { margin: 0; font: 800 26px var(--font-heading); }
.stat-label {
  margin: 0;
  font: 600 11px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-600);
}

/* — link grid (cities) — */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.link-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  border-bottom: 2px solid var(--color-divider);
  padding-bottom: var(--space-2);
  color: var(--color-text);
  font: 700 15px var(--font-body);
}
.link-row:hover { text-decoration: none; color: var(--color-accent); }
.link-row-meta { font: 400 12px var(--font-body); color: var(--color-neutral-600); }

/* — FAQ — */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 80ch; }
.faq-item { border-bottom: 1px solid var(--color-neutral-300); padding-bottom: var(--space-3); }
.faq-item h3 { margin: 0 0 4px; font: 700 15px var(--font-body); }

/* — footer — */
.site-footer {
  padding: var(--space-6);
  border-top: 2px solid var(--color-divider);
  background: var(--color-neutral-100);
  font: 400 12px/1.6 var(--font-body);
  color: var(--color-neutral-600);
}
.site-footer a { font-weight: 600; }
.footer-links { margin-bottom: var(--space-4); }
.footer-links h2 { font: 700 16px var(--font-heading); margin: 0 0 var(--space-3); }
.footer-links-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer-links-row a { font: 600 13px var(--font-body); }
.footer-legal { margin: 0; }

/* — contact — */
.contact-form { display: grid; gap: var(--space-3); max-width: 560px; }
.contact-form .btn { justify-self: start; }
.contact-error { margin: 4px 0 0; font-size: 12px; color: var(--color-accent-700); }
.contact-status {
  max-width: 560px; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md);
}
.contact-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* — banners — */
.banner-slot { z-index: 20; }
.banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-neutral-200);
  border: 1px dashed var(--color-neutral-400);
  font: 700 10px var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

.banner-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.banner-link picture { display: contents; }
.banner-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Skyscrapers sit in the gutters beside the 1040px column, just below the
   nav, and scroll away with the page. Below 1440px there is no gutter wide
   enough, so they are hidden rather than overlapping the content. */
.banner-slot--sidebar_left,
.banner-slot--sidebar_right {
  position: absolute;
  top: 72px;
  width: 160px;
  height: 600px;
}
.banner-slot--sidebar_left { left: calc(50% - 520px - 160px - var(--space-6)); }
.banner-slot--sidebar_right { right: calc(50% - 520px - 160px - var(--space-6)); }
@media (max-width: 1439px) {
  .banner-slot--sidebar_left,
  .banner-slot--sidebar_right { display: none; }
}

.banner-slot--sticky_footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106px;
  padding: var(--space-2);
  display: flex;
  justify-content: center;
  background: var(--color-bg);
  border-top: 2px solid var(--color-divider);
}
.banner-slot--sticky_footer .banner-placeholder { max-width: 728px; }
/* Reserve the bar's height so it never covers the end of the page. */
.has-sticky-banner { padding-bottom: 106px; }
@media (max-width: 640px) {
  .banner-slot--sticky_footer { height: 66px; }
  .banner-slot--sticky_footer .banner-placeholder { max-width: 320px; }
  .has-sticky-banner { padding-bottom: 66px; }
}

/* — Laravel pagination — */
.page-main nav[role="navigation"] { margin-top: var(--space-6); }
.page-main .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  font: 600 13px var(--font-body);
}
.page-main .pagination a,
.page-main .pagination span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  text-decoration: none;
}
.page-main .pagination .active span {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.page-main .pagination .disabled span { opacity: 0.4; }

.empty-note {
  font: 400 15px var(--font-body);
  color: var(--color-neutral-600);
}

/* — rating — */
/* Two stacked copies of the same five glyphs: the accent-coloured one is
   clipped by width to the score, so partial stars need no extra assets. */
.rating {
  display: flex;
  align-items: center;
  /* The count names its source ("327 reviews on Google"), so it is long
     enough to need a second line inside a narrow card. */
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-1) 0 0;
  font: 400 13px var(--font-body);
  color: var(--color-neutral-600);
}
.rating-stars {
  position: relative;
  display: inline-block;
  flex: none;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--color-neutral-300);
}
/* The grey row stays in flow and sets the width; the accent row is painted
   over it (positioned beats static in paint order). */
.rating-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-accent);
}
.rating-value { font-weight: 700; color: var(--color-text); }
.rating-lg { font-size: 14px; margin-top: var(--space-2); }
.rating-lg .rating-stars { font-size: 18px; }

/* — category filter — */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.filter-row .tag { text-decoration: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .detail-header-main { flex-direction: column; gap: var(--space-3); }
  .detail-aside .btn,
  .detail-aside { width: 100%; }
}