/* Event Intro */
:root{
    --ei-bg: #fff5ea;
    --ei-text:#2b2b2b;
    --ei-muted:#6f6f6f;
    --ei-accent:#af4c0f;
    --ei-accent-hover:#a85620;
}

.event-intro{
    background: var(--ei-bg);
    padding: 2.5rem 1rem 3rem;
}

.event-intro__wrap{
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    color: var(--ei-text);
}

/* Heading (date + location) */
.event-intro__heading{
    margin-bottom: 1rem;
}

.event-intro__date{
    font-weight: 700;
    font-size: clamp(1.1rem, 2.8vw, 1.4rem);
}

.event-intro__location{
    font-weight: 600;
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    margin-top: .25rem;
}

.event-intro__text{
    max-width: 700px;
    margin: 0.75rem auto 1.5rem;
    font-size: 1.25rem;
    color: var(--ei-muted);
}

.event-intro__text p{
    margin: .65rem 0;
}

.event-intro__actions{
    display: flex;
    grid-auto-flow: row;
    justify-content: center;
    gap: .75rem;
}

.btn-pill{
    display: inline-grid;
    width: 100%;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    background: var(--ei-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: 0 2px 0 rgba(0,0,0,.07);
    transition: transform .05s ease, background .15s ease;
}

.btn-pill:hover{ background: var(--ei-accent-hover); }
.btn-pill:active{ transform: translateY(1px); }


.tiles-grid { padding: 1.5rem 0 2.25rem; }
.tiles-grid__wrap {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width: 640px){ .tiles-grid__wrap { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .tiles-grid__wrap { grid-template-columns: repeat(3,1fr); } }

.tile {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 16 / 10;
    text-decoration: none;
}
.tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transform: scale(1.02); transition: transform .35s ease;
}
.tile__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.45));
    transition: opacity .35s ease;
}
.tile__label {
    position: absolute; inset: auto 0 10%; text-align: center;
    color: #fff; font-weight: 700; line-height: 1.25; font-size: clamp(1rem, 2.2vw, 1.35rem);
    padding: 0 .75rem; text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.tile:focus-visible { outline: 3px solid #ffcc66; outline-offset: 3px; }
.tile:hover img { transform: scale(1.06); }
.tile:hover .tile__overlay { opacity: .9; }

.tiles-grid__cta { text-align: center; margin-top: 1.25rem; }
.btn { display: inline-block; padding: .65rem 1.1rem; border-radius: 999px; font-weight: 700; }
.btn--primary { background: #9c5e2b; color: #fff; }
.btn--primary:hover { filter: brightness(1.05); }

/* === Rollover copy (scoped to tiles-grid) === */
.tiles-grid .tile { position: relative; }

.tiles-grid .tile__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;         /* don't block clicks */
  /* keep your existing gradient; we just enhance it on hover */
}

.tiles-grid .tile__hover {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: auto;
  bottom: auto;
  color: #fff;
  text-align: left;
  line-height: 1.35;
  font-size: .95rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  z-index: 2;
}
/* ensure white even inside <a> */
.tiles-grid .tile__hover, 
.tiles-grid .tile__hover p, 
.tiles-grid .tile__hover a { color: #fff; }

/* Hover effects (add to your existing ones, don't replace) */
.tiles-grid .tile:hover img {
  /* keep your scale; add blur + darken for the “rollover” feel */
  filter: blur(3px) brightness(.75);
  transform: scale(1.06);
}

.tiles-grid .tile:hover .tile__overlay {
  /* slightly stronger overlay on hover (works with your gradient) */
  background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.6));
}

.tiles-grid .tile:hover .tile__hover {
  opacity: 1;
  transform: translateY(0);
}

/* Non-link tiles should behave the same */
.tiles-grid .tile--nolink:hover img { filter: blur(3px) brightness(.75); transform: scale(1.06); }
.tiles-grid .tile--nolink:hover .tile__overlay { background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.6)); }
.tiles-grid .tile--nolink:hover .tile__hover { opacity: 1; transform: translateY(0); }

/* Full-bleed hero that escapes container width */
.hero-bleed{
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    overflow: hidden;
    /* pick a height: use aspect-ratio for smooth rendering */
    aspect-ratio: 16 / 6;
}
.hero-bleed img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.festival-intro {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1em;
}

.about-final-section .festival-intro {
    font-size: 1.35rem;
}