/* ==========================================================================
   Announcement banner — strip / expand / card. Builds on styles.css tokens.
   Deliberately gold/cream so it never reads as the red "we're closed" banner,
   which always sits above it (DOM order, no z-index games).
   Mobile-first: the strip is one or two lines, the expand panel caps its photo,
   so neither eats a phone's first screen.
   ========================================================================== */

.btn--gold { background: var(--gold); color: var(--bg); }
.btn--gold:hover { background: var(--gold-2); }

/* ---------- Shared ---------- */
.announce { color: var(--bg); }
.announce__x {
  flex: none; width: 40px; height: 40px; margin: 0; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.announce__x:hover { background: rgba(18,15,13,.12); }
.announce__x:focus-visible, .announce__toggle:focus-visible { outline: 2px solid var(--bg); outline-offset: -4px; }
.announce__line {
  margin: 0; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3;
  /* two lines max on a phone; a longer headline belongs in the body */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.announce__img { width: 100%; object-fit: cover; display: block; background: var(--panel); }
.announce__text { display: grid; gap: .6rem; justify-items: start; min-width: 0; }
.announce__title { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800; overflow-wrap: anywhere; }
.announce__body { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; } /* owner's line breaks + spacing survive as typed (contract), no HTML needed */
.announce__btn { white-space: normal; text-align: center; }

/* ---------- 1. strip + 2. expand bar: gold band, dark text ---------- */
.announce--strip, .announce--expand {
  background: linear-gradient(90deg, var(--gold), var(--cheese));
  border-bottom: 2px solid var(--crust);
}
.announce--strip {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .3rem .5rem .3rem 1rem; text-align: center;
}
.announce--strip .announce__line { flex: 1; }

.announce__bar { display: flex; align-items: center; gap: .25rem; padding: .3rem .5rem .3rem 0; }
.announce__toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .4rem .5rem .4rem 1rem; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: center;
  font: inherit;
}
/* chevron: a rotated border box, so no icon file and no inline SVG to allow in the CSP */
.announce__chev {
  flex: none; width: .55rem; height: .55rem; margin-top: -.25rem;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.announce__toggle[aria-expanded="true"] .announce__chev { transform: rotate(-135deg); margin-top: .25rem; }

/* the opened card: cream, sits inside the gold band */
.announce__panel {
  background: var(--cream); color: var(--bg);
  display: grid; gap: 1rem; padding: 1rem;
  max-width: 760px; margin: 0 auto .75rem; border-radius: 14px;
  width: calc(100% - 1.5rem); overflow: hidden;
}
.announce__panel .announce__img { max-height: min(36vh, 240px); border-radius: 10px; }
@media (min-width: 640px) {
  .announce__panel:has(.announce__img) { grid-template-columns: 2fr 3fr; align-items: center; }
  .announce__panel .announce__img { height: 100%; max-height: 220px; }
}

/* ---------- 3. card under the hero ---------- */
.announce-card-slot { padding: 0 1rem; margin: 0 auto clamp(1rem, 4vw, 2rem); max-width: 760px; }
.announce--card {
  position: relative; overflow: hidden;
  background: var(--cream); border-radius: var(--radius);
  border-top: 5px solid var(--gold);
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
  display: grid;
}
/* Show the whole graphic at any ratio: the old fixed 2:1 box + object-fit:cover
   chopped the top/bottom off a near-square image on phones (client report
   2026-10-26). Natural height up to a cap; cream letterbox blends into the card. */
.announce--card .announce__img { object-fit: contain; background: var(--cream); max-height: 420px; }
.announce--card .announce__text { padding: 1.1rem 1.25rem 1.3rem; }
.announce--card.is-textonly .announce__text { padding-right: 3.25rem; } /* keep the title clear of the × */
.announce__x--card {
  position: absolute; top: .5rem; right: .5rem; z-index: 1;
  background: rgba(246,239,227,.9); color: var(--bg);
}
.announce__x--card:hover { background: var(--cream); }
@media (min-width: 640px) {
  .announce--card:not(.is-textonly) { grid-template-columns: 2fr 3fr; align-items: center; }
  .announce--card:not(.is-textonly) .announce__img { height: 100%; max-height: none; min-height: 200px; }
}

@media print { .announce, .pv { display: none !important; } }