/* =========================================================
   Space City Frames — Automotive sessions page
   Extends css/style.css. Uses the existing token set only.

   MOBILE FIRST. This page is reached from QR codes on business cards
   and printed adverts, so the phone layout is the real design and the
   desktop rules below are the enlargement. Base styles = phone.
   Frames are kept small enough to scan; the site lightbox
   (js/main.js) opens any of them full size on tap.

   The hero is sized by css/style.css site-wide — not overridden here.
   ========================================================= */

/* ---------- Launch sale strip ---------- */
.sale-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
}
.sale-strip .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 18px; padding-block: 14px;
}
.sale-strip b {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.sale-strip span { color: var(--text-muted); font-size: .85rem; }

/* ---------- Tap-to-enlarge affordance ---------- */
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.zoomable img { transition: opacity .25s ease, transform .45s ease; }
.zoomable:hover img { opacity: .82; }
.tap-hint {
  color: var(--text-faint); font-size: .82rem; margin: 16px 0 0;
  font-family: 'Oswald', sans-serif; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- Deliverable demo ---------- */
.deliver { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.deliver figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); }
.deliver img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.deliver .lead { grid-column: span 2; }
.deliver .lead img { aspect-ratio: 16 / 10; }
.frame-tag {
  position: absolute; left: 0; bottom: 0;
  background: rgba(10, 10, 11, .88);
  font-family: 'Oswald', sans-serif; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); padding: 5px 9px;
}
.deliver-note { color: var(--text-faint); font-size: .85rem; margin: 16px 0 0; max-width: 66ch; }

/* ---------- Image rows ---------- */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.shots figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); }
.shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Masonry gallery — override the site default so phones get two columns
   rather than one full-bleed image per row. */
#automotive-more.grid { columns: 2 140px; column-gap: 8px; }
#automotive-more.grid figure { margin: 0 0 8px; break-inside: avoid; }

/* ---------- Package tiers ---------- */
.tier-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tier {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); padding: 26px 22px 24px;
  display: flex; flex-direction: column;
}
.tier.featured { border-color: var(--accent); background: var(--bg-elevated); }
.tier .flag {
  align-self: flex-start;
  font-family: 'Oswald', sans-serif; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 3px 9px; margin-bottom: 13px;
}
.tier h3 { font-size: 1.6rem; margin-bottom: 4px; }
.tier .scope {
  font-family: 'Oswald', sans-serif; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 18px;
}
.tier-price {
  display: flex; align-items: baseline; gap: 11px;
  font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.tier-price .was {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 1.35rem;
  color: var(--text-faint); text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.tier-price .now {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 2.6rem;
  color: var(--accent); line-height: 1;
}
.tier .saved {
  font-family: 'Oswald', sans-serif; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 20px;
}
.tier ul {
  list-style: none; margin: 0 0 24px; padding: 0; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--text-muted); font-size: .9rem;
}
.tier li { padding-left: 17px; position: relative; }
.tier li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 8px; height: 1px; background: var(--accent);
}
.tier li b { color: var(--text); font-weight: 500; }

/* ---------- Per-photo ladder ---------- */
.on-the-spot {
  margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elevated);
  display: grid; grid-template-columns: 1fr; gap: 20px;
  padding: 24px 22px;
}
.on-the-spot h3 { font-size: 1.35rem; margin-bottom: 9px; }
.on-the-spot p { color: var(--text-muted); margin: 0; font-size: .9rem; }
.rungs { display: flex; gap: 8px; }
.rung {
  flex: 1 1 0; text-align: center; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); padding: 13px 6px;
}
.rung .was {
  font-family: 'Oswald', sans-serif; font-size: .8rem; color: var(--text-faint);
  text-decoration: line-through; display: block;
}
.rung .now {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.6rem;
  color: var(--accent); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.rung .lbl {
  font-family: 'Oswald', sans-serif; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 3px;
}

/* ---------- Add-ons ---------- */
.addon-note {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--bg-elevated); border-radius: var(--radius);
  padding: 16px 20px; margin-top: 16px;
  color: var(--text-muted); font-size: .87rem;
}
.addon-note b { color: var(--text); }

/* ---------- Booking ---------- */
.book-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.book-grid figure { margin: 0; }
.book-grid img { border-radius: var(--radius); }
.book-grid figcaption {
  color: var(--text-faint); font-size: .76rem; margin-top: 9px;
  font-family: 'Oswald', sans-serif; letter-spacing: .1em; text-transform: uppercase;
}

/* =========================================================
   Enlargements. Phone layout above is the baseline.
   ========================================================= */

@media (min-width: 560px) {
  .shots { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .shots-4 { grid-template-columns: repeat(2, 1fr); }
  .deliver { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .deliver .lead { grid-column: span 3; }
  #automotive-more.grid { columns: 3 150px; column-gap: 10px; }
  #automotive-more.grid figure { margin-bottom: 10px; }
  .rung { padding: 15px 10px; }
  .rung .now { font-size: 1.8rem; }
}

@media (min-width: 780px) {
  .sale-strip b { font-size: 1.1rem; }
  .sale-strip span { font-size: .9rem; }
  .tier-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .on-the-spot { grid-template-columns: 1.15fr 1fr; gap: 28px; padding: 26px 24px; }
  .book-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .deliver { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .deliver .lead { grid-column: span 2; grid-row: span 2; }
  .deliver .lead img { aspect-ratio: auto; height: 100%; }
  .shots { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .shots-4 { grid-template-columns: repeat(4, 1fr); }
  #automotive-more.grid { columns: 4 180px; column-gap: 12px; }
  #automotive-more.grid figure { margin-bottom: 12px; }
}

@media (min-width: 1100px) {
  #automotive-more.grid { columns: 5 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .zoomable img { transition: none; }
}