/* =========================================================
   Build 28.0.3.2
   Garage Guild forward visual correction
   IMPORTANT:
   This file intentionally layers AFTER garage-guild-experience.css.
   Do not replace the master Garage Guild stylesheet with this file.
   ========================================================= */

/* ---------- HERO SCALE / CONTAINMENT ---------- */

.mm-guild-hero {
  min-height: clamp(720px, 82vh, 940px) !important;
}

.mm-guild-hero__content {
  box-sizing: border-box !important;
  width: 100% !important;
  padding:
    clamp(8rem, 11vw, 11rem)
    clamp(28px, 4.5vw, 72px)
    clamp(3.5rem, 6vw, 5.5rem) !important;
}

.mm-guild-hero h1 {
  width: min(100%, 950px) !important;
  max-width: 950px !important;
  font-size: clamp(4.3rem, 7vw, 8rem) !important;
  line-height: .88 !important;
  letter-spacing: -.04em !important;
}

.mm-guild-hero p {
  max-width: 760px !important;
  font-size: clamp(1.2rem, 1.65vw, 1.55rem) !important;
  line-height: 1.55 !important;
}

/* ---------- SECTION SCALE ---------- */

.mm-guild-section {
  padding-block: clamp(5rem, 8vw, 8rem) !important;
}

.mm-guild-section h2 {
  font-size: clamp(3.2rem, 5.6vw, 6.4rem) !important;
  line-height: .92 !important;
}

.mm-guild-copy,
.mm-guild-section p {
  font-size: clamp(1.05rem, 1.4vw, 1.28rem) !important;
}

/* ---------- CINEMATIC VISUAL PROPORTIONS ---------- */

/*
 * The regression caused several Garage Guild visual modules to collapse
 * toward generic square/min-height treatments. Re-establish each visual
 * type's intended editorial proportion explicitly.
 */

.mm-guild-visual--wide {
  width: 100% !important;
  aspect-ratio: 16 / 8.5 !important;
  min-height: 0 !important;
  margin-top: clamp(2.5rem, 5vw, 5rem) !important;
}

.mm-guild-visual--heroism {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
}

.mm-guild-visual--central {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  min-height: 0 !important;
}

.mm-guild-visual--recruitment {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
}

.mm-guild-visual--hero,
.mm-guild-visual--rogue {
  aspect-ratio: auto !important;
  min-height: 100% !important;
}

/* Never force all Guild visuals to a generic square-like mobile height. */
.mm-guild-visual {
  height: auto !important;
}

/* ---------- PRIMARY LAYOUT PROPORTIONS ---------- */

.mm-guild-split {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
  gap: clamp(3rem, 6vw, 6.5rem) !important;
}

.mm-guild-heroism__grid {
  grid-template-columns: minmax(0,1fr) minmax(420px,.92fr) !important;
  gap: clamp(3rem, 5vw, 5.5rem) !important;
}

.mm-guild-central__layout {
  grid-template-columns: minmax(0,1.25fr) minmax(360px,.75fr) !important;
}

.mm-guild-recruitment__grid {
  grid-template-columns: minmax(0,1fr) minmax(420px,.95fr) !important;
  gap: clamp(3rem, 6vw, 6rem) !important;
  align-items: center !important;
}

/* ---------- SIX-ROLE SYSTEM ---------- */

.mm-guild-roles.mm-guild-roles--six {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  gap: 1px !important;
}

.mm-guild-roles.mm-guild-roles--six article {
  grid-column: auto !important;
  min-height: 230px !important;
  padding: clamp(1.25rem, 1.8vw, 1.7rem) !important;
}

.mm-guild-roles.mm-guild-roles--six h3 {
  font-size: clamp(1.45rem, 1.65vw, 2rem) !important;
}

.mm-guild-roles.mm-guild-roles--six p {
  font-size: .96rem !important;
  line-height: 1.5 !important;
}

/* ---------- MEDIUM ---------- */

@media (max-width: 1180px) {
  .mm-guild-hero h1 {
    max-width: 840px !important;
    font-size: clamp(4rem, 8vw, 6.8rem) !important;
  }

  .mm-guild-roles.mm-guild-roles--six {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }

  .mm-guild-roles.mm-guild-roles--six article {
    min-height: 210px !important;
  }
}

/* ---------- TABLET ---------- */

@media (max-width: 900px) {
  .mm-guild-hero {
    min-height: 760px !important;
  }

  .mm-guild-hero__content {
    padding:
      10rem
      32px
      3.5rem !important;
  }

  .mm-guild-hero h1 {
    max-width: 720px !important;
    font-size: clamp(3.8rem, 10vw, 6rem) !important;
  }

  .mm-guild-split,
  .mm-guild-heroism__grid,
  .mm-guild-central__layout,
  .mm-guild-recruitment__grid,
  .mm-guild-archive__grid,
  .mm-guild-year-zero__grid {
    grid-template-columns: 1fr !important;
  }

  .mm-guild-visual--heroism,
  .mm-guild-visual--recruitment {
    aspect-ratio: 16 / 10 !important;
  }

  .mm-guild-visual--central {
    aspect-ratio: 16 / 11 !important;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width: 700px) {
  .mm-guild-hero {
    min-height: 720px !important;
  }

  .mm-guild-hero__content {
    padding:
      9rem
      24px
      3rem !important;
  }

  .mm-guild-hero h1 {
    max-width: none !important;
    font-size: clamp(3.25rem, 14vw, 5rem) !important;
    line-height: .9 !important;
  }

  .mm-guild-hero p {
    font-size: 1.08rem !important;
  }

  .mm-guild-section {
    padding-block: 4.5rem !important;
  }

  .mm-guild-section h2 {
    font-size: clamp(2.8rem, 12vw, 4.4rem) !important;
  }

  .mm-guild-visual--wide,
  .mm-guild-visual--heroism,
  .mm-guild-visual--central,
  .mm-guild-visual--recruitment {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
  }

  .mm-guild-roles.mm-guild-roles--six {
    grid-template-columns: 1fr !important;
  }

  .mm-guild-roles.mm-guild-roles--six article {
    min-height: 0 !important;
  }
}