/* ============================================================
   REAL FLEETS — full-bleed image panels, stripe card
   Grid-based so the card always aligns to the page's content
   column (1200px), at any viewport width including ultrawide.
   ============================================================ */

.fleet-photos{padding:var(--space-section) 0;background:var(--bg-1)}
.fleet-photos__subline{
  font-family:var(--font-body);
  font-size:var(--text-body);
  color:var(--text-secondary);
  max-width:60ch;
  margin:calc(-1 * var(--space-lg)) 0 var(--space-xl);
}

/* gutter = distance from viewport edge to the 1200px content column */
:root{--panel-pad:clamp(1.5rem, 4vw, 5rem)}

.panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:#0f1115;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 14px 44px rgba(10,10,10,.12);
}
.panel + .panel{margin-top:var(--space-lg)}
/* card column must be wide enough to hold gutter + text */
.panel{grid-template-columns:minmax(260px,38%) minmax(0,1fr)}
.panel--right{grid-template-columns:minmax(0,1fr) minmax(260px,38%)}

.panel__media{position:relative;overflow:hidden;aspect-ratio:4/3}
/* DOM order is media -> card; pull the card to column 1 unless --right */
.panel__card{order:-1}
.panel--right .panel__card{order:0}
.panel__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* fit variant: whole vehicle visible over a blurred version of itself */
.panel--fit .panel__img{object-fit:contain;z-index:1;padding:var(--space-lg)}
.panel--fit .panel__media:before{
  content:"";
  position:absolute;inset:0;
  backdrop-filter:blur(30px) brightness(.5);
  -webkit-backdrop-filter:blur(30px) brightness(.5);
}

/* white stripe card, text aligned to the content column */
.panel__card{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;
  padding:var(--space-xl);
}
.panel--right .panel__card{padding:var(--space-xl)}
.panel__card:after{
  content:"";
  position:absolute;
  top:0;bottom:0;right:0;
  width:4px;
  background:var(--primary);
}
.panel--right .panel__card:after{right:auto;left:0}

.panel__eyebrow{
  font-family:var(--font-body);
  font-size:var(--text-micro);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:var(--space-xs);
}
.panel__title{
  font-family:var(--font-heading);
  font-size:clamp(1.6rem,2.2vw,2.4rem);
  font-weight:600;
  color:var(--text-primary);
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:var(--leading-tight);
  margin-bottom:var(--space-sm);
}
.panel__title--lg{font-size:clamp(1.9rem,2.8vw,3rem)}
.panel__desc{
  font-family:var(--font-body);
  font-size:var(--text-body);
  color:var(--text-secondary);
  line-height:var(--leading-normal);
  max-width:46ch;
}

/* before/after split inside a media cell */
.panel__media--split{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#fff}
.panel__half{position:relative;overflow:hidden}
.panel__half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.feature__chip{
  position:absolute;
  left:16px;bottom:16px;
  z-index:2;
  font-family:var(--font-body);
  font-size:var(--text-micro);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(10,10,10,.66);
  border-radius:999px;
  padding:.4rem .95rem;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.feature__chip--after{background:var(--primary);left:auto;right:16px}

.feature__link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:var(--space-md);
  font-family:var(--font-body);
  font-size:var(--text-small);
  font-weight:700;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.feature__link-icon{width:16px;height:16px;transition:transform .2s ease}
.feature__link:hover .feature__link-icon{transform:translateX(4px)}

/* ---- narrower desktops ---- */
@media(max-width:1100px){
  .panel{grid-template-columns:minmax(240px,42%) minmax(0,1fr)}
  .panel--right{grid-template-columns:minmax(0,1fr) minmax(240px,42%)}
  .panel__card,.panel--right .panel__card{padding:var(--space-lg)}
}

/* ---- mobile: stack ---- */
@media(max-width:860px){
  .panel,.panel--right{grid-template-columns:1fr}
  .panel__card,.panel--right .panel__card{order:0}
  .panel__media{order:-1;aspect-ratio:4/3;height:auto;min-height:0}
  .panel--fit .panel__img{padding:0}
  .panel--fit .panel__media:before{display:none}
  .panel--fit .panel__media{background:#0f1115}
  .panel__card{padding:var(--space-lg) var(--space-md);box-shadow:none}
  .panel--right .panel__card{padding:var(--space-lg) var(--space-md)}
  .panel__card:after{top:0;bottom:auto;left:0;right:auto;width:100%;height:4px}
  .panel--right .panel__card:after{left:0}
  .panel__media--split{aspect-ratio:16/10}
}

/* Single big before/after slider */
.gallery__sliders--single{display:block;max-width:900px;margin:0 auto}