/* =====================================================
   VINCITORE DESIGN -- DENTAL MAGAZINES PAGE STYLES
   Extends project-wrtv.css — only overrides and additions
   ===================================================== */

/* ── HERO IMAGE (right column, top) ───────────────── */
.mag-hero-img-wrap {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--light-grey);
}
.mag-hero-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.mag-hero-img-wrap:hover img { transform: scale(1.02); }


/* ── SHOWCASE SECTION overrides ────────────────────── */
/* Inherits .wrtv-showcase background — just adds top padding */
.mag-showcase {
  padding-top: 4rem;
}


/* ── 1. FULL-WIDTH SHOWCASE HERO IMAGE ─────────────── */
.mag-showcase-hero {
  width: 100%;
  height: auto;
  aspect-ratio: unset;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--light-grey);
  margin-bottom: 2.5rem;
  /* No fixed aspect-ratio — image scales to its natural height */
}
.mag-showcase-hero img {
  width: 100%;
  height: auto;                  /* natural height at every screen size */
  display: block;
  transition: transform .5s var(--ease);
}
.mag-showcase-hero:hover img { transform: scale(1.02); }
.mag-showcase-hero-fallback {
  width: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-grey);
  color: var(--text-muted);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}
@media (max-width: 768px) {
  .mag-showcase-hero {
    height: auto !important;
    aspect-ratio: auto !important;
    display: block;
  }
}

/* ── 2. THREE IMAGES IN A ROW ───────────────────────── */
/* Taller than typical landscape — aspect ratio 7:5
   No borders — images float on the background.
   Save at 700 x 500px each.                            */
.mag-three-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.mag-row-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--light-grey);
  aspect-ratio: 7 / 5;           /* taller than 16:9 — more portrait-ish landscape */
}
.mag-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--ease);
}
.mag-row-img:hover img { transform: scale(1.04); }
.mag-row-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-grey);
  color: var(--text-muted);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}


/* ── 3. CAROUSEL — image-only, 608x394px ratio ──────── */
/* Overrides the WRTV carousel slide to:
   - Use 608x394 aspect ratio (instead of 16:9 / 700x394)
   - No play button overlay (static images, not videos)
   - Softer hover — just a subtle scale, no dark overlay  */
.mag-carousel-slide {
  cursor: default !important;    /* not clickable — no pointer cursor */
}
.mag-carousel-slide img {
  transition: transform .4s var(--ease) !important;
  filter: none !important;       /* no dark overlay on hover */
}
.mag-carousel-slide:hover img {
  transform: scale(1.02) !important;
  filter: none !important;
}
/* Override the 16:9 aspect ratio with 608:394 */
.wrtv-carousel-slide.mag-carousel-slide {
  aspect-ratio: 608 / 394;
  cursor: default;
}
/* Hide the play button that WRTV adds — not needed here */
.mag-carousel-slide .wrtv-play-btn {
  display: none !important;
}


/* ── 4. FULL-BLEED COLLAGE IMAGE ────────────────────── */
/* Sits below the showcase section, spans full viewport width
   The bg-collage.jpg is 3840x893px — very wide panoramic.
   We display it full width, contain vertically.           */
.mag-collage-footer {
  width: 100%;
  overflow: hidden;
  background: #f0ede5;           /* warm neutral in case image has gaps */
  margin-top: 0;
}
.mag-collage-footer img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 420px;             /* cap height so it doesn't overwhelm page */
  object-fit: cover;
  object-position: center top;
}
.mag-collage-fallback {
  width: 100%;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-grey);
  color: var(--text-muted);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}


/* ── RESPONSIVE ────────────────────────────────────── */
@media (max-width: 768px) {
  .mag-three-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .mag-showcase-hero { aspect-ratio: 4 / 3; }
  .mag-collage-footer img { max-height: 200px; }
}

@media (max-width: 580px) {
  /* Carousel shows 1 slide on mobile */
  .wrtv-carousel-slide.mag-carousel-slide {
    flex: 0 0 100%;
  }
}