/* ==========================================================================
   KATARI JYOTHSNA - layout.css
   Containers, section shells, grid systems, bento, split layouts, marquee rail.
   ========================================================================== */

/* ------------------------------------------------------------ Containers */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - (var(--gutter) * 2), var(--container-narrow)); }
.container--wide   { width: min(100% - (var(--gutter) * 2), var(--container-wide)); }
.container--flush  { width: min(100% - (var(--gutter) * 2), 100%); }

/* -------------------------------------------------------------- Sections */
.section {
  position: relative;
  padding-block: var(--section-y);
  isolation: isolate;
}
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--alt { background: var(--bg-alt); }
.section--surface { background: var(--surface); }

.section > .container { position: relative; z-index: 1; }

/* Section header block: eyebrow + title + lede */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
  max-width: 72ch;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.section-head--split {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-xl);
  flex-wrap: wrap;
}
.section-head--split .section-head__text { max-width: 60ch; }
.section-head h2 { margin: 0; }

/* Rounded plum "slab" that a section can sit inside */
.slab {
  border-radius: clamp(var(--r-l), 3vw, 46px);
  overflow: hidden;
  position: relative;
}

/* ------------------------------------------------------------- Grid kit */
.grid {
  display: grid;
  gap: var(--grid-gap, clamp(1.15rem, 2.4vw, 2rem));
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 17rem)), 1fr)); }

/* Editorial split: text column + media column */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split--wide-media  { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--wide-text   { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--top { align-items: start; }
.split__media { position: relative; }
.split--reverse .split__media { order: -1; }

/* --------------------------------------------------------- Bento layout */
.bento {
  display: grid;
  gap: clamp(.85rem, 1.6vw, 1.35rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
}
.bento__cell { position: relative; overflow: hidden; }
.b-1 { grid-column: span 2; grid-row: span 2; }
.b-2 { grid-column: span 4; grid-row: span 2; }
.b-3 { grid-column: span 3; grid-row: span 2; }
.b-4 { grid-column: span 2; grid-row: span 3; }
.b-5 { grid-column: span 6; grid-row: span 2; }
.b-6 { grid-column: span 2; grid-row: span 2; }

/* -------------------------------------------------------- Sticky column */
.sticky-col {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  align-self: start;
}

/* --------------------------------------------------- Full-bleed breakout */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* --------------------------------------------------------- Marquee rail */
.marquee {
  --marquee-duration: 38s;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-right: clamp(1.5rem, 4vw, 4rem);
  min-width: 100%;
  animation: marquee-slide var(--marquee-duration) linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-strong);
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.marquee__item .dot {
  width: .32em; height: .32em;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.marquee__item--outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
}

/* Small text marquee (logos / venue names) */
.marquee--small .marquee__item {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  gap: clamp(1rem, 3vw, 2.5rem);
}

/* --------------------------------------------------- Horizontal scroller */
.h-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 26rem);
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block: .5rem 1.5rem;
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.h-scroll > * { scroll-snap-align: start; }

/* --------------------------------------------------------------- Ratios */
.ratio { position: relative; overflow: hidden; }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio--1x1  { aspect-ratio: 1 / 1; }
.ratio--4x5  { aspect-ratio: 4 / 5; }
.ratio--3x4  { aspect-ratio: 3 / 4; }
.ratio--4x3  { aspect-ratio: 4 / 3; }
.ratio--16x9 { aspect-ratio: 16 / 9; }
.ratio--21x9 { aspect-ratio: 21 / 9; }
.ratio--2x3  { aspect-ratio: 2 / 3; }

/* ---------------------------------------------------------- Page header */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 9vw, 8rem));
  padding-bottom: clamp(3rem, 7vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
  max-width: 30ch;
}
.page-hero__inner--wide { max-width: 24ch; }
.page-hero h1 { font-size: var(--step-7); }
.page-hero .lede { max-width: 52ch; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb__sep { opacity: .5; }
.breadcrumb [aria-current] { color: var(--gold); }