/* HOMEPAGE */

.hero{ position:relative; height: min(88vh, 900px); min-height:520px; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media .ph{ height:100%; }
.hero__content{
  position:absolute; left:0; right:0; bottom: var(--sp-9);
  display:flex; flex-direction:column; align-items:flex-start;
}
.hero__eyebrow{ color: var(--tt-white); margin-bottom: var(--sp-3); }
.hero__eyebrow::before{ content:"— "; color: var(--tt-red); }
.hero__headline{ color: var(--tt-white); max-width:16ch; }
.hero__copy{ color: var(--tt-gray-200); max-width:42ch; margin-top: var(--sp-4); }
.hero__actions{ display:flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap:wrap; }

/* .section-head lives in components.css — shared with the Marvel hub page. */

.fyg-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
@media(min-width:640px){ .fyg-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media(min-width:1024px){ .fyg-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 1fr; } }
.fyg-grid__item:first-child{ grid-column: span 2; grid-row: span 2; }
@media(max-width:639px){ .fyg-grid__item:first-child{ grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; } }

.custom-band{ position:relative; min-height:480px; display:flex; align-items:center; overflow:hidden; }
.custom-band .ph{ position:absolute; inset:0; }
.custom-band__content{ position:relative; z-index:1; padding-block: var(--sp-8); }

.universe-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
@media(min-width:640px){ .universe-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media(min-width:1024px){ .universe-grid{ grid-template-columns: repeat(8, minmax(0,1fr)); } }
.universe-tile{ position:relative; aspect-ratio:1/1; overflow:hidden; display:block; }
.universe-tile .ph{ position:absolute; inset:0; transition: transform var(--dur-slow) var(--ease); }
.universe-tile:hover .ph{ transform: scale(1.06); }
.universe-tile span{
  position:absolute; left:0; right:0; bottom:0; padding: var(--sp-3);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
  color:var(--tt-white); font-family:var(--font-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.04em; font-size:0.82rem; z-index:1;
}

.drop-teaser{ display:grid; grid-template-columns: minmax(0,1fr); background: var(--tt-black); }
.drop-teaser__media{ position:relative; aspect-ratio: 16/9; }
.drop-teaser__media .ph{ position:absolute; inset:0; }
.drop-teaser__content{ padding: var(--sp-6) var(--sp-5); }
@media(min-width:640px){ .drop-teaser__content{ padding: var(--sp-7); } }
.drop-teaser__content .t-h1, .drop-teaser__content .t-label{ color: var(--tt-white); }
.drop-teaser__content .t-label{ color: var(--tt-red); }
@media(min-width:900px){
  .drop-teaser{ grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
  .drop-teaser__media{ aspect-ratio: auto; }
}