/* === FILE: assets/css/pages/our-rates.css ===
   Page-specific styles for /our-rates.
   Inherits the shared internal-page template (page-hero,
   page-content, page-rates-table, page-info-callout) from
   demo-flight.css, then layers on rates-specific grid + 3-col
   solo/dual row variant + DPE callout + policy bullets.
   ============================================================ */

@import url('demo-flight.css');

/* ─── EFFECTIVE-DATE BADGE ───────────────────────────────────── */
.rates-effective {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 2rem;
  padding: .5rem .875rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(232, 151, 26, .08);
  border: 1px solid rgba(232, 151, 26, .25);
  border-radius: 100px;
}

.rates-effective::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ─── RATE-CARD GRID (auto-stacking, responsive) ─────────────── */
.rates-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 1rem 0 2rem;
}

@media (min-width: 800px) {
  .rates-grid { grid-template-columns: repeat(2, 1fr); }
}

/* When the sidebar is present, the content column narrows enough that
   2-col rate cards get cramped between ~960px and ~1200px. Keep them
   single-column in that band; they expand back to 2-col at ≥1200px. */
@media (min-width: 800px) and (max-width: 1199px) {
  .page-layout--with-sidebar .rates-grid {
    grid-template-columns: 1fr;
  }
}

.rates-card {
  display: flex;
  flex-direction: column;
}

.rates-card-title {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 .875rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid var(--color-border);
}

/* Override .page-content h3::before bar inside cards — keep title clean */
.rates-card-title::before { content: none !important; }

/* Tighter rates table inside cards (less vertical padding) */
.rates-card .page-rates-table { margin: 0; }
.rates-card .page-rates-row { padding: .75rem 1rem; }

/* Simple 2-col (name | price) — overrides default 3-col grid */
.rates-card .page-rates-row:not(.page-rates-row--three-col):not(.page-rates-row--head) {
  grid-template-columns: 1fr auto;
}
.rates-card .page-rates-row--head:not(.page-rates-row--three-col) {
  grid-template-columns: 1fr auto;
}

/* ─── PRICE TYPOGRAPHY (all rate tables on this page) ────────── */
/* Tabular numerals keep digit widths equal so prices align vertically
   in a column ($295, $1,032, $15,760 all line up cleanly). */
.page-rates-table .page-rates-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ─── 3-COL VARIANT (name · solo · dual) ─────────────────────── */
.page-rates-row--three-col {
  grid-template-columns: minmax(0, 1.6fr) minmax(5.5rem, 1fr) minmax(5.5rem, 1fr);
}

/* Both price columns right-align — scannable currency column */
.page-rates-row--three-col .page-rates-price {
  text-align: right;
  justify-self: end;
}

/* Match column-header alignment to the data cells below them */
.page-rates-row--three-col.page-rates-row--head > [role="columnheader"]:nth-child(n+2) {
  text-align: right;
  justify-self: end;
}

/* Faded "—" placeholder for missing solo rate (dual-only aircraft) */
.page-rates-row--three-col .page-rates-price--none {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .04em;
}

/* ─── SIMPLE 2-COL CARDS (name | price) ──────────────────────── */
/* Right-align the price for vertical scan consistency. */
.rates-card .page-rates-row:not(.page-rates-row--three-col) .page-rates-price,
.rates-checkride .page-rates-row .page-rates-price {
  text-align: right;
  justify-self: end;
}

.rates-card .page-rates-row--head:not(.page-rates-row--three-col) > [role="columnheader"]:nth-child(2),
.rates-checkride .page-rates-row--head > [role="columnheader"]:nth-child(2) {
  text-align: right;
  justify-self: end;
}

/* ─── MOBILE: stack with inline labels ───────────────────────── */
/* Each row becomes a small card. The aircraft name is the header;
   prices stack below with a SOLO / DUAL label prefix so they're
   never ambiguous. The dual-only rows hide the "—" placeholder. */
@media (max-width: 540px) {
  .page-rates-row--three-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.125rem;
    gap: .375rem;
  }

  .page-rates-row--three-col .page-rates-item {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: .25rem;
    padding-bottom: .5rem;
    border-bottom: 1px dashed var(--color-border);
  }

  .page-rates-row--three-col .page-rates-price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.125rem;
    padding: .125rem 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* SOLO / DUAL label prefix (from data-label attribute) — fixed
     min-width so labels align vertically and prices share a
     consistent right edge. */
  .page-rates-row--three-col .page-rates-price::before {
    content: attr(data-label);
    min-width: 3rem;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
  }

  /* Hide the "no solo rate" placeholder entirely — cleaner than "—" */
  .page-rates-row--three-col .page-rates-price--none { display: none; }

  /* Hide the visual column-header row; labels are inline now */
  .page-rates-row--three-col.page-rates-row--head { display: none; }
}

/* ─── DPE CHECKRIDE CALLOUT ──────────────────────────────────── */
.rates-checkride {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 2rem clamp(1.25rem, 3vw, 2rem);
  margin: 2.5rem 0;
}

.rates-checkride h3 {
  margin-top: 0 !important;
  padding-left: 0 !important;
}

.rates-checkride h3::before { content: none !important; }

.rates-checkride-note {
  font-size: .875rem;
  color: var(--color-text-muted);
  margin: 1rem 0 0;
  font-style: italic;
}

/* ─── INVOICE / DISCLAIMER LINE ──────────────────────────────── */
.rates-disclaimer {
  display: block;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 0;
  background: rgba(17, 24, 39, .03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--color-secondary);
}

/* ─── BILLING POLICY BULLETS ─────────────────────────────────── */
.rates-policy {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 1.25rem;
}

.rates-policy li {
  position: relative;
  padding: 1.125rem 1.25rem 1.125rem 3rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--color-secondary);
}

.rates-policy li::before {
  counter-increment: rates-policy-counter;
  content: counter(rates-policy-counter);
  position: absolute;
  left: 1.125rem;
  top: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-accent);
  background: rgba(232, 151, 26, .12);
  border-radius: 50%;
}

.rates-policy {
  counter-reset: rates-policy-counter;
}