/* Bari Choir — shared page styles (home + about). Requires style.css first. */
/* =========================================================
   Bari Choir — own identity. Black bg, bright indigo tint,
   one photo spanning the whole wordmark, full-width, dark
   page, no festival colors / floaties / dots.
   ========================================================= */
:root {
  --indigo:      #4338E0;   /* bright electric indigo */
  --indigo-lite: #6C5CFF;
  --indigo-deep: #2A1FA8;
  --gutter: 4vw;
}

body.has-photo-hero { background:#0A0A0A; color:#ECECEC; }
.float-field { display:none !important; }   /* no festival floaties (crown etc.) */
body.has-photo-hero .float, body.has-photo-hero .float-field { display:none !important; }

/* ---------- top utility bar (above hero): logo + meta ---------- */
.topbar { display:none !important; }
.util-bar {
  display:flex; align-items:center; gap:16px;
  padding:14px var(--gutter,4vw); background:#0A0A0A;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.util-bar .logo-dot {
  width:58px; height:58px; border-radius:50%;
  background:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.util-bar .logo-dot img { width:100%; height:100%; object-fit:cover; }
/* meta stacked in a column */
.util-bar .util-meta {
  display:flex; flex-direction:column; gap:1px;
  font-weight:700; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:#BFBFBF; line-height:1.35;
}
.util-bar .util-nav {
  margin-left:auto; display:flex; gap:20px;
  font-weight:700; font-size:13px; letter-spacing:0.05em; text-transform:uppercase;
}
.util-bar .util-nav a { color:#ECECEC; }
.util-bar .util-nav a:hover { color:var(--indigo-lite); }

/* ---------- hero, full width, SVG wordmark ---------- */
.hero-clip {
  background:#0A0A0A;
  min-height:0 !important;
  display:flex !important; flex-direction:column; justify-content:flex-start;
  padding:14px var(--gutter) 44px !important;
}
.hero-clip .inner { max-width:none !important; width:100% !important; display:flex; flex-direction:column; align-items:flex-start; }
.hero-svg { display:block; width:100%; height:auto; }
.hero-clip .clip-tagline { margin-top:28px; }

.clip-tagline { color:#D8D8D8; max-width:680px; margin:30px 0 0; font-size:18px; line-height:1.5; }
.clip-tagline .tagline-hy { display:inline-block; margin-top:6px; color:#9E97D6; font-size:16px; }
.hero-clip .cta-row { justify-content:flex-start !important; margin-top:26px; }
.hero-clip .btn.solid { background:var(--indigo) !important; border-color:var(--indigo) !important; color:#fff !important; }
.hero-clip .btn.solid:hover { background:var(--indigo-deep) !important; border-color:var(--indigo-deep) !important; }
.hero-clip .btn.ghost-light { border-color:#ECECEC !important; color:#ECECEC !important; }
.hero-clip .btn.ghost-light:hover { background:#ECECEC !important; color:#0A0A0A !important; }

/* ---------- content below hero: full width matching hero, dark ---------- */
body.has-photo-hero main, 
body.has-photo-hero main > section:not(.hero-clip),
body.has-photo-hero footer { background:#0A0A0A !important; }
/* match hero's full-width 4vw gutters */
body.has-photo-hero main > section.wrap { max-width:none !important; padding-left:var(--gutter); padding-right:var(--gutter); }
body.has-photo-hero .section-label { color:#ECECEC !important; }
body.has-photo-hero .section-label .dot { display:none !important; }
body.has-photo-hero .prose p { color:#D2D2D2 !important; font-size:18px; }
body.has-photo-hero .prose strong { color:#fff !important; }
body.has-photo-hero .about-logo { display:none !important; }

/* repertoire highlight — full width band under the about grid */
body.has-photo-hero .repertoire-band {
  font-size:22px; line-height:1.55; color:#ECECEC !important;
  border-left:3px solid var(--indigo); padding-left:22px;
  margin:36px 0 0; max-width:none;
}

/* conductor photo beside the about text */
.about-grid { display:grid; grid-template-columns:1fr 360px; gap:44px; align-items:start; }
.about-grid .conductor { position:sticky; top:24px; }
.about-grid .conductor img {
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px; background:#1A1A1A;
}
.about-grid .conductor .cap {
  margin-top:10px; font-size:13px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--indigo-lite); font-weight:700;
}
.about-grid .conductor .cap small { display:block; color:#9A9A9A; font-weight:600; letter-spacing:0; text-transform:none; margin-top:2px; }

/* breathing room after the about block, before the festival heading */
body.has-photo-hero #about { padding-bottom:64px !important; }
body.has-photo-hero #events { padding-top:24px !important; }

/* footer dark */
body.has-photo-hero footer { border-top:2px solid var(--indigo) !important; }
body.has-photo-hero footer .display-sm { color:var(--indigo-lite) !important; }
body.has-photo-hero footer, body.has-photo-hero footer p { color:#BDBDBD !important; }
body.has-photo-hero footer a { color:var(--indigo-lite) !important; }

/* festival callout buttons -> indigo */
body.has-photo-hero #events .btn.solid { background:var(--indigo) !important; border-color:var(--indigo) !important; color:#fff !important; }
body.has-photo-hero #events .btn.solid:hover { background:var(--indigo-deep) !important; border-color:var(--indigo-deep) !important; }
body.has-photo-hero #events .btn { border-color:var(--indigo-lite) !important; color:var(--indigo-lite) !important; }
body.has-photo-hero #events .btn:hover { background:var(--indigo-lite) !important; color:#0A0A0A !important; }

/* events list */
.events { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.event { display:flex; gap:28px; align-items:flex-start; padding:28px 0; border-top:1px solid rgba(255,255,255,0.12); }
.event:last-child { border-bottom:1px solid rgba(255,255,255,0.12); }
.ev-date { flex:0 0 auto; width:96px; text-align:center; border:2px solid var(--indigo); border-radius:14px; padding:12px 0; display:flex; flex-direction:column; line-height:1; }
.ev-date .d { font-family:var(--font-display); font-weight:900; font-size:40px; color:#fff; }
.ev-date .m { font-weight:800; font-size:14px; letter-spacing:0.12em; text-transform:uppercase; color:var(--indigo-lite); margin-top:6px; }
.ev-date-tba .d { font-size:26px; letter-spacing:0.04em; }
.ev-date-tba .m { font-size:11px; letter-spacing:0.08em; }
.ev-body { flex:1 1 auto; }
.ev-title { font-family:var(--font-display); font-weight:900; font-size:clamp(24px,3.4vw,38px); color:#fff; line-height:1.02; }
.ev-meta { margin-top:8px; font-weight:700; font-size:14px; letter-spacing:0.04em; text-transform:uppercase; color:var(--indigo-lite); }
.ev-desc { margin:12px 0 16px; color:#C8C8C8; font-size:17px; max-width:640px; }
.ev-actions { display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:640px){ .event{gap:16px;} .ev-date{width:72px;padding:8px 0;} .ev-date .d{font-size:30px;} .ev-date-tba .d{font-size:22px;} }

/* ---------- MOBILE: everything left, full width, no overflow ---------- */
@media (max-width: 760px) {
  .about-grid { grid-template-columns:1fr; gap:20px; }
  .about-grid .conductor { position:static; max-width:280px; }
}
@media (max-width: 640px) {
  .util-bar { flex-wrap:wrap; padding:14px 20px; gap:12px; }
  .util-bar .util-nav { margin-left:0; width:100%; gap:14px; }
  .hero-clip { padding:24px 20px 40px !important; }
  .clip-tagline { margin-left:0 !important; }
  .hero-clip .cta-row { flex-direction:column; align-items:flex-start; gap:12px; }
  body.has-photo-hero main > section { padding-left:20px; padding-right:20px; }
}