/* ==========================================================================
   EVENT PAGE (for punters) - e.g. /eatz-beatz-halloween-2026

   Styled like the Eatz & Beatz poster (Max's mock-up, 14 Oct 2026):
   orange sunset, cream cards, chunky poster lettering, a lime sticker.
   At the bottom: the PRINT styles - the page prints as an A4 mini magazine.
   ========================================================================== */

.event-page{
    --ep-ink:#1d0d02;           /* near-black brown, the poster's text   */
    --ep-cream:#fff4e6;         /* the cards                              */
    --ep-orange:#f25a0c;        /* labels, arrows                         */
    --ep-lime:#d6f53b;          /* the sticker                            */
    --ep-poster-font:'Bowlby One', 'Arial Black', Impact, sans-serif;
    --ep-hand-font:'Permanent Marker', 'Segoe Print', cursive;

    color:var(--ep-ink);
    background:
        radial-gradient(circle at 78% 6%, rgba(255,226,140,.75), transparent 28%),
        linear-gradient(180deg, #f9b45a 0%, #f39243 30%, #ee7a35 60%, #e8662c 100%);
    background-attachment:fixed;
}

/* ---- the cover ---- */
.ep-hero-inner{
    max-width:var(--sg-max-width);
    margin:0 auto;
    padding:calc(var(--sg-nav-height, 88px) + 34px) 6% 40px;
    display:grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
    gap:40px;
    align-items:center;
}

.ep-kicker{
    font-family:var(--sg-font-accent);
    font-weight:bold;
    font-size:.78rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    margin:0 0 12px;
}

.ep-title{
    font-family:var(--ep-poster-font);
    font-weight:400;
    font-size:clamp(3.4rem, 9vw, 6.6rem);
    line-height:.88;
    text-transform:uppercase;
    color:#fffaf2;
    -webkit-text-stroke:3px var(--ep-ink);
    paint-order:stroke fill;
    text-shadow:6px 6px 0 var(--ep-ink);
    margin:0;
}

.ep-sticker{
    display:inline-block;
    font-family:var(--ep-hand-font);
    font-size:1.5rem;
    line-height:1;
    text-transform:uppercase;
    background:var(--ep-lime);
    padding:12px 18px;
    border-radius:8px;
    transform:rotate(-6deg);
    margin:-6px 0 18px 10px;
    box-shadow:3px 3px 0 var(--ep-ink);
}

.ep-intro{
    font-size:1.12rem;
    line-height:1.55;
    max-width:520px;
    margin:0 0 18px;
}

.ep-facts{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    max-width:520px;
}

.ep-facts li{
    background:var(--ep-cream);
    border-radius:10px;
    padding:10px 14px;
    font-weight:bold;
    box-shadow:0 4px 0 rgba(29,13,2,.25);
}

.ep-facts b{
    display:block;
    font-family:var(--sg-font-accent);
    font-size:.7rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ep-orange);
}

.ep-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

.ep-btn{
    font:bold .95rem var(--sg-font);
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#fff;
    background:var(--ep-ink);
    border:2px solid var(--ep-ink);
    border-radius:999px;
    padding:14px 24px;
    cursor:pointer;
}

.ep-btn:hover,
.ep-btn:focus-visible{ background:#3a1a05; }

.ep-btn-ghost{ background:transparent; color:var(--ep-ink); }
.ep-btn-ghost:hover,
.ep-btn-ghost:focus-visible{ background:rgba(29,13,2,.1); }

.ep-share-note{ margin:10px 0 0; font-size:.9rem; }

.ep-poster{
    justify-self:center;
    display:block;
    width:min(100%, 420px);
    border-radius:14px;
    overflow:hidden;
    border:4px solid var(--ep-ink);
    box-shadow:10px 10px 0 var(--ep-ink);
    transform:rotate(2deg);
}

.ep-poster img{ display:block; width:100%; height:auto; }

/* ---- sections ---- */
.ep-section{
    max-width:var(--sg-max-width);
    margin:0 auto;
    padding:44px 6% 0;
}

.ep-page:last-of-type .ep-section:last-of-type{ padding-bottom:30px; }

.ep-head{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:8px 24px;
    margin-bottom:18px;
}

.ep-h2{
    font-family:var(--ep-poster-font);
    font-weight:400;
    font-size:clamp(1.9rem, 4.2vw, 3rem);
    line-height:.95;
    text-transform:uppercase;
    margin:0 0 18px;
}

.ep-head .ep-h2{ margin:0; }

.ep-strap{
    font-family:var(--sg-font-accent);
    font-weight:bold;
    font-size:.78rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    margin:0 0 6px;
}

.ep-strap i{ font-style:normal; color:#fff; margin:0 6px; }

.ep-sub{ margin:14px 0 0; font-size:.95rem; }

/* ---- food vendor cards ---- */
.ep-food{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.ep-fv{
    position:relative;
    display:flex;
    min-height:118px;
    background:var(--ep-cream);
    border-radius:12px;
    overflow:hidden;
    color:var(--ep-ink);
    text-decoration:none;
    box-shadow:0 5px 0 rgba(29,13,2,.25);
    transition:transform .2s ease, box-shadow .2s ease;
}

a.ep-fv:hover,
a.ep-fv:focus-visible{ transform:translateY(-3px); box-shadow:0 8px 0 rgba(29,13,2,.3); }

.ep-fv-pic{
    flex:none;
    width:42%;
    max-width:210px;
    background-size:cover;
    background-position:center;
}

.ep-fv-pic-none{ background:linear-gradient(135deg, #ffb36b, #e8662c); }

.ep-fv-text{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    padding:12px 44px 12px 16px;
}

.ep-fv-text small{
    font-family:var(--sg-font-accent);
    font-weight:bold;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ep-orange);
}

.ep-fv-text b{
    font-family:var(--ep-poster-font);
    font-weight:400;
    font-size:1.2rem;
    line-height:1.05;
    text-transform:uppercase;
}

.ep-fv-text span{ font-size:.88rem; line-height:1.35; color:#4a2a12; }

.ep-fv-go{
    position:absolute;
    right:12px;
    bottom:12px;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--ep-orange);
    color:#fff;
    font-style:normal;
    font-weight:bold;
}

/* ---- market panel ---- */
.ep-market-panel{
    display:grid;
    grid-template-columns:minmax(270px, 1fr) minmax(0, 3fr);
    gap:28px;
    align-items:center;
}

/* "MARKET STALLS" with a short rule in front */
.ep-kicker-line::before{
    content:"";
    display:inline-block;
    width:34px;
    height:2px;
    background:var(--ep-ink);
    vertical-align:middle;
    margin-right:10px;
}

/* the big two-tone title with the lime swipe under it */
.ep-big{
    position:relative;
    font-family:var(--ep-poster-font);
    font-weight:400;
    font-size:clamp(1.8rem, 2.7vw, 2.3rem);
    line-height:.92;
    overflow-wrap:normal;   /* never split a word */
    word-break:normal;
    text-transform:uppercase;
    margin:0 0 26px;
}

.ep-big span{
    display:block;
    font-size:1.3em;
    color:#fffaf2;
    -webkit-text-stroke:2px var(--ep-ink);
    paint-order:stroke fill;
    text-shadow:4px 4px 0 var(--ep-ink);
}

.ep-big::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-16px;
    width:70%;
    height:10px;
    background:var(--ep-lime);
    border-radius:10px 4px 12px 3px;
    transform:rotate(-3deg);
}

.ep-market-strap{
    font-family:var(--sg-font-accent);
    font-weight:bold;
    font-size:.85rem;
    line-height:1.5;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin:0;
}

.ep-market{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));   /* 3 across so names fit on one line */
    gap:12px;
}

/* one tile: icon + heading in a row, then the vendors listed */
.ep-mt{
    background:var(--ep-cream);
    border-radius:12px;
    padding:14px 16px 16px;
    box-shadow:0 5px 0 rgba(29,13,2,.25);
}

.ep-mt-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:10px;
    margin-bottom:10px;
    border-bottom:1px solid #e9c9a6;
}

.ep-mt svg{ flex:none; width:34px; height:34px; color:var(--ep-ink); }

.ep-mt b{
    font-family:var(--ep-poster-font);
    font-weight:400;
    font-size:.8rem;
    line-height:1.1;
    text-transform:uppercase;
    min-width:0;
}

.ep-mt ul{ list-style:none; padding:0; margin:0; display:grid; gap:4px; }
/* one business per line, bold capitals (Max, 14 Oct 2026). A name too long
   for the tile ends in ... rather than wrapping onto a second line. */
.ep-mt li{
    font-size:.78rem;
    font-weight:bold;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#3a1e08;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ep-mt a{
    color:inherit;
    text-decoration:underline;
    text-decoration-color:var(--ep-orange);
    text-underline-offset:2px;
}

/* ---- what's on ---- */
.ep-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
}

.ep-card{
    background:var(--ep-cream);
    border-radius:12px;
    padding:18px;
    box-shadow:0 5px 0 rgba(29,13,2,.25);
}

.ep-icon{ font-size:1.8rem; display:block; margin-bottom:8px; }
.ep-card h3{ margin:0 0 4px; font-size:1.05rem; text-transform:uppercase; }
.ep-card p{ margin:0; line-height:1.45; color:#4a2a12; }

/* ---- entertainment ---- */
.ep-ent{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    grid-template-rows:auto auto auto;
    gap:14px;
}

.ep-ent-card{
    position:relative;
    border-radius:16px;
    padding:26px;
    box-shadow:0 6px 0 rgba(29,13,2,.3);
    overflow:hidden;
}

.ep-ent-card h3{
    font-family:var(--ep-poster-font);
    font-weight:400;
    text-transform:uppercase;
    line-height:.95;
    margin:0 0 12px;
    font-size:clamp(1.8rem, 3.6vw, 2.6rem);
}

.ep-ent-card p:last-child{ margin:0; font-size:1rem; line-height:1.45; }

/* the band - the headline act, dark like the poster's title box */
.ep-ent-band{
    grid-row:span 3;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:320px;
    color:#fffaf2;
    background:
        linear-gradient(180deg, rgba(29,13,2,.1) 0%, rgba(29,13,2,.85) 70%),
        var(--ep-art, radial-gradient(circle at 70% 20%, #ff9a3c 0%, #c43d00 45%, #1d0d02 100%));
    background-size:cover;
    background-position:center;
}

.ep-ent-band h3{ font-size:clamp(2.4rem, 5.4vw, 4rem); }
.ep-ent-band h3 span{ display:block; font-size:.55em; color:var(--ep-lime); margin-top:6px; }

.ep-ent-bingo{ background:var(--ep-lime); color:var(--ep-ink); }
.ep-ent-dress{ background:var(--ep-cream); color:var(--ep-ink); }
.ep-ent-treat{ background:#2a1204; color:#fffaf2; }   /* trick or treat - dark, spooky */
.ep-ent-treat h3{ color:var(--ep-orange); }

/* the 'cash prize' stamp */
.ep-ent-badge{
    position:absolute;
    top:18px;
    right:18px;
    font-family:var(--ep-hand-font);
    font-size:1.1rem;
    text-transform:uppercase;
    color:#fff;
    background:var(--ep-orange);
    padding:8px 14px;
    border-radius:8px;
    transform:rotate(6deg);
    box-shadow:3px 3px 0 var(--ep-ink);
}

/* ---- sponsors: the poster's logo strip on black ---- */
.ep-sponsors{
    background:#000;
    color:#fff;
    border-radius:16px;
    padding:22px 24px;
    text-align:center;
    box-shadow:0 6px 0 rgba(29,13,2,.3);
}

.ep-sponsors .ep-h2{ color:#fff; font-size:clamp(1.4rem, 3vw, 2rem); margin-bottom:12px; }
.ep-sponsor-logos{ display:grid; justify-items:center; gap:10px; }
.ep-sponsor-logos img{ display:block; height:auto; }
.ep-sponsor-logos img:first-child{ width:100%; }
.ep-sponsor-logos img:last-child{ width:68.8%; }   /* same logo height as row 1 */
.ep-sponsors p{ margin:12px 0 0; }
.ep-sponsors a{ color:var(--ep-lime); font-weight:bold; }

/* ---- times + good to know ---- */
.ep-two{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:30px;
}

.ep-times,
.ep-know{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:8px;
}

.ep-times li,
.ep-know li{
    background:var(--ep-cream);
    border-radius:10px;
    padding:12px 16px;
    box-shadow:0 4px 0 rgba(29,13,2,.2);
}

.ep-times b{ display:inline-block; min-width:80px; color:var(--ep-orange); }

.ep-print-only{ display:none; }

/* ---- tablet / phone ---- */
@media (max-width:900px){
    .ep-hero-inner{ grid-template-columns:1fr; gap:34px; }
    .ep-poster{ width:min(100%, 360px); }
    .ep-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .ep-market-panel{ grid-template-columns:1fr; }
    .ep-market{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .ep-ent{ grid-template-columns:1fr; }
    .ep-ent-band{ grid-row:auto; min-height:260px; }
}

@media (max-width:700px){
    .ep-food,
    .ep-two{ grid-template-columns:1fr; }
}

@media (max-width:600px){
    .ep-hero-inner{ padding:calc(var(--sg-nav-height, 78px) + 22px) 16px 30px; }
    .ep-section{ padding:36px 16px 0; }
    .ep-title{ -webkit-text-stroke:2px var(--ep-ink); text-shadow:4px 4px 0 var(--ep-ink); }
    .ep-fv{ min-height:104px; }
    .ep-fv-pic{ width:110px; }
    .ep-facts{ grid-template-columns:1fr 1fr; }
    .ep-btn{ flex:1; }
    .ep-ent-badge{ position:static; display:inline-block; margin-bottom:10px; }
}

/* ==========================================================================
   PRINT - an A4 mini magazine (Max, 14 Oct 2026)
   Page 1 cover (title + poster), page 2 food, page 3 market + what's on +
   good to know. Website menus, buttons and the footer are left off.
   In the print box: tick "Background graphics" if the orange is missing.
   ========================================================================== */
@media print{
    @page{ size:A4; margin:10mm; }

    html, body.event-page{
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
        background:#f39243 !important;   /* one solid orange, so no pale strip at the end */
        font-size:11pt;
    }

    #navbar, #footer, .navbar, .footer, .ep-actions, .ep-share-note{ display:none !important; }

    /* page 2 (food) and page 3 (market etc.) each start a new sheet */
    #ep-food, .ep-page-3, .ep-page-4{ break-before:page; }

    /* the cover fills the sheet: the words on top, the poster big below */
    .ep-hero-inner{ display:block; padding:2mm 0 0; }
    .ep-hero-body{ position:relative; }
    .ep-title{ font-size:60pt; }
    .ep-sticker{ position:absolute; top:12mm; right:8mm; margin:0; font-size:20pt; }
    .ep-intro{ max-width:none; margin:5mm 0 4mm; }
    .ep-facts{ max-width:none; grid-template-columns:repeat(4, 1fr); }
    .ep-poster{ width:112mm; margin:7mm auto 0; transform:none; box-shadow:5px 5px 0 var(--ep-ink); }

    .ep-section{ padding:6mm 0 0; max-width:none; }
    .ep-food{ grid-template-columns:1fr 1fr; gap:3mm; }
    .ep-fv{ min-height:30mm; box-shadow:none; border:1px solid #e9c9a6; break-inside:avoid; }
    .ep-fv-go{ display:none; }
    /* on paper: title across the top, then 4 tiles a row using the full width */
    .ep-market-panel{ grid-template-columns:1fr; gap:5mm; }
    .ep-big{ font-size:24pt; }
    .ep-market{ grid-template-columns:repeat(4, 1fr); gap:3mm; }
    .ep-mt{ box-shadow:none; padding:3mm 4mm; break-inside:avoid; }
    .ep-mt li{ font-size:7pt; }
    .ep-grid{ grid-template-columns:repeat(4, 1fr); }
    /* side by side on paper too (A4 is narrow enough to trip the tablet rule) */
    .ep-ent{ grid-template-columns:1.4fr 1fr; }
    .ep-ent-band{ grid-row:span 3; min-height:120mm; background:#2a1204; }
    .ep-ent-card h3{ font-size:20pt; margin-bottom:2mm; }
    .ep-ent-card{ padding:5mm 7mm; }
    .ep-ent-card{ padding:7mm; }
    .ep-ent-badge{ position:static; display:inline-block; margin-bottom:3mm; }
    /* page 4 holds market + good to know + sponsors, so keep it tight */
    .ep-page-4 .ep-section{ padding-top:4mm; }
    .ep-page-4 .ep-h2{ margin-bottom:3mm; }
    .ep-know{ grid-template-columns:1fr 1fr; gap:2mm; }
    .ep-know li{ padding:2.5mm 4mm; }
    /* sponsors fill the bottom third of the last A4 (Max, 14 Oct 2026) */
    .ep-page-4{ display:flex; flex-direction:column; min-height:276mm; }
    .ep-page-4 > .ep-section:has(.ep-sponsors){ margin-top:auto; }
    .ep-sponsors{ box-shadow:none; padding:5mm 6mm; break-inside:avoid; min-height:88mm; display:flex; flex-direction:column; justify-content:center; }
    .ep-sponsors .ep-h2{ font-size:20pt; margin-bottom:4mm; }
    .ep-sponsor-logos{ gap:3mm; }
    .ep-sponsor-logos img:first-child{ width:86%; }
    .ep-sponsor-logos img:last-child{ width:59.2%; }
    .ep-sponsors p{ margin-top:4mm; }
    .ep-print-url{ margin-top:4mm; }
    .ep-ent-card{ box-shadow:none; break-inside:avoid; }
    .ep-card, .ep-times li, .ep-know li, .ep-facts li{ box-shadow:none; break-inside:avoid; }
    .ep-mt a{ text-decoration:none; }

    .ep-print-only{ display:block; }
    .ep-print-url{
        margin:8mm 0 0;
        text-align:center;
        font-family:var(--sg-font-accent);
        font-weight:bold;
        letter-spacing:.1em;
    }
}