/* ============================================================
   PAGE — index.html (Homepage)
   Figma: node 106:2097, 1920 × 3950 px
   ============================================================ */

/* ============================================================
   HERO SECTION
   Full-width image 1920 × 1280 px.
   Listing carousel overlaid starting at y=509px.
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 850px;
  overflow: hidden;
  background-color: var(--color-bg-light);
  margin-top: calc(-1 * var(--header-height));
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   HERO CAROUSEL
   4 equal-column fluid cards.
   Left/right edges of the card row align with the page container
   (same horizontal inset as the site header: var(--space-lg) = 46px).
   Arrows (68px circles) are centered on the carousel edge — they sit
   half over the hero bg and half over the edge card.

   Arrow vertical center = half the square image height:
     card-width = (100vw - 2×46px - 3×32px) / 4
     image-center = card-width / 2 ≈ 12.5vw - 24px
   ============================================================ */
.hero__carousel {
  position: absolute;
  top: calc(var(--header-height) + (100% - var(--header-height)) / 2);
  transform: translateY(-50%);
  left: var(--space-lg);
  right: var(--space-lg);
  bottom: auto;
  display: flex;
  align-items: flex-start;
}

/* Clip container: sits between .hero__carousel and .hero__cards.
   overflow:hidden clips the card row; arrows stay outside, positioned
   absolutely relative to .hero__carousel. */
.hero__carousel-track {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.hero__cards {
  display: flex;
  gap: 32px;
  width: 100%;
  align-items: flex-start;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* >1600px: 4 cards, gap 32px, carousel inset 46px each side (92px total)
   card = (100vw − 92px − 3×32px) / 4 = 25vw − 47px */
@media (min-width: 1601px) {
  .hero-card {
    flex: 0 0 calc(25vw - 47px);
  }
}

.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 68px;
  height: 68px;
  padding: 0;
  border: none;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.hero__arrow:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

.hero__arrow svg {
  display: block;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

/* Arrows are centered on the carousel edge — left half over hero bg, right half over card */
.hero__arrow--prev {
  left: -34px;
}

.hero__arrow--next {
  right: -34px;
}

/* ============================================================
   ABOUT SECTION
   Red heading + divider + subtext.
   Figma y=1280–1901px (621px tall section).
   ============================================================ */
.section-about {
  padding: 68px var(--space-lg) var(--space-2xl);
  text-align: center;
}

.section-about__heading {
  font-size: var(--text-heading);
  font-weight: 300;
  color: var(--color-red);
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 24px;
}

.section-about__divider {
  margin: 0 auto 68px;
}

.section-about__text {
  font-size: var(--text-sub);
  font-weight: 300;
  color: var(--color-text-dark);
  text-align: center;
  line-height: 1.5;
  max-width: 1462px;
  margin-inline: auto;
}

/* ============================================================
   HISTORY / CONTENT SECTION
   Two-column layout with long-form text and one image.
   Container: x=368px, width=1182px within 1920px canvas.
   ============================================================ */
.section-history {
  padding: 0 var(--space-lg) var(--space-2xl);
}

.section-history__inner {
  display: grid;
  grid-template-columns: 573px 573px;
  gap: 36px;
  max-width: 1182px;
  margin-inline: auto;
}

.section-history__col {
  display: flex;
  flex-direction: column;
}

.section-history__text {
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-text-dark);
  line-height: 1.6;
}

.section-history__text p + p {
  margin-top: var(--space-md);
}

.section-history__image {
  display: block;
  width: 100%;
  max-width: 573px;
  height: 383px;
  object-fit: cover;
  margin-bottom: 36px;
  flex-shrink: 0;
}

.section-history__image--bottom {
  margin-top: 36px;
  margin-bottom: 0;
  flex: 1;
  min-height: 200px;
  height: auto;
}

/* ============================================================
   RESPONSIVE — Homepage
   ============================================================ */

/* Hero height formula: header_h + 2×83.5px spacing + card_width + body_h.
   Cards are square (aspect-ratio 1/1), so card_height = card_width + body.
   The centering formula (top: header + (100%−header)/2; transform: translateY(-50%))
   auto-adapts as long as the hero height is set correctly for each range.

   Ranges and their card widths:
     >1920px  : 25vw−47  gap=32px  header=130  body=120 → calc(25vw + 370px)
     1401-1600: 25vw−41  gap=24px  header=130  body=120 → calc(25vw + 376px)
     1025-1400: 25vw−41  gap=24px  header=100  body=120 → calc(25vw + 346px)
     769-1024 : 50vw−54  gap=16px  header=80   body=134 → calc(50vw + 327px)
     481-768  : 50vw−32  gap=16px  header=80   body=104 → calc(50vw + 319px)
     ≤767     : 100vw−48 gap=0     header=80   body=104 → calc(100vw + 303px) */

@media (min-width: 1921px) {
  .hero {
    height: calc(25vw + 370px);
  }
}

/* ≤1600px — large desktop (1401–1600px: header=130, card=25vw−41, body=120) */
@media (max-width: 1600px) {
  .hero {
    height: calc(25vw + 376px);
  }

  .hero__cards {
    gap: 24px;
  }

  .section-history__inner {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    gap: 36px;
  }

  .section-history__image {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 573 / 383;
  }

}

/* ≤1400px — header shrinks to 100px; adjust hero height to keep 83.5px spacing */
@media (max-width: 1400px) {
  .hero { height: calc(25vw + 346px); }
}

/* 1025–1600px: 4 cards, gap 24px, carousel inset 46px each side (92px total)
   card = (100vw − 92px − 3×24px) / 4 = 25vw − 41px */
@media (min-width: 1025px) and (max-width: 1600px) {
  .hero-card {
    flex: 0 0 calc(25vw - 41px);
  }
}

/* ≤1024px — hamburger range: 2-card carousel, vertically centred (header=80, card=50vw−54, body=134) */
@media (max-width: 1024px) {
  .hero {
    height: calc(50vw + 327px);
  }

  .hero__cards {
    gap: 16px;
  }

  /* Arrow center = half of full card (image + body): (50vw-54 + 134) / 2 = 25vw + 40px */
  .hero__arrow {
    width: 48px;
    height: 48px;
    top: calc(25vw + 40px);
  }

  .hero__arrow svg {
    width: 26px;
    height: 26px;
  }

  .hero__arrow--prev {
    left: -24px;
  }

  .hero__arrow--next {
    right: -24px;
  }

  .section-history__image {
    margin-bottom: 0; /* grid gap handles spacing */
  }

  .section-history__image--bottom {
    margin-top: 0;
  }

  .section-about {
    padding: 48px var(--space-lg) var(--space-xl);
  }

  .section-history {
    padding: 0 var(--space-lg) var(--space-xl);
  }

  .section-history__inner {
    grid-template-columns: 1fr;
    gap: var(--space-md); /* match paragraph spacing */
  }

  /* Dissolve column wrappers → their children become direct grid items */
  .section-history__col {
    display: contents;
  }

  /* Reorder: image-top → text-left → image-bottom → text-right */
  .section-history__image:not(.section-history__image--bottom) { order: 1; }
  .section-history__col:first-child .section-history__text     { order: 2; }
  .section-history__image--bottom                              { order: 3; }
  .section-history__col:last-child  .section-history__text     { order: 4; }
}

/* ≤768px — 2-card, smaller inset; hero height for card=50vw−32, body=104 */
@media (max-width: 768px) {
  .hero {
    height: calc(50vw + 319px);
  }

  .hero__carousel {
    left: var(--space-md);
    right: var(--space-md);
  }

  /* Full card center at space-md: (50vw-32 + 104) / 2 = 25vw + 36px */
  .hero__arrow {
    top: calc(25vw + 36px);
  }

  .section-about {
    padding: 40px var(--space-md) var(--space-xl);
  }

  .section-about__text {
    font-size: var(--text-nav);
  }

  .section-history {
    padding: 0 var(--space-md) var(--space-xl);
  }

  .section-history__image {
    aspect-ratio: 3 / 2;
  }
}

/* ≤767px — phones: 1-card carousel; hero height for card=100vw−48, body=104 */
@media (max-width: 767px) {
  .hero {
    height: calc(100vw + 303px);
  }

  /* Full card center 1-card space-md: (100vw-48 + 104) / 2 = 50vw + 28px */
  .hero__arrow {
    width: 36px;
    height: 36px;
    top: calc(50vw + 28px);
  }

  .hero__arrow svg {
    width: 20px;
    height: 20px;
  }

  .hero__arrow--prev {
    left: -18px;
  }

  .hero__arrow--next {
    right: -18px;
  }
}

/* ≤375px — small phone: tighter inset matches header sm-padding */
@media (max-width: 375px) {
  .hero__carousel {
    left: var(--space-sm);
    right: var(--space-sm);
  }

  /* Full card center 1-card space-sm: (100vw-32 + 91) / 2 = 50vw + 30px */
  .hero__arrow {
    top: calc(50vw + 30px);
  }

  .section-about {
    padding: 32px var(--space-sm) var(--space-lg);
  }

  .section-history {
    padding: 0 var(--space-sm) var(--space-lg);
  }
}