/* ============================================================
   FREEDOM CUP FEST — PHOTO LAYER
   Editorial image treatments — bento gallery, photo bgs,
   day-card photo strips, venue card photo bg, flagship render.
   ============================================================ */

/* ---------- Shared photo treatment ---------- */
.photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}

/* Grain texture overlay used across photo tiles */
.tile-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.018) 0,
      rgba(255,255,255,0.018) 1px,
      transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
  z-index: 3;
}

/* ============================================================
   EXPERIENCE CARDS — selective photo backgrounds
   ============================================================ */
.expN-card.has-bg {
  background: var(--black);
  border-color: var(--line);
  overflow: hidden;
  isolation: isolate;
}
.expN-card.has-bg .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.expN-card.has-bg .bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.6) saturate(1.1);
}
.expN-card.has-bg .bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,13,0.2) 0%, rgba(10,10,13,0.7) 60%, rgba(10,10,13,0.95) 100%);
}
.expN-card.has-bg > * { position: relative; z-index: 2; }
.expN-card.has-bg .t { color: var(--white); }
.expN-card.has-bg .d { color: rgba(255,255,255,0.85); }

/* Tinted variants — preserve the section's red/blue feature colors */
.expN-card.has-bg.feat-red .bg img { filter: brightness(0.55) saturate(1.4); }
.expN-card.has-bg.feat-red .bg::after {
  background:
    linear-gradient(180deg, rgba(255,36,54,0.55) 0%, rgba(193,21,40,0.85) 60%, rgba(140,15,28,0.96) 100%);
}
.expN-card.has-bg.feat-blue .bg img { filter: brightness(0.6) saturate(1.3); }
.expN-card.has-bg.feat-blue .bg::after {
  background:
    linear-gradient(180deg, rgba(44,76,255,0.5) 0%, rgba(28,48,184,0.85) 60%, rgba(18,32,140,0.96) 100%);
}
.expN-card.has-bg:hover .bg img { transform: scale(1.04); transition: transform 0.7s cubic-bezier(0.22,0.8,0.36,1); }

/* ============================================================
   GALLERY — "Inside The Kompound" bento mosaic
   ============================================================ */
.gallN {
  padding: 120px 0 120px;
  background: var(--black);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.gallN::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 35% at 80% 0%, rgba(44,76,255,0.12), transparent 70%),
    radial-gradient(40% 35% at 10% 100%, rgba(255,36,54,0.14), transparent 70%);
  pointer-events: none;
}
.gallN > .wrap { position: relative; z-index: 2; }

.gallN-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 150px;
  gap: 8px;
}

/* Tile sizes */
.tile-stage   { grid-column: span 7; grid-row: span 3; }    /* big hero */
.tile-cocktail{ grid-column: span 5; grid-row: span 2; }
.tile-honey   { grid-column: span 5; grid-row: span 1; }
.tile-flower  { grid-column: span 5; grid-row: span 2; }
.tile-redcorr { grid-column: span 4; grid-row: span 2; }
.tile-rooftop { grid-column: span 8; grid-row: span 2; }
.tile-greenc  { grid-column: span 4; grid-row: span 2; }
.tile-elevbar { grid-column: span 4; grid-row: span 2; }
.tile-magbar  { grid-column: span 4; grid-row: span 2; }
.tile-redroom { grid-column: span 4; grid-row: span 2; }
.tile-collage { grid-column: span 4; grid-row: span 2; }
.tile-deck    { grid-column: span 8; grid-row: span 2; }
.tile-greenery { grid-column: span 4; grid-row: span 2; }
.tile-stairs  { grid-column: span 4; grid-row: span 2; }
.tile-crowd   { grid-column: span 4; grid-row: span 2; }

.gtile {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  cursor: default;
}
.gtile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22,0.8,0.36,1);
  filter: saturate(1.08) contrast(1.06);
}
.gtile:hover img { transform: scale(1.06); }
.gtile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.0) 40%,
    rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.gtile .gtile-num {
  position: absolute;
  top: 14px; left: 18px;
  z-index: 3;
  font-family: 'Sharp Grotesk', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}
/* Pill variant — for tiles where the eyebrow sits over busy/bright imagery */
.gtile .gtile-num.pill {
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
}
.gtile .gtile-cap {
  position: absolute;
  bottom: 16px; left: 18px; right: 18px;
  z-index: 3;
  font-family: 'Sharp Grotesk BI', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.gtile .gtile-cap.sm,
.gtile .gtile-cap.lg { font-size: 22px; }

/* Featured hero tile gets a larger caption since the photo is much bigger */
.gtile.tile-stage .gtile-cap,
.gtile.tile-rooftop .gtile-cap,
.gtile.tile-deck .gtile-cap { font-size: 40px; line-height: 0.95; }
.gtile .gtile-cap .red { color: var(--red); }
.gtile .gtile-cap .blue { color: var(--blue); }
.gtile .gtile-cap em { font-style: italic; color: var(--red); }

/* Tile decorations — a glowing dot like elsewhere on the site */
.gtile .gtile-tag {
  position: absolute;
  bottom: 16px; right: 18px;
  z-index: 3;
  font-family: 'Sharp Grotesk', sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--white);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gtile .gtile-tag::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--red);
}
.gtile.tint-red::after {
  background: linear-gradient(180deg,
    rgba(255,36,54,0.15) 0%,
    rgba(0,0,0,0.0) 40%,
    rgba(0,0,0,0.85) 100%);
}
.gtile.tint-blue::after {
  background: linear-gradient(180deg,
    rgba(44,76,255,0.15) 0%,
    rgba(0,0,0,0.0) 40%,
    rgba(0,0,0,0.85) 100%);
}

/* ============================================================
   FLAGSHIP — render + content reflow
   ============================================================ */
.flagN-grid.with-render {
  grid-template-columns: 1.05fr 1fr;
  gap: 50px;
  align-items: stretch;
}
.flagN-render {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  background: var(--black);
  align-self: stretch;
  min-height: 480px;
}
.flagN-render img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(1.08);
}
.flagN-render-cap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
  font-family: 'Sharp Grotesk', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  z-index: 2;
}
.flagN-render-cap em { color: var(--red); font-style: normal; }
.flagN-render::before {
  content: 'CONCEPT';
  position: absolute;
  top: 18px; left: 18px;
  z-index: 2;
  background: var(--black);
  color: var(--white);
  padding: 6px 12px;
  font-family: 'Sharp Grotesk', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.2);
}
/* Bullets list when paired with render — show as compact inline grid */
.flagN-includes.compact {
  margin-top: 32px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.flagN-includes.compact li {
  font-size: 12px;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.flagN-includes.compact li:nth-last-child(-n+2) { border-bottom: none; }
.flagN-includes.compact li::before { top: 14px; }

/* ============================================================
   LINEUP — day cards photo strip
   ============================================================ */
.lineupN-day {
  position: relative;
  overflow: hidden;
}
.lineupN-day .day-photo {
  position: relative;
  width: calc(100% + 56px);
  height: 140px;
  margin: -36px -28px 22px;
  overflow: hidden;
}
.lineupN-day .day-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.65) saturate(1.05) contrast(1.05);
}
.lineupN-day .day-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,13,0) 0%, rgba(10,10,13,0.85) 100%);
}
.lineupN-day .day-photo .badge {
  position: absolute;
  top: 12px; left: 14px;
  z-index: 2;
  font-family: 'Sharp Grotesk', sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  padding: 5px 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ============================================================
   VENUE CARDS — photo backgrounds
   ============================================================ */
.venueN-card.has-photo { overflow: hidden; }
.venueN-card.has-photo .vc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.venueN-card.has-photo .vc-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(1.15);
}
.venueN-card.partake.has-photo .vc-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,36,54,0.55) 0%, rgba(193,21,40,0.75) 50%, rgba(140,15,28,0.92) 100%);
}
.venueN-card.elevated.has-photo .vc-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,28,0.4) 0%, rgba(15,15,22,0.85) 70%, rgba(10,10,13,0.96) 100%);
}
.venueN-card.address.has-photo .vc-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(44,76,255,0.55) 0%, rgba(28,48,184,0.85) 60%, rgba(18,32,140,0.96) 100%);
}
.venueN-card.has-photo > * { position: relative; z-index: 2; }

/* ============================================================
   CLOSER — atmospheric backdrop
   ============================================================ */
.closerN.has-bg .closerN-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.closerN.has-bg .closerN-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.3) saturate(0.85) contrast(1.05);
}
.closerN.has-bg .closerN-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(10,10,13,0.4), rgba(10,10,13,0.96) 80%),
    linear-gradient(180deg, rgba(10,10,13,0.4) 0%, rgba(10,10,13,0.9) 100%);
}
.closerN.has-bg .closerN-inner { z-index: 2; }

/* ============================================================
   PHOTO MARQUEE — replaces text marquee variant
   ============================================================ */
.mqN.photo-mq {
  background: var(--black);
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  height: 140px;
  display: flex;
  align-items: center;
}
.mqN.photo-mq .mqN-track {
  gap: 8px;
  animation-duration: 60s;
}
.mqN.photo-mq .pmq-item {
  position: relative;
  flex: 0 0 200px;
  height: 116px;
  overflow: hidden;
}
.mqN.photo-mq .pmq-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
}
.mqN.photo-mq .pmq-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
}
.mqN.photo-mq .pmq-item .pmq-cap {
  position: absolute;
  bottom: 8px; left: 10px;
  font-family: 'Sharp Grotesk', sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  z-index: 2;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .gallN { padding: 80px 0 80px; }
  .gallN-grid { grid-auto-rows: 130px; }
  .tile-stage { grid-column: span 12; grid-row: span 3; }
  .tile-cocktail, .tile-flower, .tile-rooftop { grid-column: span 12; grid-row: span 2; }
  .tile-honey, .tile-redcorr, .tile-greenc, .tile-elevbar, .tile-magbar, .tile-redroom, .tile-collage, .tile-greenery, .tile-stairs, .tile-crowd { grid-column: span 6; grid-row: span 2; }
  .tile-deck { grid-column: span 12; grid-row: span 2; }
  .flagN-grid.with-render { grid-template-columns: 1fr; gap: 28px; }
  .flagN-render { min-height: 320px; max-height: 420px; }
}

@media (max-width: 860px) {
  .gallN { padding: 60px 0; }
  .gallN-grid { grid-auto-rows: 120px; gap: 6px; }
  .gtile .gtile-cap { font-size: 18px; }
  .gtile .gtile-cap.sm,
  .gtile .gtile-cap.lg { font-size: 18px; }
  .gtile.tile-stage .gtile-cap { font-size: 28px; }
  .gtile.tile-rooftop .gtile-cap { font-size: 26px; }
  .gtile.tile-deck .gtile-cap { font-size: 26px; }
  .gtile .gtile-num { font-size: 9px; letter-spacing: 0.2em; top: 12px; left: 14px; }
  .gtile .gtile-tag { font-size: 8px; letter-spacing: 0.18em; bottom: 14px; right: 14px; }

  /* Day-photo strip — match new lineup-day padding (32 22) */
  .lineupN-day .day-photo {
    width: calc(100% + 44px);
    height: 130px;
    margin: -32px -22px 20px;
  }

  /* Experience card photo bg — stretch nicely at 1col */
  .expN-card.has-bg { min-height: 240px; }

  /* Venue card photo bg — keep content readable */
  .venueN-card.has-photo { min-height: 360px; }

  /* Flagship */
  .flagN-render { min-height: 260px; max-height: 360px; }
  .flagN-render::before { font-size: 9px; padding: 5px 10px; top: 14px; left: 14px; }
  .flagN-render-cap { font-size: 9px; padding: 12px 14px; }
}

@media (max-width: 700px) {
  .gallN-grid { grid-auto-rows: 110px; gap: 6px; }
  .tile-stage { grid-row: span 3; }
  .tile-cocktail, .tile-flower, .tile-rooftop, .tile-honey, .tile-redcorr, .tile-greenc, .tile-elevbar, .tile-magbar, .tile-redroom, .tile-collage, .tile-deck, .tile-greenery, .tile-stairs, .tile-crowd { grid-column: span 12; grid-row: span 2; }
  .gtile .gtile-cap { font-size: 17px; }
  .gtile .gtile-cap.sm,
  .gtile .gtile-cap.lg { font-size: 17px; }
  .gtile.tile-stage .gtile-cap { font-size: 24px; }
  .gtile.tile-rooftop .gtile-cap { font-size: 22px; }
  .gtile.tile-deck .gtile-cap { font-size: 22px; }
}

@media (max-width: 520px) {
  .gallN-grid { grid-auto-rows: 100px; }
  .tile-stage { grid-row: span 3; }
  .lineupN-day .day-photo {
    width: calc(100% + 36px);
    height: 110px;
    margin: -28px -18px 18px;
  }
  .lineupN-day .day-photo .badge { font-size: 8px; letter-spacing: 0.16em; top: 10px; left: 10px; padding: 4px 8px; }
  .expN-card.has-bg { min-height: 200px; }
  .venueN-card.has-photo { min-height: 320px; }
  .flagN-render { min-height: 220px; max-height: 280px; }
}