/* ============================================================================
   Real-fleet gallery — index.php / index-old.php / index2.php.
   Loads after site.css, so same-specificity !important rules win.

   Seven photographs of our own cars, each with the plate visible. The first
   tile spans the full row as a hero; the other six sit two-up on desktop and
   three-up on mobile. Every tile carries the model and its capacity, because
   "which car do I get" is the question the picture is answering.
   ============================================================================ */

/* ---------- tile ---------- */
.fg-tile{position:relative;margin:0;overflow:hidden;border-radius:14px;background:#eef1f7;
  aspect-ratio:4/3;box-shadow:0 6px 16px rgba(20,26,66,.08);
  transition:transform .2s ease,box-shadow .2s ease}
.fg-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.fg-tile:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(20,26,66,.16)}
.fg-tile:hover img{transform:scale(1.05)}

/* the hero tile: full row, wider crop */
.fg-wide{grid-column:1 / -1;aspect-ratio:16/9}

/* ---------- caption ---------- */
.fg-tile figcaption{position:absolute;right:0;bottom:0;left:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  padding:22px 11px 9px;
  background:linear-gradient(180deg,rgba(9,16,44,0) 0%,rgba(9,16,44,.30) 38%,rgba(9,16,44,.80) 100%);
  color:#fff;pointer-events:none}
.fg-tile figcaption b{font-size:12.5px;font-weight:800;letter-spacing:-.01em;line-height:1.15;
  text-shadow:0 1px 3px rgba(0,0,0,.4)}
.fg-tile figcaption span{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:9.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.fg-wide figcaption{padding:26px 14px 12px}
.fg-wide figcaption b{font-size:15px}
.fg-wide figcaption span{font-size:10.5px;padding:4px 9px}

/* "our own car" mark — the whole point of the section */
.fg-real{position:absolute;top:8px;left:8px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px 3px 6px;border-radius:999px;
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 3px 9px rgba(12,20,52,.18);
  color:#127a45;font-size:8.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.fg-real svg{width:10px;height:10px;flex:0 0 10px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* The hero tile makes the gallery column taller than it was, so the review
   column spreads its cards to fill the same height instead of leaving a
   block of white space at the bottom. */
@media (min-width:901px){
  /* .gal-lead is a direct child of .rf-grid now, so the two-column grid gets
     an explicit map: lead over gallery on the left, reviews down the right. */
  .rf-grid{grid-template-rows:auto minmax(0,1fr)}
  .gal-lead{grid-column:1!important;grid-row:1}
  .rf-gallery{grid-column:1;grid-row:2;grid-auto-rows:auto!important;align-content:start}
  .rf-reviews{grid-column:2;grid-row:1 / 3;justify-content:space-between}
}

/* ---------- mobile: two up, hero across the top ----------
   Fortuner runs the full width as the opening shot; the other six sit two
   to a row. No slider, nothing off-screen — the whole fleet is on the page.
   Tiles keep the section gutter so the grid reads as cards, not wallpaper. */
@media (max-width:900px){

  .rf-gallery{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    width:100%!important;margin:0!important;padding:0!important;
    gap:9px!important;overflow:visible!important;align-content:start}

  .gal-lead{margin:0 0 10px!important}

  .fg-tile{
    grid-column:auto!important;
    aspect-ratio:4/3!important;
    border-radius:14px;
    box-shadow:0 6px 16px rgba(20,26,66,.13);
    transform:none!important}
  .fg-tile:hover img{transform:none}

  /* the hero keeps the whole row and a wider crop */
  .fg-wide{grid-column:1 / -1!important;aspect-ratio:16/9!important;
    border-radius:16px;box-shadow:0 10px 24px rgba(20,26,66,.18)}

  /* caption: name on one line, capacity chip under it — at this tile width a
     side-by-side pair would squeeze both to nothing */
  .fg-tile figcaption{
    flex-direction:column;align-items:flex-start;justify-content:flex-end;
    gap:5px;padding:26px 10px 9px}
  .fg-tile figcaption b{font-size:12.5px;letter-spacing:-.01em;line-height:1.1}
  .fg-tile figcaption span{padding:3px 8px;border-radius:999px;font-size:9px}

  /* the hero is wide enough for the pair to sit on one line */
  .fg-wide figcaption{flex-direction:row;align-items:flex-end;
    justify-content:space-between;gap:10px;padding:34px 14px 12px}
  .fg-wide figcaption b{font-size:17px}
  .fg-wide figcaption span{padding:5px 10px;font-size:10.5px}

  .fg-real{top:8px;left:8px;padding:3px 7px 3px 6px;font-size:7.5px;gap:4px}
  .fg-real svg{width:9px;height:9px;flex-basis:9px}
  .fg-wide .fg-real{top:10px;left:10px;padding:4px 9px 4px 7px;font-size:8.5px}
  .fg-tile:not(.fg-wide) .fg-real{display:inline-flex}
}

@media (max-width:380px){
  .rf-gallery{gap:7px!important}
  .fg-tile figcaption{padding:22px 8px 7px;gap:4px}
  .fg-tile figcaption b{font-size:11.5px}
  .fg-tile figcaption span{padding:2px 7px;font-size:8.5px}
  .fg-wide figcaption b{font-size:15.5px}
  .fg-wide figcaption span{font-size:10px}
}
/* ============================ TYPE SCALE ============================ */
.fg-tile figcaption b{font-size:12.5px!important}
.fg-tile figcaption span{font-size:9.5px!important}
.fg-wide figcaption b{font-size:15px!important}
.fg-wide figcaption span{font-size:10.5px!important}
.fg-real{font-size:8.5px!important}
@media (max-width:900px){
  .fg-tile figcaption b{font-size:12.5px!important}
  .fg-tile figcaption span{font-size:9px!important}
  .fg-wide figcaption b{font-size:17px!important}
  .fg-wide figcaption span{font-size:10.5px!important}
  .fg-real{font-size:7.5px!important}
  .fg-wide .fg-real{font-size:8.5px!important}
}
@media (max-width:380px){
  .fg-tile figcaption b{font-size:11.5px!important}
  .fg-tile figcaption span{font-size:8.5px!important}
  .fg-wide figcaption b{font-size:15.5px!important}
  .fg-wide figcaption span{font-size:10px!important}
}