/* ===== Wilson Coaches – Tours: Fleet Cards ===== */
:root{
  --wc-fleet-radius: 22px;
  --wc-fleet-shadow: 0 20px 50px rgba(9, 12, 22, .20);
  --wc-fleet-outline: rgba(255,255,255,.06);
  --wc-fleet-grad: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  --wc-fleet-white: #fff;
}

/* Grid layout: 1 → 2 → 3 columns with comfy gutters */
#wc-fleet, #coach-types { /* backwards compatible hook if needed */ }
.wc-fleet-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 16px 0 8px;
}
@media (min-width: 700px){
  .wc-fleet-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
}
@media (min-width: 1100px){
  .wc-fleet-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
}

/* Card */
.wc-fleet-card{
  display:block; color:inherit; text-decoration:none; position:relative;
  border-radius: var(--wc-fleet-radius);
  overflow:hidden; background:#07111e;
  outline:1px solid var(--wc-fleet-outline);
  box-shadow: var(--wc-fleet-shadow);
  transform: translateZ(0);
}

/* Media wrapper uses aspect-ratio to keep images consistent */
.wc-fleet-media{
  position:relative; margin:0;
  aspect-ratio: 16 / 10;          /* consistent height across grid */
  background:#0a1423;
}
@supports not (aspect-ratio: 16 / 10){
  .wc-fleet-media{ padding-top:62.5%; }         /* fallback 16:10 */
  .wc-fleet-img{ position:absolute; inset:0; }
}

/* Image */
.wc-fleet-img{
  width:100%; height:100%;
  object-fit:cover; object-position:center center; display:block;
  transform: scale(1.02);
  transition: transform .55s ease, filter .55s ease;
}

/* Soft bottom gradient (like australia.com) */
.wc-fleet-media::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: var(--wc-fleet-grad);
}

/* Meta row pinned to bottom */
.wc-fleet-meta{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color: var(--wc-fleet-white);
  text-shadow: 0 4px 14px rgba(0,0,0,.45);
}

/* Title in your script font to echo hero styling */
.wc-fleet-title{
  font-family: 'Rethaster-vmGlZ', ui-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  font-size: clamp(18px, 2.4vw, 26px);
}

/* Capacity badge */
.wc-fleet-pill{
  display:inline-flex; align-items:center; height:34px; padding:0 12px;
  border-radius:999px; backdrop-filter: blur(6px);
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  color:#eef6ff;
  font: 700 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Interactions */
.wc-fleet-card:hover .wc-fleet-img{ transform: scale(1.06); filter: brightness(.96); }
.wc-fleet-card:active{ transform: translateY(1px); }

/* Tighten section spacing if needed where you place it */
#fleet .section-title{ margin-bottom: 6px; }
#fleet .section-kicker{ margin-top: 0; margin-bottom: 14px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .wc-fleet-img{ transition:none; }
}


/* ===== Section shell & container (matches Services spacing) ===== */
.wc-fleet-section{
  padding: clamp(40px, 6vw, 84px) 0;
}

.wc-container{
  max-width: 1200px;           /* clean page width */
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 28px);
}

/* Section header (kicker + H2 + short paragraph) */
.wc-sechead{
  text-align:center;
  margin-bottom: clamp(18px, 4vw, 28px);
}

.wc-kicker{
  display:inline-block;
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#0ea5e9;
  background: rgba(14,165,233,.08);
  border:1px solid rgba(14,165,233,.2);
  border-radius:999px;
  padding:10px 14px;
  margin-bottom: 14px;
}

.section-title{
  margin: 0 0 6px 0;
}

.section-kicker{
  margin: 0 auto;
  max-width: 760px;
  color:#6b7b90;
}

/* ===== Cards grid (containerized) ===== */
.wc-fleet-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: clamp(16px, 3vw, 22px);
}
@media (min-width: 700px){
  .wc-fleet-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px){
  .wc-fleet-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
}

/* ===== Card visuals (from the refined version) ===== */
:root{
  --wc-fleet-radius: 22px;
  --wc-fleet-shadow: 0 20px 50px rgba(9, 12, 22, .20);
  --wc-fleet-outline: rgba(255,255,255,.06);
  --wc-fleet-grad: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  --wc-fleet-white: #fff;
}

.wc-fleet-card{
  display:block; text-decoration:none; color:inherit; position:relative;
  border-radius: var(--wc-fleet-radius);
  overflow:hidden; background:#07111e;
  outline:1px solid var(--wc-fleet-outline);
  box-shadow: var(--wc-fleet-shadow);
  transform: translateZ(0);
}

.wc-fleet-media{
  position:relative; margin:0; aspect-ratio: 16 / 10; background:#0a1423;
}
@supports not (aspect-ratio: 16 / 10){
  .wc-fleet-media{ padding-top:62.5%; }
  .wc-fleet-img{ position:absolute; inset:0; }
}

.wc-fleet-img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; transform: scale(1.02);
  transition: transform .55s ease, filter .55s ease;
}

.wc-fleet-media::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: var(--wc-fleet-grad);
}

.wc-fleet-meta{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color: var(--wc-fleet-white);
  text-shadow: 0 4px 14px rgba(0,0,0,.45);
}

/* Script-style title to echo the hero */
.wc-fleet-title{
  font-family: 'Rethaster-vmGlZ', ui-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; line-height: 1.05;
  font-size: clamp(18px, 2.4vw, 26px);
}

/* Capacity pill */
.wc-fleet-pill{
  display:inline-flex; align-items:center; height:34px; padding:0 12px;
  border-radius:999px; backdrop-filter: blur(6px);
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  color:#eef6ff; font: 700 12.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Interactions + accessibility */
.wc-fleet-card:hover .wc-fleet-img{ transform: scale(1.06); filter: brightness(.96); }
.wc-fleet-card:active{ transform: translateY(1px); }
@media (prefers-reduced-motion: reduce){
  .wc-fleet-img{ transition:none; }
}