/*
 * Near Me landing pages — /trucker-path-app/{slug}
 *
 * Surface Contract: docs/near-me-pages.md.
 *
 * SCOPE. Everything here is nested under `.tp-nearme-page` so a loaded sheet
 * cannot restyle Locations, Services or Blog — the same containment rule the
 * Ranking CSS follows (AGENTS.md). The wrapper is a boundary, not a licence
 * for a second palette or type scale.
 *
 * TOKENS, NEVER HEX. Every colour below is a --tpl-* variable published by
 * /assets/locations/locations.css, which the layout loads first. Adding a hex
 * value here is the thing the Foundation rules exist to prevent: a page-local
 * brand colour drifts silently and nothing catches it.
 *
 * WHY IT LIVES UNDER /assets/locations/. Not an ownership claim — it is the
 * one asset prefix CloudFront already routes to the Laravel origin (verified
 * 2026-10-22). A /assets/nearme/ prefix would owe a second CDN behavior.
 *
 * WHAT IS NOT HERE. Buttons, links, icons, form controls and the content rail
 * come from the shared Foundation (.tp-site-button, .tp-site-link,
 * .tp-site-field/.tp-site-input, .tp-site-container). This sheet only composes.
 */

.tp-nearme-page {
  color: var(--tpl-ink);
  background: var(--tpl-white);
}

/* Section rhythm. One spacing scale for the family; sections differ by surface,
   not by inventing their own padding. */
.tp-nearme-page > section {
  padding-block: 64px;
}

.tp-nearme-page > section + section {
  border-top: 0;
}

/* ---------------------------------------------------------------- Hero --- */

/* The one dark surface in the shell. The Framer pages paint it #0b1421, which
   is not a Foundation token; --tpl-ink-deep is the named role for a continuous
   dark canvas and is what the shared Footer already uses. If a future visual
   acceptance insists the two differ, the answer is a reviewed token, not a hex
   value in this file (docs/design-system.md section 3.2). */
.tp-nearme-hero {
  background: var(--tpl-ink-deep);
  color: var(--tpl-white);
}

/* The Site Chrome header and announcement are position: fixed, so the first
   section owes their height on top of the family rhythm — otherwise the eyebrow
   and the top of the H1 sit underneath them. Same offset the Locations,
   Services and Fleet surfaces add. Higher specificity than the section rule. */
.tp-nearme-page > section.tp-nearme-hero {
  padding-top: calc(64px + var(--tp-site-announcement-height) + var(--tp-site-header-height));
}

/* Photo hero: the page's picture under a scrim of the same surface token, dark
   where the copy sits and opening up toward the picture side. */
.tp-nearme-hero--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.tp-nearme-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2; /* under the ::before scrim, which comes first in paint order */
}

.tp-nearme-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.tp-nearme-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    var(--tpl-ink-deep) 0%,
    color-mix(in srgb, var(--tpl-ink-deep) 88%, transparent) 38%,
    color-mix(in srgb, var(--tpl-ink-deep) 15%, transparent) 75%);
}

.tp-nearme-hero__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.tp-nearme-hero__copy {
  flex: 1 1 420px;
  min-width: 0;
}

.tp-nearme-hero__media {
  flex: 1 1 380px;
  min-width: 0;
}

.tp-nearme-hero__media img {
  max-width: 100%;
  height: auto;
}

.tp-nearme-hero__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--tpl-blue-bright);
  text-decoration: none;
}

.tp-nearme-hero__eyebrow:hover,
.tp-nearme-hero__eyebrow:focus-visible {
  text-decoration: underline;
}

/* Headings on the dark surface stay plain white. The gradient treatment is a
   named, opt-in component input and is not available to this family. */
.tp-nearme-hero__title {
  margin: 0 0 16px;
  color: var(--tpl-white);
  text-wrap: balance;
}

.tp-nearme-hero__intro {
  margin: 0 0 20px;
  color: var(--tpl-white);
  max-width: 62ch;
  text-wrap: pretty;
}

.tp-nearme-hero__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  color: var(--tpl-white);
}

.tp-nearme-hero__fleet {
  margin: 16px 0 0;
  color: var(--tpl-white);
}

.tp-nearme-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
}

.tp-nearme-badges__item {
  display: inline-flex;
}

/* ----------------------------------------------------------------- SMS --- */

.tp-nearme-sms {
  max-width: 420px;
  padding: 20px;
  border-radius: 10px;
  background: var(--tpl-white);
  color: var(--tpl-ink);
}

.tp-nearme-sms__title {
  margin: 0 0 12px;
}

.tp-nearme-sms__field {
  margin-bottom: 12px;
}

.tp-nearme-sms__status {
  margin: 12px 0 0;
  min-height: 1.25em; /* reserve the line so a message does not shift the form */
  color: var(--tpl-ink-muted);
}

.tp-nearme-sms__status[data-state="failed"],
.tp-nearme-sms__status[data-state="invalid"] {
  color: var(--tpl-warn);
}

.tp-nearme-sms__status[data-state="sent"],
.tp-nearme-sms__status[data-state="accepted"] {
  color: var(--tpl-go);
}

/* Visible, not a surprise at submit: until the per-page code_type is supplied
   the form explains itself by being plainly inert. */
.tp-nearme-sms.is-unconfigured {
  opacity: 0.6;
}

/* ------------------------------------------------------------- Content --- */

.tp-nearme-features {
  background: var(--tpl-surface-alt);
}

.tp-nearme-features__title,
.tp-nearme-all__title,
.tp-nearme-community__title,
.tp-nearme-faq__title,
.tp-nearme-states__title {
  margin: 0 0 12px;
  text-wrap: balance;
}

.tp-nearme-features__intro,
.tp-nearme-all__intro {
  margin: 0 0 32px;
  color: var(--tpl-ink-muted);
  max-width: 62ch;
}

.tp-nearme-features__grid,
.tp-nearme-amenities__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-nearme-amenities__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-nearme-card {
  padding: 20px;
  border-radius: 10px;
  background: var(--tpl-white);
  border: 1px solid var(--tpl-line-soft);
}

/* Feature item title is its own named role: a compact 18/600, not Heading 3,
   even though the DOM element is an h3 (docs/design-system.md section 3.4). */
.tp-nearme-card__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.tp-nearme-card__text {
  margin: 0;
  color: var(--tpl-ink-muted);
}

.tp-nearme-community {
  background: var(--tpl-surface-dark);
  color: var(--tpl-white);
}

.tp-nearme-community__title,
.tp-nearme-community__text {
  color: var(--tpl-white);
}

.tp-nearme-community__text {
  margin: 0;
  max-width: 62ch;
}

/* ----------------------------------------------------------------- FAQ --- */

.tp-nearme-faq__list {
  margin: 24px 0 0;
}

.tp-nearme-faq__item + .tp-nearme-faq__item {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--tpl-line-soft);
}

.tp-nearme-faq__question {
  font-weight: 600;
  margin: 0 0 6px;
}

.tp-nearme-faq__answer {
  margin: 0;
  color: var(--tpl-ink-muted);
  max-width: 72ch;
}

.tp-nearme-faq__contact {
  margin: 28px 0 0;
  color: var(--tpl-ink-muted);
}

/* ------------------------------------------------- Cross-links & states --- */

.tp-nearme-all__grid,
.tp-nearme-states__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.tp-nearme-states {
  background: var(--tpl-surface-alt);
}

.tp-nearme-states__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.tp-nearme-all__link,
.tp-nearme-states__link {
  color: var(--tpl-blue);
  text-decoration: none;
}

.tp-nearme-all__link:hover,
.tp-nearme-all__link:focus-visible,
.tp-nearme-states__link:hover,
.tp-nearme-states__link:focus-visible {
  color: var(--tpl-blue-strong);
  text-decoration: underline;
}

/* --------------------------------------------------------- Responsive --- */

/* Family tiers follow the site: tablet 810–1199, phone < 810
   (docs/design-system.md section 3.5). Columns collapse; type does not shrink. */
@media (max-width: 1199px) {
  .tp-nearme-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tp-nearme-states__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 809px) {
  .tp-nearme-page > section {
    padding-block: 44px;
  }

  .tp-nearme-hero__inner {
    gap: 28px;
  }

  .tp-nearme-features__grid,
  .tp-nearme-amenities__grid,
  .tp-nearme-all__grid {
    grid-template-columns: 1fr;
  }

  .tp-nearme-states__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tp-nearme-sms {
    max-width: none;
  }

  .tp-nearme-page > section.tp-nearme-hero {
    padding-top: calc(44px + var(--tp-site-announcement-height) + var(--tp-site-header-height));
  }

  /* On a phone the copy covers the whole picture, so the scrim does too. */
  .tp-nearme-hero--photo::before {
    background: color-mix(in srgb, var(--tpl-ink-deep) 72%, transparent);
  }
}