/*
 * WordPress-only adjustments, loaded after the draft-5 sheets. The draft-5 files stay identical to the
 * HTML prototype; anything WordPress adds to a page is handled here.
 */

/* A. The admin bar (signed-in staff only) is fixed at the top: move the fixed header and mobile menu below it. */
body.admin-bar .site-head { top: 32px; }
body.admin-bar .mnav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-head, body.admin-bar .mnav { top: 46px; }
}

/* B. WordPress's screen-reader text class, used by core markup and our blocks. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* C. Event pages (inc/events.php): the facts strip under the hero, the state shown instead of Register, the
   panel shown instead of the form when registration is not possible, and the waitlist note above the form. */
.event-strip { max-width: 96rem; margin: clamp(3.2rem, 4vw, 4.8rem) auto 0; padding: 0.4rem 2.6rem; text-align: left; }
.event-strip .facts > div:last-child { border-bottom: 0; }
.event-strip .facts { margin: 0; border-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); column-gap: 3.2rem; }
.event-strip .facts > div { flex-direction: column; gap: 0.4rem; }
.event-strip .facts dd { text-align: left; }
.event-state { display: inline-flex; align-items: center; padding: 1.2rem 2rem; border-radius: 99rem; background: var(--tone-tint); color: var(--tone-ink); font: 700 var(--fs-3)/1 var(--font-mono); }
.event-state.is-cancelled { background: var(--soft); color: var(--muted); }
.event-closed { display: grid; gap: 1.2rem; align-content: start; }
.event-closed h2 { font-size: var(--fs-6); }
.event-note { margin: 0 0 1.6rem; padding: 1.2rem 1.6rem; border-radius: var(--rad-md); background: var(--tone-tint); color: var(--tone-ink); font-weight: 600; }

/* D. An event card's optional image (Events › Card image), in the style of the share images: a rounded box on the
   event's colour, a cut-out standing on its bottom edge, or a photo filling it. Without one the card is draft-5's. */
.camp-media { position: relative; margin: 0 0 0.4rem; aspect-ratio: 16 / 9; border-radius: var(--rad-md); overflow: hidden;
  background: radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--tone) 30%, var(--tone-tint)), var(--tone-tint)); }
.camp-media img { position: absolute; inset: 6% 4% 0; width: 92%; height: 94%; object-fit: contain; object-position: 50% 100%; }
.camp-media.is-photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* F. Event page templates (patterns/event-bootcamp.php, event-major.php): the cover image under the hero, mentor and
   speaker cards with a round photo, the gallery, the venue address, partner logos, the courses an event covers.
   Images are .ph placeholders until one is chosen in the editor; `cover` fills the box with the photo. */
.event-cover .ph { --ar: 16 / 7; }
.ph.cover::after { display: none; }
.ph.cover.photo img { object-fit: cover; object-position: center; }
.speakers .speaker { text-align: center; justify-items: center; align-content: start; }
.speaker-photo { width: 12.8rem; aspect-ratio: 1; border-radius: 50%; margin: 0 auto 0.8rem; padding: 0; }
.speaker-photo.photo img { border-radius: 50%; }
.speaker .role { font: 600 var(--fs-2)/1.4 var(--font-mono); color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 1.8vw, 2rem); max-width: var(--wrap); margin-inline: auto; }
.gallery > .ph:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; height: 100%; }
.event-venue { font-style: normal; font-size: var(--fs-4); line-height: 1.5; color: var(--ink); margin: 0 0 2rem; }
.event-venue-text { font-size: inherit; }
#venue .prose .btn-row { margin-bottom: 2.4rem; }
.partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; list-style: none; padding: 0; margin: 0; }
.partners .press-logo { width: 19rem; height: 8rem; padding: 1rem 1.6rem; justify-content: center; }
.partner-logo { --ar: 3 / 1; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 1rem; padding: 0; background: transparent; }
.partner-logo::before { opacity: 0.35; }
.partner-logo.photo img { object-fit: contain; object-position: center; filter: grayscale(1); opacity: 0.75; }
.event-courses { margin-bottom: 2.4rem; }
.event-other-courses { text-align: center; }
.event-other-courses .chips { justify-content: center; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery > .ph:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; height: auto; }
  .gallery > .ph:nth-child(even):last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } /* no image alone on a row */
  .partners .press-logo { width: calc(50% - 0.8rem); height: 6.4rem; }
  .speaker-photo { width: 10.4rem; }
}

/* G. The announcement bar (includes/announce/): a full-width strip at the very top of the page, in the flow of the
   page, above the fixed header. Its height is fixed for each width so nothing below it moves when it loads; the
   header sits just under it until the page scrolls (.is-stuck), then takes its usual place. A dismissed bar is
   hidden before the first paint (html.announce-off, set by a line in the head). */
:root { --announce-h: 4.8rem; }
.announce { position: relative; z-index: 601; height: var(--announce-h); display: flex; align-items: center; justify-content: center; gap: 1.6rem; padding: 0 5.6rem 0 2rem; background: var(--tone); color: var(--ink); font: 600 var(--fs-2)/1.35 var(--font-primary); }
.announce.tone-purple, .announce.tone-ink { color: #fff; }
.announce.tone-ink { --tone: var(--ink); }
.announce-text { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce-text a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.announce-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.5rem; border-radius: var(--rad-pill); background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.announce-btn .ico { width: 1.6rem; height: 1.6rem; }
.announce-btn:hover { text-decoration: none; filter: brightness(1.15); }
.announce.tone-purple .announce-btn, .announce.tone-ink .announce-btn { background: #fff; color: var(--ink); }
.announce-close { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); width: 3.6rem; height: 3.6rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.announce-close:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.announce-close:focus-visible, .announce-btn:focus-visible, .announce-text a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.announce.tone-purple :focus-visible, .announce.tone-ink :focus-visible { outline-color: #fff; }
.announce-close .ico { width: 1.8rem; height: 1.8rem; }
body.has-announce .site-head { transition: top 0.25s ease; }
body.has-announce .site-head:not(.is-stuck):not(.menu-open) { top: var(--announce-h); }
body.admin-bar.has-announce .site-head:not(.is-stuck):not(.menu-open) { top: calc(32px + var(--announce-h)); }
html.announce-off .announce { display: none; }
html.announce-off body.has-announce .site-head:not(.is-stuck):not(.menu-open) { top: 0; }
html.announce-off body.admin-bar.has-announce .site-head:not(.is-stuck):not(.menu-open) { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar.has-announce .site-head:not(.is-stuck):not(.menu-open) { top: calc(46px + var(--announce-h)); }
  html.announce-off body.admin-bar.has-announce .site-head:not(.is-stuck):not(.menu-open) { top: 46px; }
}
@media (max-width: 640px) {
  :root { --announce-h: 6.8rem; }
  .announce { justify-content: flex-start; gap: 1.2rem; padding: 0 5rem 0 1.6rem; font-size: var(--fs-1); }
  .announce-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .announce-btn { padding: 0.6rem 1.2rem; }
  .announce-btn .ico { display: none; }
  .announce-close { right: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) { body.has-announce .site-head { transition: none; } }

/* Press › In the News: the article screenshots, and the viewer that opens one larger (assets/js/press-shots.js). */
.press-shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(3.2rem, 4vw, 4.8rem) clamp(2rem, 3vw, 3.2rem); }
.press-shot { display: grid; align-content: start; gap: 0.8rem; min-width: 0; }
.press-shot-img { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--rad-md); background: var(--soft); cursor: zoom-in; transition: transform 0.25s var(--ease), background 0.25s; }
.press-shot-img:hover { transform: translateY(-3px); background: var(--soft-2); }
.press-shot-img:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.press-shot-img img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 1rem 1.6rem rgba(36, 27, 46, 0.16)); }
.press-shot .press-meta { margin: 0.8rem 0 0; }
.press-shot h3 { margin: 0; font: 800 var(--fs-4)/1.35 var(--font-primary); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 960px) { .press-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .press-shots { grid-template-columns: minmax(0, 1fr); } }
.shot-view { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; background: rgba(20, 14, 28, 0.94); overflow: hidden; }
.shot-view[open] { display: grid; place-items: center; }
.shot-view::backdrop { background: transparent; }
.shot-view figure { margin: 0; display: grid; gap: 1.6rem; justify-items: center; padding: 0 7.2rem; }
.shot-view img { max-width: min(88vw, 120rem); max-height: 76vh; width: auto; height: auto; object-fit: contain; }
.shot-view figcaption { display: grid; gap: 0.4rem; max-width: 72ch; text-align: center; color: #fff; }
.shot-view figcaption .press-meta { color: rgba(255, 255, 255, 0.75); }
.shot-view figcaption b { font: 800 var(--fs-4)/1.35 var(--font-primary); color: #fff; }
.shot-btn { position: fixed; display: grid; place-items: center; width: 4.8rem; height: 4.8rem; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font: 700 2.4rem/1 var(--font-primary); cursor: pointer; }
.shot-btn:hover { background: var(--yellow); }
.shot-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.shot-close { top: 2rem; right: 2rem; }
.shot-prev, .shot-next { top: 50%; transform: translateY(-50%); }
.shot-prev { left: 1.6rem; }
.shot-next { right: 1.6rem; }
@media (max-width: 560px) {
  .shot-view figure { padding: 0 1.2rem; }
  .shot-view img { max-width: 94vw; max-height: 62vh; }
  .shot-prev, .shot-next { top: auto; bottom: 2rem; transform: none; }
  .shot-prev { left: calc(50% - 6rem); }
  .shot-next { right: calc(50% - 6rem); }
}