/* ================================
   SONY CINEMA — PAGE SPECIFIC STYLES
   File: projects/simple/sony-cinema.css
   12-column grid, 40px side margins.
================================ */

:root {
  --col: calc((100vw - 80px) / 12);
  --margin: 40px;
  --gap: 80px;
  --card-gap: 20px; /* half the page margin, between carousel cards */
}


/* ================================
   SECTION 1 — HERO
   Full bleed, no top margin at all.
   Nav floats on top via fixed position.
   height: auto = full image, no crop.
================================ */

.sony-hero {
  width: 100%;
  /* No padding-top — hero starts at very top of page */
}

.sony-hero-img {
  width: 100%;
  height: auto;
  display: block;
}


/* ================================
   SECTION 2 — INTRO
   Two equal columns.
   Title  = left half  (cols 1–6)
   Body   = right half (cols 7–12)
   Body must start EXACTLY at 50% of page.
   We use a proper grid with no gap so
   the right column edge-aligns to center.
================================ */

.sony-intro {
  display: grid;
  grid-template-columns: 1fr 1fr; /* strict 50/50 */
  column-gap: 0;                  /* no gap — body starts exactly at center */
  padding: 80px var(--margin);
}

.sony-intro-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 96px;
  line-height: 1.0;
  letter-spacing: -0.03em;
  align-self: start;
  /* sits fully within left half */
  padding-right: 40px;
}

.sony-intro-body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  align-self: start;
  padding-top: 8px;
  /* No padding-left — starts exactly at the 50% mark */
}


/* ================================
   SECTION 3 — PRODUCT CAROUSEL
   Inside page margins (40px each side).
   All 4 cards in a single row.
   Square format — height = width of
   a 6-col card (the expanded size).

   Normal  = flex 2, 50% opacity
   Hovered = flex 6, 100% opacity
   Gap between cards = 20px (--card-gap)

   NO text overlays. Just images.
================================ */

.sony-carousel-section {
  padding: 0 var(--margin);
}

.sony-carousel {
  display: flex;
  width: 100%;
  gap: var(--card-gap);
  align-items: center;
  overflow: hidden; /* nothing bleeds outside the fixed box */
  /* Fixed height = active card square size (6/12 of available width) */
  height: calc((100vw - 80px - 60px) * 0.5);
}

.sony-card {
  flex: 2;
  min-width: 0;
  overflow: hidden; /* clip image if it's somehow larger */
  cursor: pointer;
  opacity: 0.5;
  transition: flex 0.6s cubic-bezier(0.76, 0, 0.24, 1),
              opacity 0.4s ease;
  /* Each card's max height = the carousel height, so images never push layout */
  max-height: 100%;
  display: flex;
  align-items: center;
}

.sony-card.is-active {
  flex: 6;
  opacity: 1;
}

.sony-card-image {
  width: 100%;
  height: auto;
  display: block;
  max-height: 100%; /* never taller than the carousel */
  object-fit: contain; /* show full image, no crop */
}

/* Mobile descriptions — hidden on desktop, shown on mobile inside each card */
.sony-mobile-desc {
  display: none;
}


/* ================================
   CAROUSEL DESCRIPTION BLOCK
   Below carousel, inside margins.
   6 cols wide, tracks active card.
   Krub Regular 14px.
================================ */

.sony-carousel-desc {
  position: relative;
  margin-top: 32px;
  /* Fixed height prevents layout jump when paragraphs swap.
     All paragraphs are position:absolute so they don't affect flow. */
  height: 100px;
}

.sony-product-desc {
  font-family: 'Krub', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: #888; /* même gris que les légendes de Maman */
  /* Width matches the active card (6/12 of carousel width)
     Carousel width = 100vw - 2×40px margins - 3×20px gaps */
  width: calc((100vw - 80px - 60px) * 0.5);

  /* Always absolute — never jumps in/out of flow.
     This is what allows opacity transition to work. */
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.sony-product-desc.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.sony-product-desc strong {
  font-family: 'Inter', sans-serif;
}

.sony-product-desc .bullet {
  font-size: 10px;
  vertical-align: middle;
}


/* ================================
   SECTION 4 — ROOM SCAN
   Full bleed + crossfade hover.
   Caption: Inter Regular 32px,
   8 center cols.
================================ */

.sony-room {
  width: 100%;
  margin-top: var(--gap);
}

.sony-room-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.sony-room-default {
  width: 100%;
  display: block;
  height: auto;
}

.sony-room-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.45, 0, 0.55, 1);
}

.sony-room-wrap:hover .sony-room-hover {
  opacity: 1;
}

.sony-room-caption {
  padding: 40px
           calc(var(--margin) + var(--col) * 2)
           0
           calc(var(--margin) + var(--col) * 2);
}

.sony-room-caption p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}


/* ================================
   SECTION 5 — MOCKUP
   Full bleed.
================================ */

.sony-mockup {
  width: 100%;
  margin-top: var(--gap);
}

.sony-mockup-img {
  width: 100%;
  display: block;
  height: auto;
}


/* ================================
   SECTION 6 — BILLBOARD DUO
   8 center cols. Stacked vertically.
   Gap between = --gap (same as sections).
================================ */

.sony-billboards {
  margin-top: var(--gap);
  padding: 0 calc(var(--margin) + var(--col) * 2);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.sony-billboard-img {
  width: 100%;
  display: block;
  height: auto;
}


/* ================================
   SECTION 7 — INSTAGRAM VIDEO
   Full bleed.
================================ */

.sony-insta {
  width: 100%;
  margin-top: var(--gap);
}

.sony-insta-video {
  width: 100%;
  display: block;
  height: auto;
}


/* ================================
   SECTION 8 — HEATHROW
   8 center cols. Stacked.
   Same gap between images.
================================ */

.sony-heathrow {
  margin-top: var(--gap);
  padding: 0 calc(var(--margin) + var(--col) * 2);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.sony-heathrow-img {
  width: 100%;
  display: block;
  height: auto;
}


/* ================================
   SECTION 9 — PROJECT META
   Centered. Krub 14px.
================================ */

.sony-meta {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 80px var(--margin) 100px var(--margin);
}

.sony-meta-item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sony-meta-label {
  font-family: 'Krub', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.sony-meta-value {
  font-family: 'Krub', sans-serif;
  font-weight: 400;
  font-size: 14px;
}


/* ================================
   MOBILE — max 768px
================================ */

@media (max-width: 768px) {

  :root {
    --col: calc((100vw - 40px) / 12);
    --margin: 20px;
    --gap: 48px;
    --card-gap: 10px;
  }

  .sony-intro {
    grid-template-columns: 1fr;
    padding: 48px var(--margin);
    gap: 24px;
  }

  .sony-intro-title {
    font-size: clamp(36px, 10vw, 72px);
    padding-right: 0;
  }

  .sony-intro-body {
    font-size: clamp(18px, 5vw, 24px);
    padding-left: 0;
  }

  /* Carousel stacks vertically, no fixed height */
  .sony-carousel {
    flex-direction: column;
    height: auto !important;
    gap: 0;
  }

  .sony-card,
  .sony-card.is-active {
    flex: none;
    width: 100%;
    opacity: 1 !important;
    transition: none;
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
  }

  .sony-card-image {
    width: 100%;
    height: auto;
    max-height: none;
  }

  /* Hide the shared description block on mobile */
  .sony-carousel-desc {
    display: none;
  }

  /* Show inline mobile descriptions */
  .sony-mobile-desc {
    display: block;
    font-family: 'Krub', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.6;
    text-align: justify;
    padding: 12px 0 0 0;
  }

  /* Room scan — show projected image, hide default */
  .sony-room-default {
    display: none;
  }

  .sony-room-hover {
    position: relative !important;
    opacity: 1 !important;
    width: 100%;
    height: auto;
    display: block;
  }

  .sony-room-caption {
    padding: 24px var(--margin) 0 var(--margin);
  }

  .sony-room-caption p {
    font-size: clamp(18px, 5vw, 24px);
  }

  .sony-billboards,
  .sony-heathrow {
    padding: 0;
  }

  /* Meta — small like project card, horizontal */
  .sony-meta {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    padding: 40px var(--margin) 120px var(--margin);
  }

  .sony-meta-label {
    font-size: 11px;
  }

  .sony-meta-value {
    font-size: 10px;
  }

}