/* ============================================================
   Atlas Car Rental — Page-specific styles (fleet + vehicle detail)
   Builds on landing.css. Reuses the same design tokens & classes
   (.atlas-vcard, .atlas-btn, .atlas-chip, .atlas-empty, .atlas-badge…).
   Only adds what the landing didn't already cover.
   ============================================================ */

/* ----------------------------------------------------------------
   Compact page hero (navy band) — used by Fleet + Vehicle detail
   ---------------------------------------------------------------- */
.atlas-phero {
  position: relative;
  background: var(--racing-navy);
  color: #fff;
  overflow: hidden;
  padding-top: calc(var(--space-7) + 10px);
  padding-bottom: var(--space-7);
}
.atlas-phero__fx { position: absolute; inset: 0; pointer-events: none; }
.atlas-phero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
}
.atlas-phero__glow {
  position: absolute; top: -40%; right: -10%;
  width: 60%; height: 160%;
  background: radial-gradient(closest-side, rgba(182,22,49,0.40), transparent 70%);
  pointer-events: none;
}
.atlas-phero__inner { position: relative; }
.atlas-phero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 12px 0 0;
  color: #fff; /* explícito: o seletor global h1-h4 (--text-strong, quase preto) vencia a herança do fundo navy do .atlas-phero → título sumia */
}
.atlas-phero__sub {
  margin: 14px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.74);
}
.atlas-phero .atlas-eyebrow--gold { color: var(--gold); }

/* Breadcrumb (detail) */
.atlas-crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  min-height: 44px;
}
.atlas-crumb a { color: rgba(255,255,255,0.82); text-decoration: none; }
.atlas-crumb a:hover, .atlas-crumb a:focus-visible { color: var(--gold); text-decoration: underline; }
.atlas-crumb i, .atlas-crumb svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* ----------------------------------------------------------------
   Fleet — reactive filter toolbar
   ---------------------------------------------------------------- */
.atlas-fleet-toolbar {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 26px;
}
.atlas-fleet-toolbar__row {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
}
.atlas-fleet-toolbar__count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}
.atlas-fleet-toolbar__count strong { color: var(--text-strong); }
.atlas-filtergroup {
  display: flex; flex-direction: column; gap: 8px;
}
.atlas-filtergroup__label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted);
}
.atlas-filtergroup__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.atlas-clearfilters {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--brand);
  padding: 8px 6px; min-height: 44px;
  border-radius: var(--radius-sm);
}
.atlas-clearfilters:hover { color: var(--brand-hover); }
.atlas-clearfilters i, .atlas-clearfilters svg { width: 15px; height: 15px; }

/* Fleet grid: wider min-card on big screens */
@media (min-width: 640px) {
  .atlas-fleet__grid--page { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .atlas-fleet__grid--page { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------------------------------------
   Vehicle detail layout
   ---------------------------------------------------------------- */
.atlas-vd { padding-block: var(--section-y); }
.atlas-vd__grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  align-items: start;
}
@media (min-width: 940px) {
  .atlas-vd__grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr); gap: 44px; }
}

/* Gallery / hero image */
.atlas-vd__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.atlas-vd__media img { width: 100%; height: 100%; object-fit: cover; }
.atlas-vd__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,39,108,0.06), transparent 70%),
    linear-gradient(135deg, var(--gray-100), var(--gray-200));
}
.atlas-vd__ph img { width: 92px; height: auto; opacity: 0.26; }
.atlas-vd__ph-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.atlas-vd__badge { position: absolute; top: 14px; left: 14px; }

/* Title block */
.atlas-vd__head { margin-bottom: 22px; }
.atlas-vd__eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.atlas-vd__name {
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.05; letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  margin: 8px 0 0;
}
.atlas-vd__colorline {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--text-body);
}
.atlas-vd__swatch {
  width: 16px; height: 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); flex: 0 0 auto;
}

/* Specs grid */
.atlas-vd__specs {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin: 26px 0;
}
@media (min-width: 540px) { .atlas-vd__specs { grid-template-columns: repeat(4, 1fr); } }
.atlas-specbox {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-card);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.atlas-specbox i, .atlas-specbox svg { width: 20px; height: 20px; color: var(--racing-navy); }
.atlas-specbox__val {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 18px; color: var(--text-strong); line-height: 1.1;
}
.atlas-specbox__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}

/* Section heading inside detail */
.atlas-vd__sec { margin-top: 34px; }
.atlas-vd__sec-h {
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: 20px; color: var(--text-strong); margin-bottom: 14px;
}

/* Feature chips */
.atlas-featchips { display: flex; flex-wrap: wrap; gap: 8px; }
.atlas-featchip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--gray-50);
  padding: 8px 14px;
  font-size: 13px; font-weight: var(--fw-medium); color: var(--text-body);
}
.atlas-featchip i, .atlas-featchip svg { width: 14px; height: 14px; color: var(--racing-navy); flex: 0 0 auto; }

/* "What's included" list */
.atlas-included { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .atlas-included { grid-template-columns: 1fr 1fr; } }
.atlas-incl {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; line-height: 1.5; color: var(--text-body);
}
.atlas-incl__tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--radius-pill);
  background: var(--green-50); color: var(--green-500);
  display: inline-flex; align-items: center; justify-content: center;
}
.atlas-incl__tick svg, .atlas-incl__tick i { width: 14px; height: 14px; }
.atlas-incl strong { color: var(--text-strong); font-weight: var(--fw-semibold); display: block; }

/* Policy list */
.atlas-policy { display: flex; flex-direction: column; gap: 14px; }
.atlas-policy__item { display: flex; align-items: flex-start; gap: 12px; }
.atlas-policy__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--racing-50); color: var(--racing-navy);
  display: inline-flex; align-items: center; justify-content: center;
}
.atlas-policy__icon svg, .atlas-policy__icon i { width: 18px; height: 18px; }
.atlas-policy__text { font-size: 14.5px; line-height: 1.5; color: var(--text-body); }
.atlas-policy__text strong { color: var(--text-strong); font-weight: var(--fw-semibold); display: block; }

/* ----------------------------------------------------------------
   Booking / price card (detail sidebar — sticky on desktop)
   ---------------------------------------------------------------- */
.atlas-bookcard {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-card); box-shadow: var(--shadow-md);
  padding: 24px;
}
@media (min-width: 940px) {
  .atlas-bookcard { position: sticky; top: calc(var(--header-h) + 18px); }
}
.atlas-bookcard__price { display: flex; align-items: baseline; gap: 6px; }
.atlas-bookcard__amt {
  font-family: var(--font-mono); font-weight: var(--fw-semibold);
  font-size: 38px; color: var(--text-strong); line-height: 1;
}
.atlas-bookcard__per { font-family: var(--font-mono); font-size: 14px; color: var(--text-muted); }
.atlas-bookcard__from {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.atlas-bookcard__rates {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 16px 0; padding: 14px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.atlas-bookcard__rate { display: flex; flex-direction: column; gap: 2px; }
.atlas-bookcard__rate .k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.atlas-bookcard__rate .v {
  font-family: var(--font-mono); font-weight: var(--fw-semibold);
  font-size: 15px; color: var(--text-strong);
}
.atlas-bookcard__deposit {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px;
  font-size: 13px; line-height: 1.5; color: var(--text-muted);
}
.atlas-bookcard__deposit i, .atlas-bookcard__deposit svg {
  width: 16px; height: 16px; color: var(--racing-navy); flex: 0 0 auto; margin-top: 1px;
}
.atlas-bookcard__deposit strong { color: var(--text-strong); }
.atlas-bookcard__cta { margin-top: 20px; }
.atlas-bookcard__note {
  margin-top: 12px; text-align: center;
  font-size: 12.5px; color: var(--text-muted);
}
.atlas-bookcard__note i, .atlas-bookcard__note svg {
  width: 13px; height: 13px; vertical-align: -2px; color: var(--green-500); margin-right: 3px;
}