:root {
  --cesl-blue: #214a84;
  --cesl-blue-dark: #173d71;
  --cesl-green: #18b88c;
  --cesl-lime: #afcb42;
  --cesl-mint: #eef9f5;
  --cesl-text: #24343b;
  --cesl-muted: #61727a;
  --content-width: 1200px;
  --focus: 3px solid #ffbf47;
  --radius: 14px;
  --shadow-soft: 0 8px 24px rgba(23, 61, 113, .08);
  --shadow-hover: 0 14px 32px rgba(23, 61, 113, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--cesl-text);
  background: #fbfdfc;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; }
*:focus-visible { outline: var(--focus); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: #fff;
  padding: .75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--cesl-blue);
  color: var(--cesl-blue);
  text-decoration: none;
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
.button:hover, .button:focus-visible { background: var(--cesl-blue); color: #fff; }

/* Header */
.site-header { background: #fff; }
.site-header__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  max-width: var(--content-width);
  margin: 0 auto;
}
.site-logo img { height: 84px; }
.site-header__verse {
  flex: 1 1 320px;
  text-align: center;
  font-style: italic;
  color: var(--cesl-muted);
  margin: 0;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-search {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.site-search input {
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid #dbe4e1;
  border-radius: 999px;
}
.site-search__submit {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #dbe4e1;
  background: #fff;
  color: var(--cesl-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.site-search__submit:hover, .site-search__submit:focus-visible { background: var(--cesl-mint); }
.donate-button {
  min-height: 44px;
  padding: .5rem 1.25rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.donate-button {
  background: var(--cesl-green);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}
.donate-button:hover, .donate-button:focus-visible { transform: translateY(-1px); box-shadow: var(--shadow-hover); }

/* Nav */
.site-nav { background: var(--cesl-blue); }
.site-nav__toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  margin: .5rem;
}
.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
  margin: 0;
  padding: 0 1rem;
  max-width: var(--content-width);
  margin-inline: auto;
}
.site-nav > ul > li { position: relative; }
.site-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 1rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a:focus { background: rgba(255, 255, 255, .12); border-radius: 6px; }
.site-nav a.has-children::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
}
.site-nav > ul > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  background: #fff;
  min-width: 220px;
  padding: .5rem 0;
  margin: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow-hover);
  z-index: 20;
}
.site-nav > ul > li:hover > ul,
.site-nav > ul > li:focus-within > ul { display: flex; }
.site-nav > ul > li > ul a { color: var(--cesl-text); min-height: 40px; }
.site-nav > ul > li > ul a:hover, .site-nav > ul > li > ul a:focus { background: var(--cesl-mint); }

main { max-width: var(--content-width); margin: 0 auto; padding: 2rem 1rem 3rem; }
main > * + * { margin-top: 2.25rem; }

/* Single-item pages (Páginas, Notícias, Eventos, Atividades): a narrower
   reading column instead of the full site width used by the home grids. */
.article { max-width: 760px; margin: 0 auto; }
.article-body { line-height: 1.7; }
.article-body img { max-width: 100%; height: auto; display: block; margin: 1rem auto; border-radius: 8px; }
.article-body img.cesl-img-small { width: 25%; }
.article-body img.cesl-img-medium { width: 50%; }
.article-body img.cesl-img-large { width: 75%; }
.article-body img.cesl-img-full { width: 100%; }
/* The editor's alignment toolbar produces these same class names (Quill's
   quill.snow.css defines them, but that stylesheet is only loaded in the
   admin panel) — without this, alignment worked in the editor and was
   saved correctly, but had no visible effect on the public page. */
.article-body .ql-align-center { text-align: center; }
.article-body .ql-align-right { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }

/* "Notícias e Eventos" index page: a two-column layout, intermediate width
   (narrower than the home page's full 1200px, wider than the 760px reading
   column, since each row needs room for a thumbnail next to its text). */
.news-events-page {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.news-events-col h2 { font-size: 1.2rem; margin: 0 0 1rem; color: var(--cesl-blue-dark); }
.news-events-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.news-events-item { display: grid; grid-template-columns: 1fr 96px; gap: 1rem; align-items: center; }
.news-events-item__text h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.news-events-item__text h3 a { color: var(--cesl-text); text-decoration: none; }
.news-events-item__text h3 a:hover { color: var(--cesl-blue); }
.news-events-item__text p { margin: .35rem 0 0; color: var(--cesl-muted); font-size: .9rem; }
.news-events-item__media {
  width: 96px;
  height: 72px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--cesl-blue) 0%, var(--cesl-green) 100%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

@media (max-width: 700px) {
  .news-events-page { grid-template-columns: 1fr; }
}

/* Galeria de fotos: mesma largura intermediária das outras páginas de
   índice, para o grid ter espaço sem esticar até a borda do site. */
.gallery-page { max-width: 960px; margin: 0 auto; }
.gallery-page h1 { margin-bottom: .5rem; }
.gallery-back { margin: 0 0 .75rem; font-size: .9rem; }
.gallery-date { color: var(--cesl-muted); margin: 0 0 .75rem; }

.gallery-albums,
.gallery-grid {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.gallery-album__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  height: 100%;
}
.gallery-album__link:hover { border-color: var(--cesl-blue); }
.gallery-album__cover {
  display: block;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--cesl-blue) 0%, var(--cesl-green) 100%);
  background-size: cover;
  background-position: center;
}
.gallery-album__body { display: block; padding: .75rem .85rem; }
.gallery-album__title { display: block; font-weight: 600; line-height: 1.35; }
.gallery-album__date,
.gallery-album__count { display: block; font-size: .85rem; color: var(--cesl-muted); margin-top: .2rem; }

.gallery-grid__link { display: block; text-decoration: none; color: inherit; }
/* Fixed 4:3 box matching the generated thumbnail, so the grid stays even
   whatever proportion the original photo had. */
.gallery-grid__link img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(0, 0, 0, .05);
}
.gallery-grid__link:hover img { opacity: .9; }
.gallery-grid__caption {
  display: block;
  margin-top: .4rem;
  font-size: .85rem;
  color: var(--cesl-muted);
  line-height: 1.35;
}

/* Lightbox */
body.gallery-lightbox-open { overflow: hidden; }
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.gallery-lightbox__image {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
}
.gallery-lightbox__caption { color: #fff; font-size: .9rem; text-align: center; max-width: 60ch; }
.gallery-lightbox__caption[hidden] { display: none; }
.gallery-lightbox__close,
.gallery-lightbox__nav {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  flex: 0 0 auto;
}
.gallery-lightbox__close:hover,
.gallery-lightbox__nav:hover { background: rgba(255, 255, 255, .25); }
.gallery-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.8rem;
}
.gallery-lightbox__nav { width: 3rem; height: 3rem; font-size: 2rem; }
.gallery-lightbox__nav[hidden] { display: none; }

@media (max-width: 520px) {
  .gallery-lightbox__nav { width: 2.4rem; height: 2.4rem; font-size: 1.6rem; }
}

.home-section__heading {
  font-size: 1.4rem;
  margin: 0 0 .9rem;
  color: var(--cesl-blue-dark);
}

/* Hero / news */
.home-hero__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.1rem;
}
.hero-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hero-card:hover, .hero-card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.hero-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--cesl-blue) 0%, var(--cesl-green) 100%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hero-card--secondary .hero-card__media { aspect-ratio: 16 / 7; }
.hero-card__badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: var(--cesl-lime);
  color: var(--cesl-blue-dark);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .3rem .7rem;
  border-radius: 999px;
}
.hero-card__caption { padding: .75rem .9rem; background: var(--cesl-blue); }
.hero-card__caption h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.hero-card--lead .hero-card__caption h3 { font-size: 1.35rem; }
.hero-card__caption h3 a { color: #fff; text-decoration: none; }
.hero-card__caption h3 a:hover { color: var(--cesl-lime); }
.hero-card__caption p { margin: .35rem 0 0; color: rgba(255, 255, 255, .82); font-size: .95rem; }
.hero-card__stack { display: flex; flex-direction: column; gap: 1.1rem; }
.home-hero__more { text-align: center; margin-top: 1.1rem; }

.hero-carousel .carousel__track { gap: 0; }
.hero-carousel .hero-card--lead.carousel-card { flex: 0 0 100%; scroll-snap-align: start; }
.hero-carousel .carousel__controls { margin-top: .75rem; }

/* Shared skeleton look */
.skeleton-shimmer, .hero-card--skeleton .hero-card__media, .skeleton-table span,
.carousel-card--skeleton, .events-grid__item--skeleton .events-grid__media, .social-icon-skeleton,
.video-skeleton {
  background: linear-gradient(100deg, var(--cesl-mint) 25%, #ffffff 50%, var(--cesl-mint) 75%);
  background-size: 220% 100%;
  animation: skeleton-sweep 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer, .hero-card--skeleton .hero-card__media, .skeleton-table span,
  .carousel-card--skeleton, .events-grid__item--skeleton .events-grid__media, .social-icon-skeleton,
  .video-skeleton { animation: none; }
}
@keyframes skeleton-sweep { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
.skeleton-caption {
  color: var(--cesl-muted);
  font-size: .9rem;
  font-style: italic;
}
.hero-card--skeleton .hero-card__caption { background: transparent; }

/* Shortcuts
   Flex rather than a 6-column grid: with a fixed grid, hiding a shortcut
   left an empty cell on the right instead of re-centring the row. Items
   keep exactly the width they had (a sixth of the row, gaps discounted),
   so a full set of six still lines up the same as before. */
.shortcuts-grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  padding: 0;
  text-align: center;
}
.shortcuts-grid > li {
  flex: 0 0 calc((100% - 5 * 1.25rem) / 6);
  max-width: calc((100% - 5 * 1.25rem) / 6);
}
.shortcut-circle, .shortcut-circle--skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--cesl-text);
  min-height: 44px;
  font-weight: 600;
  font-size: .92rem;
}
.shortcut-icon {
  width: 109px;
  height: 109px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--cesl-mint), #ffffff);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.shortcut-circle:hover .shortcut-icon, .shortcut-circle:focus-visible .shortcut-icon {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* Split rows (schedules+videos / activities+events) */
.home-section--split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.1rem; align-items: stretch; }
.split-col {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow-soft);
}
/* Programação Semanal + Palestras Online: minimum comfortable border. */
.home-section--split-schedules-videos .split-col { padding: .6rem .7rem; }

/*
 * Trabalho Social's box is sized by its own content (heading + carousel) and
 * must set the row's height on its own; Próximos eventos always matches
 * that height rather than growing the row as events are added. Taking the
 * events column out of grid flow (absolute, but still placed in its grid
 * cell via grid-column/grid-row) means it no longer contributes to the
 * row's height calculation — the row ends up exactly as tall as Trabalho
 * Social's own content, in any browser/font/zoom, with no guessed pixel
 * value to keep in sync. Content never scrolls — activities/events are
 * already capped at 3/2, so it always fits.
 */
.home-section--split-activities-events { position: relative; }
.home-section--split-activities-events .split-col:last-child {
  grid-column: 2;
  grid-row: 1;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/*
 * The schedule table must never trigger a horizontal scrollbar just because
 * the column narrowed — no min-width to force it, and cells shrink instead.
 */
.table-scroll { overflow-x: hidden; }
.public-schedules { width: 100%; border-collapse: collapse; table-layout: fixed; }
.public-schedules th, .public-schedules td { padding: .5rem .4rem; text-align: left; border-bottom: 1px solid #eef1f0; overflow-wrap: break-word; }
.public-schedules th:nth-child(1), .public-schedules td:nth-child(1) { width: 24%; }
.public-schedules th:nth-child(2), .public-schedules td:nth-child(2) { width: 22%; }
.public-schedules th:nth-child(3), .public-schedules td:nth-child(3) { width: 54%; }
.public-schedules thead th { background: var(--cesl-mint); color: var(--cesl-blue-dark); position: sticky; top: 0; border-radius: 6px; }
.skeleton-table { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .75rem; }
.skeleton-table span { display: block; height: 2.4rem; border-radius: 8px; }

.videos-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.videos-grid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.video-skeleton { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; }

/* Activities carousel ("Obras Sociais e Assistenciais") */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: .9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .4rem;
  scrollbar-width: thin;
}
.carousel-card {
  scroll-snap-align: start;
  flex: 0 0 260px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.carousel-card:hover, .carousel-card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.carousel-card__media { display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--cesl-green) 0%, var(--cesl-lime) 100%); background-size: contain; background-repeat: no-repeat; background-position: center; }
.carousel-card--skeleton .carousel-card__media { background: none; }
.carousel-card--skeleton .carousel-card__caption { background: transparent; }
.carousel-card__caption { padding: .65rem .8rem; background: var(--cesl-blue); }
.carousel-card__caption h3 { margin: 0; font-size: 1rem; }
.carousel-card__caption h3 a { color: #fff; text-decoration: none; }
.carousel-card__caption h3 a:hover { color: var(--cesl-lime); }
.carousel__controls { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.carousel__arrow {
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  border: 1px solid #dbe4e1;
  background: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--cesl-blue);
}
.carousel__arrow:hover, .carousel__arrow:focus-visible { background: var(--cesl-mint); }

/* Events grid + social */
.events-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.events-grid__item { display: grid; grid-template-columns: 88px 1fr; gap: .85rem; align-items: center; }
.events-grid__media {
  width: 88px;
  height: 66px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cesl-blue) 0%, var(--cesl-lime) 100%);
}
.events-grid__item time { display: block; font-size: .8rem; color: var(--cesl-muted); }
.events-grid__item a { color: var(--cesl-text); text-decoration: none; font-weight: 600; }
.events-grid__item a:hover { color: var(--cesl-blue); }

.social-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 220px;
  text-align: center;
  border: 1px dashed #cfe0da;
  border-radius: var(--radius);
  color: var(--cesl-muted);
}
.social-icons { list-style: none; display: flex; flex-direction: row; align-items: center; gap: .75rem; padding: 0; margin: 0; }
.social-icon-skeleton { display: block; width: 40px; height: 40px; border-radius: 50%; }
.social-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cesl-mint);
  color: var(--cesl-blue);
  transition: filter .15s ease, transform .15s ease;
}
.social-icon-link:hover, .social-icon-link:focus-visible { transform: translateY(-2px); filter: brightness(1.1); }

/* Official brand colors, white glyph — icons use currentColor throughout. */
.social-icon-link--facebook { background: #1877f2; color: #fff; }
.social-icon-link--instagram { background: linear-gradient(135deg, #fdf497 0%, #fd5949 35%, #d6249f 65%, #285aeb 100%); color: #fff; }
.social-icon-link--youtube { background: #ff0000; color: #fff; }
.social-icon-link--whatsapp { background: #25d366; color: #fff; }

.social-widgets { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.social-widget {
  display: block;
  width: 160px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
/*
 * Facebook always renders Stories as its own row above the header — that's
 * fixed inside their iframe, no parameter or CSS of ours reaches it. Timeline
 * stays on; the header row (logo/name/Seguir) gets a fixed, unambiguous
 * width instead of relying on data-adapt-container-width against a
 * width:auto parent, which is what left it too narrow before.
 *
 * The plugin itself still renders at its full 500x580 (data-width/height) —
 * that layout is confirmed working, so re-flowing it at a smaller size
 * risks reintroducing the wrapping bug. Instead the whole rendered result
 * is visually scaled down 40% (scale(.6)) and the wrapper is sized to the
 * scaled footprint, so it just looks smaller with every element still in
 * place, rather than being told to lay itself out narrower.
 */
.social-widget--facebook { width: 300px; height: 348px; overflow: hidden; background: transparent; }
.fb-embed-scale { width: 500px; height: 580px; transform: scale(.6); transform-origin: top left; }

/* Footer (padding/margins trimmed ~30% to reduce overall thickness) */
.site-footer { background: var(--cesl-blue-dark); color: #fff; }
.site-footer__grid {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.75rem 1rem 1rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1.4rem;
}
.site-footer__brand img {
  height: 66px;
  margin-bottom: .5rem;
  background: #fff;
  padding: .4rem .6rem;
  border-radius: 8px;
}
.site-footer__brand p { margin: .2rem 0; opacity: .9; }
.footer-address { font-style: normal; margin: .35rem 0 0; opacity: .85; font-size: .9rem; line-height: 1.4; }
.site-footer h2 { font-size: 1rem; margin: 0 0 .5rem; }
.site-footer__contacts-heading { margin-top: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer__links ul, .footer-contacts { display: flex; flex-direction: column; gap: .35rem; }
.site-footer a { color: #fff; text-decoration: none; opacity: .9; }
.site-footer a:hover, .site-footer a:focus-visible { opacity: 1; text-decoration: underline; }
.footer-note { font-size: .85rem; opacity: .75; margin: .35rem 0 0; }
.footer-contacts li { display: flex; align-items: center; gap: .6rem; }
.footer-contact-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.site-footer__copy {
  text-align: center;
  margin: 0;
  padding: .7rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .85rem;
  opacity: .8;
}

@media (max-width: 900px) {
  .site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav ul { display: none; flex-direction: column; }
  .site-nav ul.is-open { display: flex; }
  .site-nav > ul > li > ul { position: static; box-shadow: none; display: none; padding-left: 1rem; }
  .site-nav > ul > li.is-open > ul { display: flex; }
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-section--split { grid-template-columns: 1fr; }
  /* The split collapses to a single stacked column here, so the events
     column must return to normal flow instead of being absolutely
     positioned into a second grid track that no longer exists. */
  .home-section--split-activities-events .split-col:last-child {
    grid-column: 1;
    grid-row: 2;
    position: static;
    inset: auto;
  }
  .shortcuts-grid > li {
    flex-basis: calc((100% - 2 * 1.25rem) / 3);
    max-width: calc((100% - 2 * 1.25rem) / 3);
  }
  .site-footer__grid { grid-template-columns: 1fr; text-align: center; }
  .social-icons { justify-content: center; }
}

@media (max-width: 520px) {
  .shortcuts-grid > li {
    flex-basis: calc((100% - 1.25rem) / 2);
    max-width: calc((100% - 1.25rem) / 2);
  }
  .carousel-card { flex-basis: 220px; }
}