/* Events: wide layout, compact cards and ONE shared full event-details layout (popup + event page). */
.page-events .events-hero::before { background-image:url('../img/temp/events-banner.png'); background-position:center 44%; opacity:.68; }
.page-events .events-hero { background:#0b0d0e; }
.page-events .hero .hero-content { max-width:850px; }
.page-events .hero .page-hero-title { max-width:760px; }
.page-events .hero .section-subtitle { max-width:650px; font-size:18px; }
.page-events .section>.container>.section-title { font-family:Inter,sans-serif; font-size:38px!important; font-weight:800; text-transform:none; margin:0 0 12px; }
.page-events button:focus-visible,.page-events a:focus-visible { outline:2px solid var(--gold-light); outline-offset:4px; }
@media(max-width:620px) { .page-events .section>.container>.section-title { font-size:29px!important; } }

/* ===== Poster frame (cards + featured): whole poster visible ===== */
.page-events .poster-frame { aspect-ratio:16/9; min-width:0; overflow:hidden; }
.page-events .poster-frame img { display:block; width:100%; height:100%; object-fit:contain; }

/* ===== Featured card: poster ~47% / text ~53%, 22px between, text balanced against the poster height =====
   JS (events.html fitPreviews) fits the description to the available height. */
.page-events .featured-event { display:grid; grid-template-columns:47fr 53fr!important; column-gap:22px; align-items:stretch; margin-bottom:28px; border-color:#383b3d!important; background:#0c0e10!important; }
.page-events .featured-event .poster-frame { align-self:center; aspect-ratio:var(--fe-ar,1.7778); }
.page-events .featured-body { display:flex; flex-direction:column; justify-content:center; gap:var(--fe-gap,14px); padding:26px 30px 26px 0; min-width:0; }
.page-events .featured-body h2 { font-family:Inter,sans-serif; font-weight:800; letter-spacing:-.025em; text-transform:none; overflow-wrap:anywhere; margin:0; }
.page-events .featured-event .featured-body>h2 { font-size:clamp(28px,calc(2.4vw + 4px),34px); line-height:1.14; }
.page-events .featured-event .featured-body>.event-meta, .page-events .featured-event .featured-body>.event-preview,
.page-events .featured-event .featured-body>.event-buttons { margin:0; }
.page-events .featured-event .featured-body>.event-meta { margin-top:calc(var(--fe-gap,14px) * -.4); }
.page-events .featured-event .featured-body>.event-preview { font-size:16px; line-height:1.55; }
.page-events .featured-event .featured-body .event-buttons { margin-top:2px; }
@media(min-width:901px) {
  .page-events .featured-event[data-shape="mid"] { grid-template-columns:minmax(0,min(44%,540px)) 1fr!important; }
  .page-events .featured-event[data-shape="tall"] { grid-template-columns:minmax(0,min(40%,440px)) 1fr!important; }
}
@media(max-width:900px) {
  .page-events .featured-event { grid-template-columns:1fr!important; row-gap:0; }
  .page-events .featured-event .poster-frame { align-self:stretch; aspect-ratio:max(var(--fe-ar,1.7778),1.33); }
  .page-events .featured-body { padding:22px 24px; gap:14px; }
  .page-events .featured-event .featured-body>.event-meta { margin-top:-4px; }
}
@media(max-width:620px) {
  .page-events .featured-body { padding:18px 18px 20px; }
  .page-events .featured-event .featured-body>h2 { font-size:clamp(24px,6.4vw,30px); }
  .page-events .featured-event .featured-body>.event-preview { font-size:15px; }
}

/* ===== Compact event details row: date, doors, start, ticket (cards, featured card) =====
   One row on wide places, a clean 2 x 2 block on narrow ones: date over ticket, doors over start. */
.page-events .event-meta { container-type:inline-size; margin:2px 0 4px; }
.page-events .em-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:column; grid-template-rows:repeat(2,auto); gap:9px 14px; }
.page-events .em-date { order:1; } .page-events .em-price { order:2; } .page-events .em-doors { order:3; } .page-events .em-start { order:4; }
@container (min-width:500px) {
  .page-events .em-row { grid-template-columns:repeat(4,max-content); grid-auto-flow:row; grid-template-rows:none; gap:6px 24px; }
  .page-events .em-i { order:0; }
}
.page-events .em-i { display:flex; align-items:center; gap:8px; min-width:0; font-size:14px; line-height:1.3; color:#fff; white-space:nowrap; }
.page-events .em-i>i { color:var(--gold-light); font-size:15px; width:17px; text-align:center; flex:none; }
.page-events .em-l { color:#b2b6bc; }
.page-events .em-i b { font-weight:700; }

/* Featured description + the inline "Vaata lähemalt" (only present when the text is cut) */
.page-events .event-preview { display:block; margin:6px 0 16px; font-size:15px; line-height:1.5; color:#d9dbde; }
.page-events .event-preview[data-text]:not(.is-fit) { visibility:hidden; }
.page-events .details-link { background:none; border:0; color:var(--gold-light); font:inherit; font-size:13px; padding:10px 0; cursor:pointer; text-decoration:underline; text-underline-offset:5px; }
.page-events .details-link i { margin-left:8px; }
.page-events .details-inline { display:inline; position:relative; padding:0; margin:0; font-size:inherit; line-height:inherit; white-space:nowrap; vertical-align:baseline; }
.page-events .details-inline::after { content:''; position:absolute; inset:-14px -8px; } /* 44px+ touch area without changing the line height */
/* Paragraphs of event descriptions (single newline = line break, blank line = ~11px gap) */
.page-events .ep { display:block; }
.page-events .ep + .ep { margin-top:11px; }

/* ===== Upcoming event cards: 3 columns on wide screens, 2 on medium, 1 on phones ===== */
/* (premium-redesign.css sets the grid with !important, so these rules need it too) */
.page-events .events-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:22px!important; margin-top:20px!important; }
@media(max-width:1179px) { .page-events .events-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; } }
@media(max-width:699px)  { .page-events .events-grid { grid-template-columns:minmax(0,1fr)!important; gap:18px!important; } }
.page-events .event-card { border:1px solid #383b3d; }
.page-events .event-card .card-body { padding:14px 16px 16px; gap:8px; }
.page-events .event-card .event-card-title { font-family:Inter,sans-serif; font-size:21px!important; font-weight:700; text-transform:none; margin:0; line-height:1.2; }
.page-events .event-card .event-meta { margin:2px 0 6px; }
.page-events .event-buttons { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 14px; margin-top:auto; }
.page-events .event-main-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.page-events .event-main-actions .btn { min-height:44px; font-size:11px; padding:11px 16px; letter-spacing:.09em; white-space:nowrap; }
.page-events .featured-body .event-main-actions { gap:12px 14px; }
.page-events .featured-body .btn, .page-events .featured-body .btn-facebook { min-height:44px; }
.page-events .event-card .ev-ticket { border-color:rgba(255,255,255,.32); color:#fff; }
.page-events .event-card .ev-ticket:hover { border-color:var(--gold); background:var(--gold); color:#17130f; }
@media(max-width:620px) { .page-events .event-buttons { flex-wrap:wrap; } }

/* ===== FULL EVENT DETAILS: shared by the popup (events.html) and the event page (event.php) =====
   Same markup, same CSS: poster | title, date, doors / start / price, description, actions.
   Layout switches by the width of the details box itself (container query), so the popup and the
   page always stack at the same width. */
.ev-detail-wrap { container:evd / inline-size; min-width:0; }
.ev-detail { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:clamp(22px,3vw,40px); align-items:start; }
.ev-poster { min-width:0; background:#08090a; }
.ev-poster a, .ev-poster img { display:block; }
.ev-poster a { cursor:pointer; }
.ev-poster img { width:100%; height:auto; max-height:82dvh; object-fit:contain; margin:0 auto; }
.ev-body { min-width:0; }
.ev-title { font-family:Inter,sans-serif; font-weight:800; font-size:clamp(26px,2.6vw,36px); line-height:1.14; letter-spacing:-.025em; margin:0 0 10px; text-transform:none; color:#fff; overflow-wrap:anywhere; }
.ev-date { color:#bdc0c4; font-size:18px; line-height:1.4; margin:0 0 14px; }
.ev-facts { display:flex; flex-wrap:wrap; gap:12px 0; padding:10px 0 16px; margin:0 0 16px; border-bottom:1px solid #393b3d; }
.ev-facts>div { display:flex; align-items:center; gap:12px; padding:0 18px; border-right:1px solid #454647; }
.ev-facts>div:first-child { padding-left:0; }
.ev-facts>div:last-child { border:0; }
.ev-facts i { color:var(--gold-light); font-size:24px; width:26px; text-align:center; flex:none; }
.ev-facts small { display:block; color:#b2b6bc; font-size:12px; line-height:1.3; margin-bottom:3px; }
.ev-facts span { font-size:15px; font-weight:600; line-height:1.3; }
.ev-desc { font-size:16px; line-height:1.6; color:#e6e7e9; margin:0 0 22px; overflow-wrap:anywhere; }
.ev-actions { display:flex; flex-wrap:wrap; gap:12px; }
.page-events .ev-actions .btn, .page-events .ev-actions .btn-facebook { min-height:48px; padding:11px 22px; font-size:12px; letter-spacing:.09em; white-space:nowrap; }
@container evd (max-width:760px) {
  .ev-detail { grid-template-columns:minmax(0,1fr); row-gap:18px; }
  .ev-poster img { max-height:min(70dvh,640px); }
  .ev-title { font-size:clamp(23px,6vw,30px); }
  .ev-date { font-size:16px; }
}
/* Phones: all available actions on ONE row, equal widths, 8px apart, 48px high */
@container evd (max-width:520px) {
  .ev-facts>div { padding:0 12px; gap:9px; }
  .ev-facts i { font-size:21px; width:22px; }
  .ev-actions { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; }
  .page-events .ev-actions .btn, .page-events .ev-actions .btn-facebook { min-height:48px; padding:8px 6px; font-size:11px; letter-spacing:.04em; line-height:1.2; white-space:normal; text-align:center; overflow-wrap:anywhere; gap:6px; }
}
/* Very narrow phones (~320px): two columns, the odd last button gets the full row */
@container evd (max-width:300px) {
  .ev-actions { grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ev-actions>:last-child:nth-child(odd) { grid-column:1 / -1; }
}

/* ===== Popup: ~90% of the window (max 1300px); full-screen on phones, with a sticky close button ===== */
.page-events #eventDialog { box-sizing:border-box; width:min(90vw,1300px); max-width:none; max-height:calc(100dvh - 48px); padding:0; overflow:auto; color:var(--text); background:#111416; border:1px solid var(--gold); scrollbar-width:thin; scrollbar-color:#806d49 #111416; }
.page-events #eventDialog::backdrop { background:rgba(0,0,0,.8); }
.page-events .ev-dialog-bar { position:sticky; top:0; z-index:2; display:flex; justify-content:flex-end; margin:0; padding:12px 16px 4px; background:#111416; }
.page-events .dialog-close { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 16px; color:var(--text); background:transparent; border:1px solid #666; font:inherit; font-size:14px; cursor:pointer; }
.page-events .dialog-close:hover { border-color:var(--gold); color:var(--gold-light); }
.page-events #eventDialogContent { padding:8px 32px 32px; }
body:has(#eventDialog[open]) { overflow:hidden; }
@media(max-width:700px) {
  .page-events #eventDialog { width:100%; height:100dvh; max-height:100dvh; margin:0; border:0; }
  .page-events #eventDialogContent { padding:4px 16px calc(24px + env(safe-area-inset-bottom,0px)); }
  .page-events .ev-dialog-bar { padding:10px 12px 6px; }
}

/* ===== Event page (event.php): same details, in a frame ===== */
.page-event .ev-detail-wrap { border:1px solid #383b3d; background:#0c0e10; padding:28px; }
@media(max-width:620px) { .page-event .ev-detail-wrap { border:0; background:none; padding:0; } }   /* phones: details sit directly on the page, full width */

/* ==========================================================================
   Lahe Baar motion enhancements (event page): details dialog + event cards.
   ========================================================================== */
.page-events #eventDialog {
  opacity:0; transform:translateY(6px) scale(.985);
  transition:opacity 240ms ease, transform 240ms var(--lb-ease-out), overlay 240ms allow-discrete, display 240ms allow-discrete;
}
.page-events #eventDialog[open] { opacity:1; transform:none; }
@starting-style { .page-events #eventDialog[open] { opacity:0; transform:translateY(6px) scale(.985); } }
.page-events #eventDialog::backdrop {
  background:rgba(0,0,0,0);
  transition:background-color 220ms ease, overlay 220ms allow-discrete, display 220ms allow-discrete;
}
.page-events #eventDialog[open]::backdrop { background:rgba(0,0,0,.8); }
@starting-style { .page-events #eventDialog[open]::backdrop { background:rgba(0,0,0,0); } }
@media (max-width:700px) {            /* full-screen on phones: fade + small slide only, no scaling */
  .page-events #eventDialog { transform:translateY(6px); }
  @starting-style { .page-events #eventDialog[open] { transform:translateY(6px); } }
  .page-events #eventDialog[open] { transform:none; }
}

.page-events .event-card { transition:transform 220ms var(--lb-ease-out), box-shadow 220ms ease; }
.page-events .event-card .poster-frame { overflow:hidden; }
.page-events .event-card .poster-frame img { transition:transform 320ms var(--lb-ease-out); }
@media (hover:hover) {
  .page-events .event-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.35); }
  .page-events .event-card:hover .poster-frame img { transform:scale(1.015); }
}

@media (prefers-reduced-motion:reduce) {
  .page-events #eventDialog, .page-events #eventDialog::backdrop { transition:none; }
  .page-events #eventDialog { transform:none; }
  @starting-style { .page-events #eventDialog[open], .page-events #eventDialog[open]::backdrop { opacity:1; transform:none; } }
  .page-events .event-card, .page-events .event-card .poster-frame img { transition:none; }
  .page-events .event-card:hover, .page-events .event-card:hover .poster-frame img { transform:none; box-shadow:none; }
}