/* =========================
   Ol’ MacDonald’s Festival 2026
   Clean page stylesheet (cleaned + de-duped)
   ========================= */

:root{
  --bg: #ffffff;
  --text: #151515;
  --muted: #5d5d5d;

  --red: #A71E22;
  --red-dark: #A71E22;
  --accent: #b0171e;

  --dark: #1b1b1b;

  --wrap: 1100px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

/* Global: remove tracking everywhere */
h1, h2, h3, h4,
p, a, span, li{
  letter-spacing: normal;
}

/* =========================
   Global Typography Scale
   (Based on 1920px mockup)
   ========================= */

h2{
  font-size: clamp(2rem, 2.1vw, 2.5rem); /* 32px → 40px */
  line-height: 1.15;
  font-weight: 700;
}

h3{
  font-size: clamp(1.4rem, 1.5vw, 1.75rem); /* ~22px → 28px */
  line-height: 1.25;
  font-weight: 700;
}

p{
  font-size: clamp(1rem, 1.05vw, 1.25rem); /* 16px → 20px (caps at 1.25rem) */
  line-height: 1.65;
  font-weight: 500;
}

h4{
  font-size: clamp(1.15rem, 1.25vw, 1.5rem); /* ~18px → 24px */
  line-height: 1.3;
  font-weight: 700;
}

/* =========================
   Media reset: NO borders, NO rounding, NO shadows
   ========================= */

img{
  max-width:100%;
  display:block;
  height:auto;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

.wrap{
  width: min(var(--wrap), calc(100% - 2rem));
  margin-inline: auto;
}

/* 4px light divider used between sections */
.section-divider{
  height: 4px;
  background: #EEEEEE;
  width: min(var(--wrap), calc(100% - 2rem));
  margin: 3rem auto;
}

/* 40px red divider between schedule and tickets */
.section-divider--red{
  height: 40px;
  width: 100%;
  background: #A71E22;
}

/* =========================
   Topbar
   ========================= */

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--red);
  color: #fff;
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: .85rem 0;
}

.topbar__brand{
  font-weight: 700;
  white-space: nowrap;
}

.topbar__nav{
  display:flex;
  gap: 1.1rem;
  align-items:center;
}

.topbar__nav a{
  font-weight: 600;
  opacity: .95;
}

.topbar__nav a:hover{
  opacity: 1;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,.65);
  padding-bottom: 2px;
}

@media (max-width: 780px){
  .topbar__nav{ display:none; }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
}

.btn--small{ padding:.6rem .9rem; font-size:.95rem; }

.btn--ghost{
  border-color: rgba(255,255,255,.35);
  color:#fff;
  background: rgba(255,255,255,.08);
}

.btn--ghost:hover{
  text-decoration:none;
  background: rgba(255,255,255,.14);
}

/* =========================
   Hero – Logo version
   ========================= */

.hero{
  position: relative;
  background: var(--red-dark);
  overflow: hidden;
}

.hero__media{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.50) 0%,
      rgba(0,0,0,.22) 55%,
      rgba(0,0,0,.28) 100%
    ),
    url("../assets/images/festival2026/festival-banner.jpg")
      center / cover
      no-repeat;
  z-index: 0;
}

.hero__content{
  position: relative;
  z-index: 1;
  padding: 3.5rem 0 3.2rem;
  display: flex;
  justify-content: center;
}

.hero__lockup--logo{
  text-align: center;
  padding: 0;
  background: none;
}

.hero__logo{
  display: block;
  margin: 0 auto .85rem;
  width: min(620px, 90vw);
  max-width: 100%;
  height: auto;
}

.hero__dates{
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.55vw, 1.875rem);
  line-height: 1.2;
  text-transform: none;
  color: #fff;
}

@media (max-width: 768px){
  .hero__content{ padding: 2.75rem 0 2.6rem; }
  .hero__logo{ width: min(460px, 92vw); }
}

/* =========================
   Sections
   ========================= */

.section{ padding: 3.2rem 0; }
.section--tight{ padding: 2.4rem 0; }

.section__head{ margin-bottom: 1.4rem; }

.section__head p{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
}

/* Underlined headings */
.section__head--underline h3{
  position: relative;
  display: inline-block;
  padding-bottom: .55rem;
  margin-top: 0;           /* ✅ remove the extra top spacing */
  margin-bottom: 0;        /* keeps the system tight/consistent */

  font-size: clamp(2rem, 2.1vw, 2.5rem);
  line-height: 1.15;
  font-weight: 700;
}

.section__head--underline h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 4px;
  background: var(--red);
}

/* Intro split */
.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items:start;
}

.split__text p{ margin:.75rem 0; color: var(--muted); }

@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; }
}

/* Welcome */
.welcome .split__text{ max-width: 58ch; }
.welcome h2{ margin-bottom: .6em; }
.welcome h3{ margin-bottom: .8em; }
.welcome p{ margin-bottom: 1em; }
.welcome h4{ margin-top: .5em; color: var(--red); text-transform: none; }
.welcome h4 a{ text-decoration: underline; }

/* =========================
   Kickoff (pixel match)
   ========================= */

.kickoff{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: .75rem;
}

.kickoff__col-divider{
  width: 1px;
  background: #EEEEEE;
  align-self: stretch;
}

.kickoff__item{
  display: grid;
  grid-template-columns: 181px 1px 1fr;
  align-items: center;
  gap: 1.25rem;
  padding: .25rem 0;
}

.kickoff__img{
  width: 181px;
  height: 202px;
  object-fit: cover;
}

.kickoff__divider{
  width: 1px;
  height: 170px;
  background: #EEEEEE;
}

.kickoff__title{
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
}

.kickoff__meta{
  margin: .35rem 0 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 1rem;
}

@media (max-width: 780px){
  .kickoff{
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
  .kickoff__col-divider{ display:none; }
}

/* =========================
   Headliners
   ========================= */

.cards{ display:grid; gap: 1rem; }
.cards--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 860px){
  .cards--2{ grid-template-columns: 1fr; }
}

.poster{ position:relative; overflow:hidden; background:#000; }

.poster img{
  width: 100%;
  aspect-ratio: 548 / 691;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

.poster__label{
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem 1.5rem 1.4rem; /* extra side padding prevents icon clip */
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: visible; /* key */
}

.poster__title{
  display:block;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 2.1vw, 2.5rem); /* 32px → 40px */
  line-height: 1.1;
}

.poster__meta{
  display:block;
  opacity: .9;
  font-weight: 600;
  font-size: 1rem;
  margin-top: .35rem;
}

.poster__song{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: .75rem;
  padding: .15rem .25rem;
  font-weight: 600;
  text-transform: uppercase;
  font-size: .95rem;
  color: #fff;
  overflow: visible;
  line-height: 1;
}

.poster__song:hover{ text-decoration: underline; }

.poster__yt{
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: block;
  object-fit: contain;
}

/* =========================
   Weekend Lineup
   ========================= */

.lineup-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .9rem;
}

.lineup{
  overflow:hidden;
  background:#fff;
  transition: none;
}

.lineup:hover{
  transform:none;
  box-shadow:none;
  text-decoration:none;
}

.lineup img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Text wrapper under lineup image */
.lineup__text{
  padding: .65rem .75rem .8rem;
}

.lineup__name{
  font-size: 22px;         /* design */
  font-weight: 700;
  text-transform: uppercase;
  color: #202020;
  line-height: 1.2;
}

.lineup__meta{
  margin-top: .25rem;
  font-size: 16px;         /* design */
  font-weight: 600;
  text-transform: uppercase;
  color: #626262;
  line-height: 1.2;
}

@media (max-width: 980px){
  .lineup-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .lineup-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* =========================
   Feature / Trevor section
   ========================= */

.feature{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items:center;
}

.feature__media img{
  width: 100%;
  aspect-ratio: 548 / 691;
  object-fit: cover;
}

@media (max-width: 860px){
  .feature{ grid-template-columns: 1fr; }
}

.feature__times{ margin-top: .75rem; }

.feature__time{
  margin: .25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text);
}

/* =========================
   Dark Schedule section
   ========================= */

.dark{
  background: var(--dark);
  color:#fff;
  padding: 3.2rem 0;
}

.section__head--dark p{ color: rgba(255,255,255,.78); }

.schedule{
  margin-top: 1.2rem;
  display:grid;
  gap: 2.25rem; /* more breathing room */
}

.schedule__day{
  margin-bottom: 2.5rem;
}

.schedule__day h4{
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 1rem;
}

.schedule__note{
  margin:0;
  color: rgba(255,255,255,.78);
}

.schedule__table{
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 1rem;
}

.row{
  display:grid;
  grid-template-columns: 110px 1fr 1.2fr;
  gap: .75rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.cell.time,
.cell.stage,
.cell.act{
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 720px){
  .row{ grid-template-columns: 90px 1fr; }
  .cell.act{ grid-column: 1 / -1; }
}




/* =========================
   What You Need To Know
   ========================= */

.info-list{
  margin-top: 2.5rem; /* design spacing */
  border-top: 1px solid rgba(0,0,0,.14);
}

.info-item{
  padding: 2.25rem 0; /* design spacing */
  border-bottom: 1px solid rgba(0,0,0,.14);
}

.info-item h4{
  margin: 0 0 1rem;
  font-weight: 700;
  text-transform: none;
}

/* ✅ Keep your 1.25rem body size here */
.info-item p{
  margin: 0;
  color: #666;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.65;
  max-width: 92ch;
}

.info-item a{
  color: var(--red);
  text-decoration: underline;
  font-weight: 700;
}

/* =========================
   Tickets (clean, NO absolute, NO clipping)
   ========================= */

/* Whole section has the background image */
.tickets{
  position: relative;
  color: #fff;

  /* background image lives here now */
  background: url("../assets/images/festival2026/ticket-banner.jpg") center / cover no-repeat;

  /* optional dark overlay so text stays readable */
}
.tickets::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index: 0;
}

/* IMPORTANT: do not clip children */
.tickets{ overflow: visible; }

/* We no longer need this bg div to control height */
.tickets__bg{
  display: none;
}

/* Content sits normally and the section grows with it */
.tickets__inner{
  position: relative;
  z-index: 1;
  padding: 3.2rem 0 2.75rem; /* adjust if you want tighter/looser */
}

/* Header centered (leave your typography alone) */
.tickets__header{
  text-align: center;
  max-width: 78ch;
  margin: 0 auto 2.2rem;
}

/* Cards: 3 across desktop */
.ticket-cards{
  width: min(920px, calc(100% - 2rem));
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;

  position: relative;
  z-index: 1;
}

/* Your card styling stays the same */
.ticket-card{
  background: #2C2C2C;
  border-radius: 10px;
  padding: 2.1rem 1.8rem 2rem;
  text-align: center;
  box-shadow: 0 16px 26px rgba(0,0,0,.25);
}
.ticket-card--featured{ background: #A71E22; }

/* Divider line inside card */
.ticket-card__rule{
  height: 1px;
  background: rgba(255,255,255,.35);
  margin: 1.25rem 0;
}

/* Price stays EXACTLY as you had it */
.ticket-card__price{
  margin: 0;
  font-family: "Anton", system-ui, sans-serif;
  font-size: 3.25rem !important;
  line-height: 1;
  letter-spacing: 0;
}
.ticket-card__price .currency{
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  vertical-align: top;
  margin-right: .2rem;
}

/* Fineprint BELOW tickets on white */
/* White strip removed so background image fills entire section */
.tickets__after{
  background: transparent; /* was #fff */
  padding: 1.4rem 0 2.2rem;
}

.tickets__fineprint{
  text-align: center;
  color: rgba(255,255,255,.9); /* white */
  font-size: 1rem;
  margin: 0;
}


/* Responsive: cards stack and NEVER get cut off */
@media (max-width: 900px){
  .tickets__inner{ padding: 2.6rem 0 2.4rem; }

  .ticket-cards{
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}