/* ==========================================================================
   BEL-AIR public site (Mockup 02) — events & news pages (events, event-*, news*)
   Only what inner.css lacks: event cards, the month calendar, the view
   toggle, the register bar that stays in reach on phones, news items.
   Every colour comes from tokens.css (7:1 on paper); nothing under 14 px.
   ========================================================================== */

/* ---------------------------------------------------------------- list / month toggle */
.ev-views { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.ev-views .legend { margin-right: .5rem; }
@media (max-width: 767px) {
  .ev-views { display: none; }
  /* phones always get the list, whichever view was picked on a wider screen */
  [data-view="month"] { display: none !important; }
  [data-view="list"][hidden] { display: block !important; }
}

/* ---------------------------------------------------------------- event cards */
.ev-list { display: grid; gap: 1rem; }
.ev-card { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); background: var(--paper-2); border: 1px solid var(--line-d); border-radius: var(--r-photo); overflow: hidden; }
.ev-card__photo { margin: 0; min-height: 100%; }
.ev-card__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.ev-card__body { padding: 1.1rem 1.25rem 1.25rem; display: grid; gap: .7rem; align-content: start; }
.ev-card__top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ev-card h3 { font-size: var(--t-lg); }
.ev-card h3 a { color: var(--ink-d); text-decoration: none; }
.ev-card h3 a:hover { color: var(--link-d); text-decoration: underline; }
.ev-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .5rem 1.25rem; }
.ev-card__facts dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-d3); }
.ev-card__facts dd { font-weight: 700; color: var(--ink-d); }
.ev-card__note { color: var(--ink-d2); font-size: var(--t-sm); }
.ev-card__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .2rem; }
.ev-card--off { background: var(--paper-3); }
.ev-card--off .ev-card__photo img { filter: grayscale(1); opacity: .8; }
@media (max-width: 700px) { .ev-card { grid-template-columns: 1fr; } .ev-card__photo img { aspect-ratio: 16 / 9; } }

/* past events: clearly a different section */
.ev-past { margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); padding-top: 2rem; border-top: 3px double var(--line-d-strong); }
.ev-past .section-head p { color: var(--ink-d2); max-width: 40rem; }

/* ---------------------------------------------------------------- month calendar */
.ev-month + .ev-month { margin-top: 2.5rem; }
/* the month needs the full width: the side column moves under it */
.layout--month { grid-template-columns: 1fr; }
.layout--month > aside { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: start; }
.ev-cal { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--paper-2); border: 1px solid var(--line-d); }
.ev-cal caption { text-align: left; font-family: var(--font-display); font-size: var(--t-xl); padding-bottom: .6rem; color: var(--ink-d); }
.ev-cal th { padding: .5rem .4rem; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-d2); background: var(--paper-3); text-align: left; }
.ev-cal td { height: 6.5rem; padding: .35rem; vertical-align: top; border: 1px solid var(--line-d); }
.ev-cal td.is-out { background: var(--paper); }
.ev-cal .d { display: block; font-weight: 700; font-size: var(--t-sm); color: var(--ink-d2); }
.ev-cal td.is-today { box-shadow: inset 0 0 0 2px var(--gold); }
.ev-cal td.is-today .d::after { content: " · today"; font-weight: 700; color: var(--link-d); }
.ev-cal a, .ev-cal .ev-cal__ev { display: block; margin-top: .3rem; padding: .3rem .4rem; border-radius: var(--r-ui); border-left: 4px solid currentColor; font-size: var(--t-sm); line-height: 1.3; font-weight: 700; text-decoration: none; overflow-wrap: break-word; hyphens: auto; min-height: 2.75rem; }
.ev-cal a b, .ev-cal .ev-cal__ev b { display: block; color: var(--ink-d); font-weight: 700; }
.ev-cal .is-ok { color: var(--ok); background: var(--ok-bg); }
.ev-cal .is-wait { color: var(--wait); background: var(--wait-bg); }
.ev-cal .is-more { color: var(--more); background: var(--more-bg); }
.ev-cal .is-bad { color: var(--bad); background: var(--bad-bg); }
.ev-cal .is-info { color: var(--info); background: var(--info-bg); }
.ev-cal .is-done { color: var(--ink-d2); background: var(--paper-3); }
.ev-cal a:hover b { text-decoration: underline; }

/* ---------------------------------------------------------------- event detail: register box, sticky on phones */
.ev-cta h3 { font-size: var(--t-lg); }
.ev-cta p { margin-top: .4rem; }
.ev-cta .btn { margin-top: 1rem; width: 100%; justify-content: center; }
.ev-cta .status { margin-top: .6rem; }
@media (max-width: 900px) {
  body.has-ev-cta { padding-bottom: calc(3.75rem + 6.5rem); }
  body.has-ev-cta .help { bottom: calc(3.75rem + 6.5rem); } /* the Message us button sits above the register bar */
  .ev-cta { position: fixed; left: 0; right: 0; bottom: 3.75rem; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .25rem 1rem; padding: .7rem var(--gutter); border-radius: 0; border-width: 1px 0 0; box-shadow: 0 -12px 30px -18px rgba(12, 18, 32, .5); }
  .ev-cta h3, .ev-cta .ev-cta__more { display: none; }
  .ev-cta p { margin: 0; font-size: var(--t-sm); }
  .ev-cta .status { margin: 0; justify-self: start; white-space: normal; }
  .ev-cta .btn { margin: 0; width: auto; grid-column: 2; grid-row: 1 / span 2; }
}

/* photos inside the reading column, with a caption under them */
.ev-figure { margin: 0; }
.ev-figure img { width: 100%; border-radius: var(--r-photo); aspect-ratio: 3 / 2; object-fit: cover; }
.ev-figure figcaption { margin-top: .5rem; font-size: var(--t-sm); color: var(--ink-d2); }

/* ---------------------------------------------------------------- news */
.nw-alert { margin-bottom: 2rem; }
.nw-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--paper-2); border: 1px solid var(--line-d); border-radius: var(--r-photo); overflow: hidden; margin-bottom: 1.5rem; }
.nw-feature figure { margin: 0; }
.nw-feature img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.nw-feature > div { padding: clamp(1.1rem, 1rem + 1vw, 2rem); display: grid; gap: .8rem; align-content: center; }
.nw-feature h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); line-height: 1.15; }
@media (max-width: 800px) { .nw-feature { grid-template-columns: 1fr; } }
.nw-list { display: grid; gap: .9rem; }
.nw-item { padding: 1.1rem 1.25rem; background: var(--paper-2); border: 1px solid var(--line-d); border-radius: var(--r-photo); display: grid; gap: .5rem; }
.nw-item h3 { font-size: var(--t-lg); }
.nw-item h3 a { color: var(--ink-d); }
.nw-item p { color: var(--ink-d2); }
.nw-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: center; font-size: var(--t-sm); color: var(--ink-d2); }
.nw-meta b { color: var(--ink-d); font-weight: 700; }
.nw-item--old { background: var(--paper-3); }
.nw-archive { margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); padding-top: 2rem; border-top: 3px double var(--line-d-strong); }

/* article / advisory meta block under the hero */
.nw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .6rem 1.5rem; padding: 1rem 1.25rem; background: var(--paper-2); border: 1px solid var(--line-d); border-radius: var(--r-photo); }
.nw-facts dt { font-family: var(--font-ui); font-size: var(--t-sm); letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--ink-d3); }
.nw-facts dd { font-weight: 700; }

/* ---------------------------------------------------------------- production port (wave W6, events and news)
   What the mock wrote as style="" attributes is a class here (CSP, BRD M2-NFR-56). The filters are a GET form and
   their chips are links (server-first, UX-51); js/public/pages-events.js submits a changed select and hides the
   form's button. */
.help-card h3 + p { margin-top: .4rem; }
.help-card p + p, .help-card dl + p { margin-top: .75rem; }
.help-card ul { margin-top: .5rem; display: grid; gap: .35rem; }
.help-card .next-steps { margin-top: .9rem; }
.filters .filters__chips { flex: 1 1 100%; }
.filters__go { align-self: end; }
html.js .filters__go { display: none; }
.paper .chips a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-d-strong); border-radius: var(--r-ui); background: transparent; color: var(--ink-d); font-size: 1rem; font-weight: 600; text-decoration: none; transition: background-color var(--d-micro), border-color var(--d-micro), color var(--d-micro); }
.paper .chips a:hover { border-color: var(--ink-d); }
.paper .chips a[aria-current="true"] { background: var(--gold); color: var(--night); border-color: var(--gold); }
.ev-month__note { margin-bottom: 1.25rem; }
.ev-count { margin-bottom: 1rem; }
.empty { margin-top: 1rem; }
.paper section > .next-steps { margin-top: 1.25rem; }
.paper section > .docs, .paper section > .facts-d { margin-top: 1rem; }
.nw-facts dd small { display: block; font-weight: 600; color: var(--ink-d2); }
.nw-results .nw-feature + .nw-list { margin-top: 0; }
/* M2-EVT-20: on short landscape screens the register box stays in the page, so the page keeps most of the screen */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  body.has-ev-cta { padding-bottom: 0; }
  body.has-ev-cta .help { bottom: revert; }
  .ev-cta { position: static; display: block; padding: 1.25rem; border-width: 1px; border-radius: var(--r-photo); box-shadow: none; }
  .ev-cta h3, .ev-cta .ev-cta__more { display: block; }
  .ev-cta .status { margin-top: .6rem; }
  .ev-cta .btn { margin-top: 1rem; width: 100%; justify-content: center; }
}