/* ════════════════════════════════════════════════════
   CITY CLASSIC CARS — PREMIUM UPGRADE LAYER (v2)
   Real-photo services, rentals, master class, gallery,
   animated counters, hero Ken-Burns. Loaded after style.css.
   ════════════════════════════════════════════════════ */

/* ──── SERVICES: real-photo grid ──── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 300px;
  gap: var(--space-4);
}
.svc-card {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  isolation: isolate;
}
.svc-card--tall { grid-row: span 2; }
.svc-card--wide { grid-column: span 4; }
.svc-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--easing);
  z-index: -2;
  filter: saturate(0.95) contrast(1.04);
}
.svc-card__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,9,7,0.10) 0%, rgba(14,9,7,0.55) 55%, rgba(14,9,7,0.94) 100%);
  transition: background 0.5s var(--easing);
}
.svc-card:hover img { transform: scale(1.07); }
.svc-card:hover .svc-card__veil {
  background: linear-gradient(180deg, rgba(45,24,16,0.25) 0%, rgba(14,9,7,0.65) 50%, rgba(14,9,7,0.97) 100%);
}
.svc-card__body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-6);
}
.svc-card__num {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: var(--space-2);
}
.svc-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: 500;
  font-variation-settings: "SOFT" 50, "opsz" 96;
  color: var(--bone);
  margin-bottom: var(--space-2);
}
.svc-card p {
  color: var(--text-soft);
  font-size: var(--text-sm); line-height: 1.55;
  max-width: 52ch;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.55s var(--easing), opacity 0.45s var(--easing);
}
.svc-card:hover p, .svc-card:focus-within p { max-height: 12em; opacity: 1; }
@media (hover: none) { .svc-card p { max-height: 12em; opacity: 1; } }
@media (max-width: 980px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 280px; }
  .svc-card, .svc-card--wide, .svc-card--tall { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { grid-column: span 1; }
}
.spec__more-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--brass); font-weight: 600;
  margin-right: var(--space-3);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

/* ──── RENTALS ──── */
.rentals { background: var(--bg); }
.rentals__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 980px) { .rentals__grid { grid-template-columns: 1fr 1fr; } .rental-card--feature { grid-column: span 2; } }
@media (max-width: 600px) { .rentals__grid { grid-template-columns: 1fr; } .rental-card--feature { grid-column: span 1; } }
.rental-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  min-height: 440px;
  isolation: isolate;
  display: flex;
}
.rental-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--easing);
  filter: saturate(0.95) contrast(1.05);
}
.rental-card__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,9,7,0.15) 0%, rgba(14,9,7,0.55) 50%, rgba(14,9,7,0.95) 100%);
}
.rental-card:hover img { transform: scale(1.06); }
.rental-card__body { margin-top: auto; padding: var(--space-6); }
.rental-card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(135deg, var(--brass-bright), var(--brass-deep));
  padding: 0.3rem 0.7rem; border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.rental-card h3 {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500;
  font-variation-settings: "SOFT" 50, "opsz" 96;
  color: var(--bone); margin-bottom: var(--space-2);
}
.rental-card p { color: var(--text-soft); font-size: var(--text-sm); line-height: 1.55; margin-bottom: var(--space-4); }
.rental-card__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brass-bright);
  transition: gap 0.3s var(--easing), color 0.3s var(--easing);
}
.rental-card__link svg { width: 15px; height: 15px; }
.rental-card__link:hover { gap: 0.75rem; color: var(--bone); }

/* ──── MASTER CLASS ──── */
.masterclass {
  position: relative; overflow: hidden;
  padding: var(--space-40) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.masterclass__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.32) saturate(0.85) contrast(1.05);
  transform: scale(1.05);
  will-change: transform;
}
.masterclass__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(45,24,16,0.55), transparent 70%),
    linear-gradient(180deg, rgba(14,9,7,0.7), rgba(14,9,7,0.85));
}
.masterclass .container { position: relative; z-index: 2; }
.masterclass__inner { max-width: 760px; }
.masterclass__inner .eyebrow { display: inline-block; margin-bottom: var(--space-4); }
.masterclass__inner h2 { font-size: var(--text-3xl); margin-bottom: var(--space-6); font-weight: 500; }
.masterclass__lead { color: var(--text-soft); font-size: var(--text-lg); line-height: 1.6; margin-bottom: var(--space-8); }
.masterclass__stats {
  display: flex; gap: var(--space-12); flex-wrap: wrap;
  padding: var(--space-6) 0; margin-bottom: var(--space-8);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.masterclass__stat .num {
  display: block; font-family: var(--font-display);
  font-size: var(--text-4xl); font-weight: 500; line-height: 1;
  color: var(--brass-bright);
  font-variation-settings: "SOFT" 50, "opsz" 144;
}
.masterclass__stat .lbl {
  display: block; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-soft); margin-top: var(--space-2);
}
@media (max-width: 600px) { .masterclass { padding: var(--space-24) 0; } .masterclass__stats { gap: var(--space-8); } }

/* ──── INSIDE THE SHOP GALLERY STRIP ──── */
.gallery-strip { background: var(--bg-warm); }
.gallery-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: var(--space-4);
}
.gphoto {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  margin: 0;
}
.gphoto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--easing); filter: saturate(0.95); }
.gphoto:hover img { transform: scale(1.07); }
.gphoto figcaption {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone);
  background: rgba(14,9,7,0.7); backdrop-filter: blur(6px);
  border: 1px solid var(--line-strong);
  padding: 0.3rem 0.6rem; border-radius: var(--radius-sm);
}
.gphoto--lg { grid-column: span 2; grid-row: span 2; }
.gphoto--wide { grid-column: span 2; }
@media (max-width: 760px) {
  .gallery-strip__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .gphoto--lg { grid-column: span 2; grid-row: span 2; }
  .gphoto--wide { grid-column: span 2; }
}

/* ──── REVIEWS additions ──── */
.review-card__avatar svg { width: 20px; height: 20px; color: var(--ink); }
.reviews__disclaimer {
  margin-top: var(--space-8);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* ──── Gallery hero representative note ──── */
.gallery-hero__note {
  margin-top: var(--space-4) !important;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-muted) !important;
}

/* ──── HERO Ken-Burns zoom (fail-open) ──── */
@keyframes heroKenBurns {
  from { transform: scale(1.05); }
  to   { transform: scale(1.14); }
}
.hero__bg { animation: heroKenBurns 20s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .hero__bg { animation: none; } }