/* ==========================================================================
   Qué Pasa Asturias — Components
   Order follows the page: nav → hero → pills → mosaic → cards → bands → footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--yellow { background: var(--yellow); color: #20180a; }
.btn--yellow:hover { background: var(--yellow-press); color: #20180a; }

.btn--pink { background: var(--pink-text); color: #fff; }
.btn--pink:hover { background: var(--pink-press); color: #fff; }

/* The blue of the Asturian flag. Officially Pantone 829; #0066ff is the
   usual digital rendering, and it clears 4.5:1 under white text. */
.btn--blue { background: var(--flag-blue); color: #fff; }
.btn--blue:hover { background: var(--flag-blue-press); color: #fff; }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: #071e4a; color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
}
.btn--ghost:hover { background: var(--navy); color: #fff; }

.btn--lg { padding: 0.9rem 2rem; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   2. Nav — utility links only (briefing §3: categories were removed from nav)
   -------------------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  flex-wrap: nowrap;
  padding-block: 1.125rem;
}

/* Instagram + ES/EN/DE, pinned to the right-hand end of the bar.
   `margin-left: auto` puts them there; `flex: 0 0 auto` keeps them at their
   natural size so they are never the thing that gives way when the bar runs
   short of room. The pills wrap instead — they are the only part that can
   wrap without moving anything else. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  /* The pills were shrinking the logo and riding over it once the row ran
     out of room. The brand keeps its size; the pills wrap instead. */
  flex: 0 0 auto;
  min-width: 0;
}
.nav__brand-name {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.nav__brand-tag {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}
/* The inverted question mark, standing in until the logo is settled (§6) */
.nav__mark {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: var(--pink-text);
  transform: translateY(2px);
}

.nav__links {
  display: flex;
  align-items: center;
  /* The pills used to be pushed to the right-hand end, which left a wide
     empty run between the logo and the first pill — fine when the bar sat on
     a photograph and the gap read as sky, obvious once it became a white
     band. They now start just after the brand. Instagram and ES/EN/DE stay
     hard right, so the bar reads left to right: who we are, where to go,
     then the controls. */
  /* Centred. The list grows to fill whatever is left between the brand and
     the controls, so centring inside it puts the pills in the middle of that
     space. No side indent, or the centring would be off by the indent. */
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  /* NOWRAP. The four pills are one group and stay on one line — letting them
     wrap was how "Aparece en la guía" ended up on a row of its own.
     Below the width where they genuinely fit they move into the ☰ menu
     instead (see the 1240px block), which is the only other honest option:
     the alternative is squeezing the text until it clips.
     `1 1 auto` + `min-width: 0` lets this absorb the spare width so it is
     this element, not its siblings, that gives way. */
  flex-wrap: nowrap;
  flex: 1 1 auto;
  /* NOT `min-width: 0`. That let this box be squeezed narrower than the pills
     inside it, and because the pills are end-aligned the overflow spilled
     LEFTWARDS — straight over the logo and the tagline. `max-content` makes
     the squeeze impossible: the pills keep their true width, and if the bar
     ever ran out of room the failure would be visible at the right-hand end
     rather than silently painting over the brand. */
  min-width: max-content;
}
.nav__links li { margin: 0; }
.nav__links a {
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  opacity: 0.92;
}
/* Plain text links in the bar underline on hover. The pills must NOT — they
   are the same component as the coloured pills further down the page, which
   grow slightly instead. This rule predates the pills being put in the nav
   and was quietly underlining them. */
.nav__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.nav__links a.navpill:hover { text-decoration: none; }

/* Language switch */
.langswitch {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 3px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.langswitch__btn {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.langswitch__btn[aria-pressed="true"] { background: #fff; color: var(--navy); }

/* On light backgrounds (inner pages) the nav flips to ink */
.nav--light { color: var(--ink); }
.nav--light .langswitch {
  background: rgba(11, 42, 99, 0.07);
  box-shadow: inset 0 0 0 1px rgba(11, 42, 99, 0.14);
}
.nav--light .langswitch__btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.nav--over-photo { color: #fff; text-shadow: 0 1px 8px rgba(6, 14, 30, 0.5); }

/* Mobile nav toggle */
.nav__toggle { display: none; }

@media (max-width: 1280px) {
  /* The pill list becomes an absolutely-positioned dropdown below, so it
     leaves the flex row and can no longer absorb the spare width. Wrapping
     has to come back on: at 360px the brand, the menu button, Instagram and
     ES/EN/DE together need about 500px, and forcing them onto one row would
     simply overflow the screen.
     `justify-content: flex-end` is what keeps this honest — if the actions
     group does wrap onto a second row, it lands on the RIGHT rather than
     back at the left, which was the whole complaint. The brand's auto margin
     overrides that on the first row, so it still sits hard left. */
  .nav { flex-wrap: wrap; justify-content: flex-end; }
  .nav__brand { margin-right: auto; }
  .nav__toggle { margin-left: 0; }
  .nav__links { margin-left: 0; }        /* dropdown: no indent */
  .nav__actions { margin-left: 0; }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    color: inherit;
    border: 0;
    border-radius: var(--r-pill);
    padding: 0.45rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
  }
  .nav--light .nav__toggle {
    background: rgba(11, 42, 99, 0.07);
    box-shadow: inset 0 0 0 1px rgba(11, 42, 99, 0.14);
  }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%; left: var(--pad-x); right: var(--pad-x);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    color: var(--ink);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    z-index: 40;
    text-shadow: none;
  }
  .nav__links[data-open="true"] { display: flex; }
  .nav__links a { display: block; padding: 0.75rem 0.9rem; border-radius: var(--r-sm); }
  .nav__links a:hover { background: var(--mint-light); text-decoration: none; }
  .nav__links .btn { width: 100%; margin-top: 0.25rem; }
}

/* --------------------------------------------------------------------------
   3. Hero — full-bleed photo, NOT darkened (briefing §3).
      Legibility comes from text shadow. If the photo is missing, the gradient
      underneath keeps the white text readable.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: var(--hero-min-h);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  border-bottom-left-radius: var(--r-card);
  border-bottom-right-radius: var(--r-card);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Fallback while assets/img/hero-cares.jpg is not in place */
  background:
    linear-gradient(150deg, #2b6ea8 0%, #4f97b8 34%, #7fae8e 62%, #35603f 100%);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;               /* briefing §5 */
  filter: brightness(107%) saturate(114%) contrast(97%);
}
/* A very soft top-and-bottom veil only — the photo itself stays at 0% dimming */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The photograph itself stays undimmed through the top half (briefing §3).
     The lower scrim is not decoration: the bottom of this shot is pale
     limestone scree, and white text on it is otherwise unreadable outdoors. */
  background:
    linear-gradient(to bottom,
      rgba(6, 14, 30, 0.34) 0%,
      rgba(6, 14, 30, 0.06) 22%,
      rgba(6, 14, 30, 0.00) 40%,
      rgba(6, 14, 30, 0.30) 68%,
      rgba(6, 14, 30, 0.66) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* less foot room too — the old value was sized against a 610px hero */
  padding-bottom: clamp(1.25rem, 3vw, 2.25rem);
}
.hero__body {
  margin-top: auto;
  max-width: 46rem;
  color: #fff;
}
.hero h1 {
  color: #fff;
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  margin: 0 0 0.6rem;
  text-shadow: var(--hero-text-shadow);
}
.hero__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.1rem 0 0;
}
.hero__sub {
  font-size: var(--fs-hero-sub);
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
  max-width: 34rem;
  text-shadow: var(--hero-text-shadow);
}

/* Search — three fields + pink button (briefing §3) */
.search {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.4rem 0.4rem 0.35rem;
  box-shadow: var(--shadow-lg);
  max-width: 44rem;
  margin: clamp(1.5rem, 5vw, 3rem) 0 clamp(1.75rem, 5vw, 3rem);
  backdrop-filter: blur(6px);
}
.search__field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.35rem 1.05rem;
  border-right: 1px solid var(--hairline);
}
.search__field:nth-of-type(3) { border-right: 0; }
.search__label {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1px;
}
.search__input {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.search__input::placeholder { color: #97a1b0; font-weight: 400; }
.search__input:focus { outline: 0; }
.search__field:focus-within { border-radius: var(--r-pill); box-shadow: 0 0 0 2px rgba(211, 16, 79, 0.3); }
.search__submit { flex: 0 0 auto; align-self: center; padding: 0.75rem 1.6rem; }

@media (max-width: 720px) {
  .search {
    flex-direction: column;
    border-radius: var(--r-card);
    padding: 0.5rem;
    gap: 0.15rem;
  }
  .search__field {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 0.55rem 0.9rem;
  }
  .search__field:nth-of-type(3) { border-bottom: 0; }
  .search__submit { width: 100%; margin-top: 0.4rem; }
  .hero { min-height: 540px; }
}

/* --------------------------------------------------------------------------
   4. Category pills — solid colour, the most distinctive thing on the page
   -------------------------------------------------------------------------- */
.pills {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.35rem 0;   /* room for the hover scale, so nothing gets clipped */
}
/* "Asturias en colores" — set in the flag blue, and the word that names the
   colours picks up each category hue in turn, one letter group at a time. */
.pills__label {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flag-blue);
  margin-right: 0.5rem;
  white-space: nowrap;
}
.pills__label em {
  font-style: normal;
  background: linear-gradient(90deg,
    #ffc93c 0%, #0e9b8a 20%, #e01259 40%,
    #5cc0e8 58%, #0b2a63 74%, #7c5cd6 88%, #ff4d8d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* If a browser cannot clip a gradient to text, the flag blue shows instead. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .pills__label em { color: var(--flag-blue); background: none; }
}
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: var(--r-pill);
  font-size: var(--fs-pill);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: #20180a;
  background: var(--hairline);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease);
}
.pill:hover,
.pill:focus-visible {
  transform: scale(1.12) translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: saturate(110%);
  z-index: 1;
}
.pill:hover { color: #20180a; }
.pill--onDark:hover { color: #fff; }
.pill--onDark { color: #fff; }
.pill[aria-current="page"] {
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 4.5px currentColor;
}
/* Muted state used on category pages for the six that are not current */
.pills--nav .pill:not([aria-current="page"]) { opacity: 0.62; }
.pills--nav .pill:not([aria-current="page"]):hover { opacity: 1; }

@media (max-width: 640px) {
  .pills { gap: 0.45rem; }
  .pills__label { width: 100%; margin-bottom: 0.15rem; }
  .pill { padding: 0.45rem 0.9rem; font-size: 0.8125rem; }
}

/* --------------------------------------------------------------------------
   5. Photo mosaic — 3 columns, first tile spans 2 (briefing §5)
   -------------------------------------------------------------------------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: var(--grid-row-h);
  gap: var(--grid-gap);
}
.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: #fff; }
.tile--wide { grid-column: span 2; }
.tile__bg { position: absolute; inset: 0; z-index: -2; }
.tile__bg img { width: 100%; height: 100%; object-fit: cover; }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(6, 14, 30, 0.72) 0%,
    rgba(6, 14, 30, 0.30) 44%,
    rgba(6, 14, 30, 0.02) 100%);
}
.tile__text { padding: 1rem 1.15rem; }
.tile__kicker {
  font-size: var(--fs-kicker);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 0.3rem;
}
.tile__title {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 0 0 0.15rem;
  color: #fff;
}
.tile__sub {
  font-size: 0.78125rem;
  margin: 0;
  opacity: 0.9;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .tile--wide { grid-column: span 2; }
}
@media (max-width: 520px) {
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 170px; }
  .tile--wide { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   6. Plan cards — mint fill, mint border (briefing §4)
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--mint-light);
  border: 1px solid var(--mint);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal);
  color: inherit;
}
.card__media {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: var(--mint);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__body { padding: 1.05rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.card__kicker {
  font-size: var(--fs-kicker);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin: 0 0 0.4rem;
}
.card__title {
  font-size: var(--fs-card-title);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.card__desc {
  font-size: var(--fs-card-body);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.7rem;
  border-top: 1px solid var(--mint);
}
.card__place {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-text);
}
.card__meta { font-size: 0.75rem; color: var(--muted); }

/* Small flag on any listing whose date/time is still placeholder (briefing §8) */
.card__flag,
.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #85681c;
  background: #fff4d6;
  border: 1px solid #f0dca2;
  border-radius: var(--r-pill);
  padding: 0.15rem 0.5rem;
}
body[data-show-flags="false"] .flag { display: none; }

/* --------------------------------------------------------------------------
   7. Newsletter band — pink
   -------------------------------------------------------------------------- */
.band {
  border-radius: var(--r-card);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.band--pink { background: var(--pink-text); color: #fff; }
.band--navy { background: var(--navy); color: #fff; }
.band h2, .band h3 { color: #fff; }

.newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.newsletter__text { flex: 1 1 22rem; }
.newsletter__text h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.028em;
  margin: 0 0 0.4rem;
}
.newsletter__text p { font-size: 0.84375rem; margin: 0; opacity: 0.94; }
.newsletter__form { flex: 0 1 24rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.newsletter__form input[type="email"] {
  flex: 1 1 12rem;
  min-width: 0;
  border: 0;
  border-radius: var(--r-sm);
  padding: 0.7rem 0.95rem;
  font-size: 0.875rem;
  background: #fff;
  color: var(--ink);
}
.newsletter__form .btn { border-radius: var(--r-sm); background: var(--navy); color: #fff; }
.newsletter__form .btn:hover { background: #071e4a; }
.newsletter__note { flex: 1 1 100%; font-size: 0.6875rem; opacity: 0.85; margin: 0.15rem 0 0; }
.form-status { flex: 1 1 100%; font-size: 0.8125rem; font-weight: 600; margin: 0.35rem 0 0; }

/* --------------------------------------------------------------------------
   8. Closing CTA slab — navy, yellow button
   -------------------------------------------------------------------------- */
.cta-slab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.cta-slab__text { flex: 1 1 26rem; }
.cta-slab h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
}
.cta-slab p { font-size: 0.875rem; margin: 0; opacity: 0.88; max-width: 34rem; }

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.86);
  padding-block: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.footer a { color: rgba(255, 255, 255, 0.86); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.footer__brand .nav__brand-name { color: #fff; }
.footer__blurb { font-size: 0.8125rem; opacity: 0.8; margin: 0.6rem 0 0; max-width: 22rem; }
/* h2 in the markup, because the footer's two column headings are top-level
   sections of the page, not sub-sections of whatever came last. They look
   identical — only the level a screen reader announces changes. */
.footer h2 {
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  opacity: 0.7;
}
.footer ul { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.footer li + li { margin-top: 0.45rem; }
.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.75rem;
  opacity: 0.75;
}
@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
/* Two columns of category names inside a 320px screen leaves about 130px
   each, which breaks "Comer y beber" across three lines. One column below. */
@media (max-width: 420px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   10. Category page header band
   -------------------------------------------------------------------------- */
.cathead {
  background: var(--cat-hdr, var(--navy));
  color: var(--cat-hdr-fg, #fff);
  padding-block: clamp(1.75rem, 5vw, 3.25rem);
}
.cathead h1 {
  color: inherit;
  font-size: var(--fs-cat-hero);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-cat-hero);
  margin: 0 0 0.75rem;
}
.cathead__intro { font-size: 1rem; line-height: 1.55; max-width: 42rem; margin: 0 0 1.35rem; opacity: 0.94; }
.cathead__stats { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cathead__stats li {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}
/* Dark-text headers (Mercados, Naturaleza) need darker chips */
.cathead[data-fg="dark"] .cathead__stats li {
  background: rgba(32, 24, 10, 0.12);
  box-shadow: inset 0 0 0 1px rgba(32, 24, 10, 0.2);
}

.breadcrumb {
  display: flex;
  align-items: center;
  /* Plan titles get long — "Certamen del Queso de Cabrales" after two
     ancestors will not fit on a phone in one line. */
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
  padding-block: 0.9rem;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { color: var(--pink-text); text-decoration: underline; }
.breadcrumb__sep { opacity: 0.5; }

/* --------------------------------------------------------------------------
   11. Filter bar (agenda page)
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-direction: column; gap: 1rem; }
.filters__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 0.55rem 1.1rem;
  max-width: 26rem;
}
.filters__search input { border: 0; background: transparent; width: 100%; font-size: 0.875rem; }
.filters__search input:focus { outline: 0; }
.filters__count { font-size: 0.8125rem; color: var(--muted); font-weight: 600; }

.empty {
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
  color: var(--muted);
  background: var(--mint-light);
  border: 1px dashed var(--mint);
  border-radius: var(--r-card);
}

/* --------------------------------------------------------------------------
   12. Forms (submit page)
   -------------------------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: #fff;
  padding: 0.7rem 0.9rem;
  font-size: 0.9375rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--pink-text);
  box-shadow: 0 0 0 3px rgba(211, 16, 79, 0.18);
}
.field__hint { font-size: 0.75rem; color: var(--muted); margin: 0.3rem 0 0; }
.field--half-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .field--half-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   13. Prose (about page)
   -------------------------------------------------------------------------- */
.prose { font-size: 1rem; line-height: 1.7; }
.prose h2 { font-size: 1.375rem; margin: 2rem 0 0.75rem; }
.prose p { margin: 0 0 1rem; }
.prose__lead { font-size: 1.1875rem; line-height: 1.5; font-weight: 600; color: var(--navy); }
.prose blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.35rem;
  border-left: 4px solid var(--yellow);
  background: var(--mint-light);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.9375rem;
}
.prose blockquote p:last-child { margin: 0; }

/* --------------------------------------------------------------------------
   14. Notice box (used for the placeholder-data warning, briefing §8)
   -------------------------------------------------------------------------- */
.notice {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: #fff4d6;
  border: 1px solid #f0dca2;
  border-radius: var(--r-card);
  padding: 1rem 1.15rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #6d5615;
}
.notice strong { color: #4a3a0c; }
.notice p { margin: 0; }
.notice__icon { flex: 0 0 auto; font-size: 1rem; line-height: 1.3; }
body[data-show-flags="false"] .notice { display: none; }

/* --------------------------------------------------------------------------
   15. Events calendar

   The day cells are white and the card around them is cream, not the other
   way round. Reversed, most of the grid sat on beige because only days with
   events were being lifted to white.
   -------------------------------------------------------------------------- */
.calendar__sub {
  font-size: 0.84375rem;
  color: var(--muted);
  margin: -0.75rem 0 1.25rem;
  max-width: 40rem;
}

.calendar {
  background: var(--mint-light);
  border: 1px solid var(--mint);
  border-radius: var(--r-card);
  padding: clamp(0.85rem, 2vw, 1.5rem);
  box-shadow: var(--shadow-sm);
}

.calendar__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.calendar__month {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
  /* Fixed width so the arrows do not jump about as the month name changes
     length between "mayo" and "septiembre". */
  min-width: 12rem;
  text-align: center;
  text-transform: capitalize;
}

/* But 12rem plus two arrow buttons plus the gaps needs 302px, and inside the
   calendar card a 360px phone only offers about 291px — so this pushed the
   whole page sideways on every handset up to roughly 390px, which is most of
   them. Below that the fixed width is dropped; the arrows shifting slightly
   is a far smaller problem than a page that scrolls horizontally. */
@media (max-width: 420px) {
  .calendar__bar { gap: 0.5rem; }
  .calendar__month { min-width: 0; font-size: 1rem; }
}
.calendar__nav {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  font-size: 1.125rem;
  line-height: 1;
  border: 1px solid var(--mint);
  background: var(--white);
  color: var(--navy);
  border-radius: var(--r-pill);
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* The month name on the arrow, rather than "previous" / "next" */
.calendar__navmonth {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: -0.005em;
}
@media (max-width: 560px) {
  .calendar__navmonth { display: none; }
  .calendar__nav { padding: 0.35rem 0.7rem; }
}
.calendar__nav:hover { background: var(--flag-blue); border-color: var(--flag-blue); color: #fff; }

/* The month itself is one white slab, so the grid always reaches both edges */
.calendar__sheet {
  background: var(--white);
  border: 1px solid var(--mint);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.calendar__weekdays,
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: 100%;
}
.calendar__weekdays {
  background: var(--mint-light);
  border-bottom: 1px solid var(--mint);
}
.calendar__weekdays span {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  text-align: center;
  padding: 0.5rem 0.25rem;
  opacity: 0.8;
}

/* Hairlines drawn with borders on the cells, so there are no gaps to show
   the card colour through — this is what made the grid look patchy. */
.calendar__cell {
  min-height: 104px;
  background: var(--white);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 0.35rem 0.35rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.calendar__cell:nth-child(7n) { border-right: 0; }
.calendar__cell--empty { background: #fcfbf8; }
.calendar__cell.is-past .calendar__chip { opacity: 0.45; }
.calendar__cell.is-past .calendar__daynum { opacity: 0.5; }
.calendar__cell.is-today { background: #f2f8ff; box-shadow: inset 0 0 0 2px var(--flag-blue); }

.calendar__daynum {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0 0.15rem 0.1rem;
}
.calendar__cell.is-today .calendar__daynum { color: var(--flag-blue); }

.calendar__chip {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.2rem 0.4rem;
  border-radius: 5px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: filter var(--t-fast) var(--ease);
}
.calendar__chip:hover { filter: brightness(0.9); }
.calendar__more {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--muted);
  padding-left: 0.25rem;
}

.calendar__empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.8125rem;
  padding: 1.25rem 0 0.25rem;
  margin: 0;
}

.calendar__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
}
.calendar__key li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.calendar__swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

@media (max-width: 760px) {
  .calendar__cell { min-height: 68px; padding: 0.25rem; }
  .calendar__chip {
    font-size: 0;
    height: 6px;
    padding: 0;
    border-radius: 3px;
  }
  /* The counter used to be hidden here, which meant that on a phone the
     events beyond the third were not merely hard to reach — they left no
     trace at all. It stays, and the whole cell opens the day. */
  .calendar__more { font-size: 0.5rem; }
  .calendar__daynum { font-size: 0.6875rem; }
}

/* --------------------------------------------------------------------------
   16. Logo
   The mark is set by LOGO in build.js. Sized so it holds its own beside the
   wordmark without competing with it.
   -------------------------------------------------------------------------- */
/* Bigger, as asked. The badge carries a lot of illustration, so it needs
   room to be worth having at all — at 34px it was a coloured smudge. */
.nav__logo {
  /* 96px rather than 72. The badge carries the whole name inside the circle,
     and at 72px the two lines of type stop being readable — you recognise the
     shape but not the words. 96px is where they come back. There is room for
     it since the bar got its own wider container. */
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  align-self: center;
  border-radius: 0;   /* the artwork is already a circle */
}
.nav__logo--footer { width: 96px; height: 96px; }

@media (max-width: 1280px) {
  .nav__logo { width: 76px; height: 76px; }
}
/* A horizontal wordmark carries the name itself, so it replaces the text
   rather than sitting beside it. */
.nav__logo--wide {
  width: auto;
  height: 30px;
  border-radius: 0;
}
.footer__brand .nav__logo--wide { height: 38px; }
.footer__brand .nav__logo { border-radius: 10px; }

@media (max-width: 520px) {
  .nav__logo { width: 64px; height: 64px; }
  .nav__brand-tag { display: none; }
}

/* --------------------------------------------------------------------------
   17. Instagram link in the nav
   -------------------------------------------------------------------------- */
.nav__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  color: inherit;
  flex: 0 0 auto;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav__ig:hover { transform: scale(1.12); color: inherit; }
.nav--over-photo .nav__ig { background: rgba(255, 255, 255, 0.22); }
.nav--over-photo .nav__ig:hover { background: rgba(255, 255, 255, 0.38); }
.nav--light .nav__ig { background: rgba(11, 42, 99, 0.07); color: var(--navy); }
.nav--light .nav__ig:hover { background: var(--pink-text); color: #fff; }

/* --------------------------------------------------------------------------
   18. Plan page artwork
   Was a flat block of colour; now carries the event or category illustration.
   -------------------------------------------------------------------------- */
.plan__hero {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 21 / 9;
}
.plan__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.plan__facts p { display: flex; flex-wrap: wrap; gap: 0 0.4rem; align-items: baseline; }

/* --------------------------------------------------------------------------
   19. "How it works" list on the business page
   -------------------------------------------------------------------------- */
.howitworks {
  background: var(--mint-light);
  border: 1px solid var(--mint);
  border-radius: var(--r-card);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}
.howitworks h2 {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin: 0 0 0.75rem;
}
.howitworks ol { margin: 0; padding-left: 1.2em; font-size: 0.9375rem; }
.howitworks li { margin-bottom: 0.5rem; }
.howitworks li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   20. "Coming up" list under the calendar

   A month grid only shows one month, and most months here hold two or three
   categories. This is what stops September's concerts from looking missing.
   -------------------------------------------------------------------------- */
.upcoming { margin-top: 2rem; }
.upcoming__title {
  font-size: var(--fs-section);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
}
.upcoming__list { list-style: none; margin: 0; padding: 0; }
.upcoming__item {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}
.upcoming__item:last-child { border-bottom: 0; }
.upcoming__item.is-now { background: #f2f8ff; border-radius: var(--r-sm); }

.upcoming__date {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--flag-blue);
  text-transform: capitalize;
}
.upcoming__link {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.upcoming__link:hover { color: var(--pink-text); text-decoration: underline; }
.upcoming__cat {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.upcoming__place { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.upcoming__note {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0.9rem 0 0;
  font-style: italic;
}

@media (max-width: 700px) {
  .upcoming__item {
    grid-template-columns: 4.5rem 1fr;
    gap: 0.3rem 0.6rem;
  }
  .upcoming__cat { grid-column: 2; justify-self: start; }
  /* Place names have to be allowed to wrap here. "Recinto Ferial Luis Adaro,
     Gijón / Xixón" is 209px and "Cangas del Narcea / Cangas del Narcea" is
     215px, against roughly 206px of column on a 360px phone — so held on one
     line they spilled out of the grid. */
  .upcoming__place { grid-column: 2; white-space: normal; }
}

/* --------------------------------------------------------------------------
   21. Plan page actions — official link plus the category link
   -------------------------------------------------------------------------- */
.plan__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.plan__nolink {
  font-size: 0.8125rem;
  color: var(--muted);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   22. Nav pills

   All four routes now sit together in the header, each in its own colour, so
   the relationship between them is visible at a glance instead of one being
   a button and the rest being plain links. Blue is the flag colour and marks
   the business route as the odd one out.
   -------------------------------------------------------------------------- */
.navpill {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.95rem;
  border-radius: var(--r-pill);
  font-size: 0.78125rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease);
}
.navpill:hover,
.navpill:focus-visible {
  transform: scale(1.07);
  box-shadow: var(--shadow-md);
  filter: saturate(108%);
}

/* Home is the odd one out: an outline rather than a fill, so it reads as
   "go back" rather than as another destination competing with the four. */
.navpill--home {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
  gap: 0.3rem;
}
.navpill--home:hover { background: var(--navy); color: #fff; }
.nav--over-photo .navpill--home {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.nav--over-photo .navpill--home:hover { background: rgba(255,255,255,.22); color: #fff; }

/* Contrast checked in tools/audit.js, same as the category pills */
.navpill--yellow { background: var(--yellow);     color: #20180a; }
.navpill--green  { background: var(--teal);       color: #20180a; }
.navpill--pink   { background: var(--pink-pill);  color: #ffffff; }
.navpill--blue   { background: var(--flag-blue);  color: #ffffff; }

.navpill--yellow:hover { color: #20180a; }
.navpill--green:hover  { color: #20180a; }
.navpill--pink:hover,
.navpill--blue:hover   { color: #ffffff; }

/* No white hairline over the photograph.
   It was there to lift the pills off the image, but it made them a different
   component from the coloured pills below — which is exactly what Angela
   spotted. The fills are solid and saturated enough to hold their own against
   the photo without it, and matching the rest of the page matters more.
   The Home pill keeps its outline: that is its design, not a border, and it
   is drawn by its own rule above. */
.nav--over-photo .navpill:hover { box-shadow: var(--shadow-md); }

.nav__links { gap: 0.55rem; }

/* Between about 1240 and 1440 the bar is tight but the pills still fit if
   they are given less air. Measured with the widest of the three languages
   (Spanish, and on inner pages where there are five pills, not four): at
   this spacing the whole bar needs roughly 1135px, so it clears 1241px with
   room to spare. Below that the ☰ menu takes over. */
@media (max-width: 1440px) {
  .nav__links { gap: 0.45rem; }
  .navpill { padding: 0.42rem 0.8rem; }
}

@media (max-width: 900px) {
  .navpill { padding: 0.38rem 0.75rem; font-size: 0.75rem; }
  .nav__links { gap: 0.4rem; }
}
@media (max-width: 1280px) {
  /* In the dropdown they go full width and keep their colours */
  .nav__links .navpill { width: 100%; justify-content: center; padding: 0.7rem 1rem; margin-bottom: 0.3rem; }
  .nav__links a:hover { background: none; }
}

/* --------------------------------------------------------------------------
   23. Privacy notice

   Reject is built from exactly the same element and class as Accept — same
   size, same weight, same colour. The Spanish DPA has fined sites where
   refusing was a faint link next to a solid button, and it is the single
   most common way a banner fails an audit.
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  background: var(--white);
  border-top: 3px solid var(--flag-blue);
  box-shadow: 0 -8px 32px rgba(14, 21, 36, 0.14);
  padding: 1rem var(--pad-x) 1.1rem;
}
.consent[hidden] { display: none; }

.consent__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}
.consent__text { flex: 1 1 24rem; }
.consent__text strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.consent__text p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
}

.consent__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
/* Identical treatment for every choice — that is the point */
.consent__btn { padding: 0.6rem 1.4rem; font-size: 0.8125rem; }
.consent__more {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.consent__more:hover { color: var(--pink-text); }

@media (max-width: 560px) {
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   24. Consent checkbox on the forms
   -------------------------------------------------------------------------- */
.field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.field--check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0.15rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--flag-blue);
}
.field--check label {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Banner — the white bar the badge sits on

   The nav used to lie over the hero photograph. The illustrated badge is a
   detailed drawing on a pale disc, and over a photograph it had nothing to
   sit against: the picture showed through around every edge and the whole
   thing turned to noise at small sizes.

   A solid white band fixes that by giving it a plain field. It runs the full
   width of the window while the nav inside it stays in its container, so the
   white reaches both edges of the screen but the logo stays aligned with the
   page.

   The hairline underneath is what stops the white bar dissolving into the
   cream page below it — the two are only a few levels apart.
   -------------------------------------------------------------------------- */
.banner {
  background: #fff;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  z-index: 5;
}
.banner .nav { padding-block: 0.75rem; }


/* --------------------------------------------------------------------------
   Day modal — everything on one date, over the page

   A cell shows at most three events; beyond that the row grows taller than
   its neighbours and the grid loses its rhythm. The overflow used to be a
   dead "+2". Now any day with events is a button and opens this.

   An overlay rather than a real browser window: window.open is blocked by
   default in most browsers, and on a phone a popup loses the back button.
   -------------------------------------------------------------------------- */
.calendar__cell[data-date] { cursor: pointer; }
.calendar__cell[data-date]:hover { background: var(--mint-light); }
.calendar__cell[data-date]:focus-visible {
  outline: 3px solid var(--pink-text);
  outline-offset: -3px;
}
.calendar__cell.is-selected {
  background: var(--mint-light);
  box-shadow: inset 0 0 0 2px var(--teal-text);
}
.calendar__more { cursor: inherit; }

/* stops the page scrolling behind the dialog */
body.has-modal { overflow: hidden; }

.daymodal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.daymodal[hidden] { display: none; }
.daymodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 42, 99, 0.45);
}
.daymodal__panel {
  position: relative;
  width: min(30rem, 100%);
  max-height: min(80vh, 40rem);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem 1.6rem 1.25rem;
}
.daymodal__close {
  position: absolute;
  top: 0.6rem; right: 0.7rem;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  padding: 0.25rem 0.45rem;
  border-radius: var(--r-sm);
}
.daymodal__close:hover { color: var(--ink); background: var(--mint-light); }
.daymodal__title {
  margin: 0 2rem 0.9rem 0;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: capitalize;
}
.daymodal__list { list-style: none; margin: 0; padding: 0; }
.daymodal__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
  margin: 0;
}
.daymodal__item:last-child { border-bottom: 0; }
.daymodal__dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
  transform: translateY(1px);
}
.daymodal__link {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.daymodal__link:hover { color: var(--pink-text); text-decoration: underline; }
.daymodal__place { font-size: 0.75rem; color: var(--muted); }

@media (max-width: 560px) {
  .daymodal { padding: 0.75rem; align-items: flex-end; }
  .daymodal__panel { max-height: 78vh; padding: 1.25rem 1.1rem 1rem; }
}