/* ==========================================================================
   BLACKMURAL MEDIA — EVENTS HUB
   layout.css — page shell: header, hero, control bar, footer

   Structural chrome shared with the rest of blackmuralmedia.com. In
   production, swap the header and footer blocks for the site's shared
   partials so they stay in sync sitewide.
   ========================================================================== */

/* -------------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,11,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.logo{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  letter-spacing:.06em;
  font-size:1.15rem;
  text-transform:uppercase;
}
.logo span{color:var(--gold);}
nav.primary-nav{display:none;gap:36px;align-items:center;}
nav.primary-nav a{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.85rem;
  color:var(--muted);
  padding:6px 2px;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
nav.primary-nav a:hover{color:var(--paper);}
nav.primary-nav a.active{color:var(--gold);border-color:var(--gold);}
@media(min-width:900px){nav.primary-nav{display:flex;}}

.menu-toggle{
  display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:8px;
}
.menu-toggle span{width:22px;height:1.5px;background:var(--paper);display:block;}
@media(min-width:900px){.menu-toggle{display:none;}}

.mobile-nav{
  display:none;flex-direction:column;
  border-top:1px solid var(--line);
  background:var(--panel);
}
.mobile-nav.open{display:flex;}
.mobile-nav a{
  padding:16px 24px;border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;font-size:.95rem;
  color:var(--muted);
}
.mobile-nav a.active{color:var(--gold);}

/* -------------------------------------------------------------- hero
   Text-only by default. When an event is featured the hero splits in two:
   copy left, that event's poster right. Mobile stacks them, poster last —
   the headline should still be the first thing read. */
.events-hero{padding:56px 0 40px;border-bottom:1px solid var(--line);}
@media(min-width:900px){.events-hero{padding:84px 0 56px;}}
.events-hero h1{
  font-family:'Inter',sans-serif;font-weight:800;
  font-size:clamp(2.4rem,7vw,4.4rem);
  letter-spacing:-.02em;line-height:.98;margin:14px 0 18px;
}
.events-hero .sub{
  font-size:1.05rem;color:var(--paper);opacity:.92;max-width:36ch;margin:0 0 10px;
  font-weight:500;
}
.events-hero .support{color:var(--muted);max-width:58ch;font-size:.98rem;}

.hero-grid{display:grid;gap:32px;}
@media(min-width:900px){
  .events-hero.has-featured .hero-grid{
    /* The copy leads; the poster is a companion to it, not a co-headline.
       A wider text column and a narrower art column keeps that order. */
    grid-template-columns:1.35fr .65fr;
    align-items:center;
    gap:56px;
  }
  /* Sit against the right edge rather than stretching to fill the column, so
     the poster stays a fixed object on the page instead of growing with the
     window. */
  .hero-featured{justify-self:end;width:100%;max-width:400px;}
}
.hero-featured-label{margin:0 0 12px;}
.hero-poster{
  display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
  width:100%;
}
/* On a phone the poster is the full column width — there is no second column
   to sit beside — but it is capped so it cannot eat a whole screen. */
@media(max-width:899.98px){
  .hero-featured{max-width:420px;}
}
.hero-poster img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
@media(hover:hover){
  .hero-poster:hover img{transform:scale(1.03);}
}

/* -------------------------------------------------------------- page head
   events.php has no hero art — just the heading and a line of support copy. */
.page-head{padding:48px 0 32px;border-bottom:1px solid var(--line);}
@media(min-width:900px){.page-head{padding:64px 0 40px;}}
.page-head h1{
  font-family:'Inter',sans-serif;font-weight:800;
  font-size:clamp(2rem,5vw,3.2rem);
  letter-spacing:-.02em;line-height:1;margin:12px 0 14px;
}
.page-head .support{color:var(--muted);max-width:54ch;font-size:.98rem;}

/* -------------------------------------------------------------- controls
   Four controls in one bar: category, direction, timeframe, search. Each is
   a labelled group so the bar reads as a form rather than a row of mystery
   widgets, and so every control keeps its label when they stack on a phone. */
.controls{
  position:sticky;top:72px;z-index:30;
  background:rgba(10,10,11,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.controls .row{display:flex;flex-direction:column;gap:14px;}
@media(min-width:900px){
  .controls .row{flex-direction:row;align-items:flex-end;gap:20px;}
  .control-group-search{margin-left:auto;}
}

.control-group{display:flex;flex-direction:column;gap:6px;min-width:0;}
.control-label{
  display:block;line-height:1.2;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;
  color:var(--muted-2);
}

/* ---- select (category, timeframe)
   The native control is kept — it gets the platform's own picker, which on a
   phone is a full-height wheel rather than a cramped dropdown — and only its
   skin is replaced. The caret is ours because appearance:none removes it. */
.select-wrap{position:relative;display:flex;align-items:center;}
.select-wrap select{
  appearance:none;-webkit-appearance:none;
  background:var(--panel);
  border:1px solid var(--line-strong);
  color:var(--paper);
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;
  padding:11px 34px 11px 13px;
  width:100%;min-height:44px;
  border-radius:var(--radius);
  transition:border-color .2s var(--ease);
}
.select-wrap select:hover{border-color:var(--gold);}
.select-wrap select option{background:var(--panel);color:var(--paper);text-transform:none;}
.select-caret{
  position:absolute;right:12px;pointer-events:none;color:var(--muted);
}
@media(min-width:900px){.select-wrap select{min-width:180px;}}

/* ---- segmented upcoming | past */
.segmented{display:flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;}
.seg-btn{
  flex:1;background:none;border:0;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;
  color:var(--muted);padding:12px 18px;min-height:44px;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.seg-btn + .seg-btn{border-left:1px solid var(--line-strong);}
.seg-btn:hover{color:var(--paper);}
.seg-btn.active{background:var(--gold);color:var(--void);}

/* ---- search */
.search-wrap{
  display:flex;align-items:center;gap:10px;
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  padding:0 13px;min-height:44px;min-width:0;
  transition:border-color .2s var(--ease);
}
.search-wrap:focus-within{border-color:var(--gold);}
@media(min-width:900px){.search-wrap{width:260px;}}
.search-wrap input{
  background:none;border:0;color:var(--paper);font-family:'Inter',sans-serif;
  font-size:.9rem;width:100%;padding:11px 0;min-width:0;
}
.search-wrap input:focus{outline:none;}
.search-wrap input::placeholder{color:var(--muted-2);}
.search-wrap svg{flex:none;opacity:.5;}

/* ---- result count */
.result-count{
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;
  color:var(--muted-2);margin:20px 0 0;
}

/* -------------------------------------------------------------- controls on mobile
   The bar stops being sticky below 900px: header (72px) plus a stacked
   control bar was holding most of a 844px screen hostage. Category and
   timeframe sit side by side, direction and search take the full width, so
   the whole bar is three rows rather than four. Every control keeps a 44px
   minimum height — the hit target, not the visual size. */
@media(max-width:899.98px){
  .controls{position:static;top:auto;}
  .controls .row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  /* Reordered rather than restacked: the two compact selects pair up on the
     first row, then the wide controls take a full row each. Source order is
     left alone so the desktop bar and the tab order both stay as written. */
  .control-group:nth-child(1){order:1;}                    /* category  */
  .control-group:nth-child(3){order:2;}                    /* timeframe */
  .control-group:nth-child(2){order:3;grid-column:1 / -1;} /* upcoming | past */
  .control-group-search      {order:4;grid-column:1 / -1;}
}

/* -------------------------------------------------------------- footer */
.site-footer{border-top:1px solid var(--line);padding:48px 0 32px;margin-top:24px;}
.footer-grid{display:grid;gap:28px;}
@media(min-width:820px){.footer-grid{grid-template-columns:1.3fr 1fr 1.25fr;gap:40px;}}
.footer-grid h5{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;font-size:.78rem;color:var(--muted);margin:0 0 14px;
}
/* Sitemap links only. `.footer-grid a` also matches the social buttons, and
   at (0,1,1) it outranks `.social-btn` — which silently replaced their flex
   centring with display:block and pushed every mark into the top-left corner.
   Excluding them keeps the component rule authoritative. */
.footer-grid a:not(.social-btn){display:block;color:var(--muted);font-size:.92rem;padding:5px 0;}
.footer-grid a:not(.social-btn):hover{color:var(--gold);}
/* Seven 44px marks plus six 10px gaps is 368px, and the Connect column only
   clears that above ~1280px. Left to wrap on its own the row orphans icons —
   5+2 on a small laptop, 6+1 on a phone. A fixed grid decides the shape
   instead: a tidy 4+3 block everywhere, opening to a single row of seven only
   where the column is definitely wide enough. 44px is the tap target and is
   never traded away to win a line. */
.footer-social{
  display:grid;
  grid-template-columns:repeat(4,44px);
  gap:10px;
  margin-top:6px;
  justify-content:start;
}
@media(min-width:1280px){
  .footer-social{grid-template-columns:repeat(7,44px);}
}
.footer-bottom{
  display:flex;flex-direction:column;gap:12px;margin-top:36px;padding-top:20px;
  border-top:1px solid var(--line);color:var(--muted-2);font-size:.8rem;
}
@media(min-width:900px){.footer-bottom{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;}}

/* Legal links sit in the bottom bar, wrapping to their own line on a phone. */
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 18px;}
.footer-legal a{color:var(--muted-2);font-size:.8rem;padding:4px 0;}
.footer-legal a:hover{color:var(--gold);}

.footer-disclaimer{
  color:var(--muted-2);font-size:.76rem;line-height:1.6;
  margin:28px 0 0;max-width:92ch;
}

/* -------------------------------------------------------------- footer text blocks */
.footer-logo{margin-bottom:12px;}
.footer-tagline{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-size:.92rem;
  color:var(--gold);margin:0 0 10px;
}
.footer-about{color:var(--muted);font-size:.92rem;max-width:38ch;margin:0;}
.footer-email{color:var(--muted);font-size:.92rem;margin-top:14px;}
.footer-email a:hover{color:var(--gold);}