/* Cumulative Layout Shift (CLS) guards.
 *
 * Each rule reserves the final layout BEFORE images / JS finish loading.
 * If you change template dimensions, update aspect-ratios here in tandem.
 */

/* --- Hero carousel (home) ----------------------------------------------------
 * Locked at 360px tall to prevent any CLS as slides cycle. */
#myCarousel,
#myCarousel .carousel-inner,
#myCarousel .carousel-item {
  height: 360px !important;
  min-height: 360px;
  max-height: 360px;
  overflow: hidden;
}
.carousel-bg-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
#myCarousel .carousel-item {
  position: relative;
}
#myCarousel .carousel-item .container {
  position: relative;
  z-index: 2;
}
.carousel-caption-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.1), rgba(0,0,0,0.1), rgba(0,0,0,0.45));
  pointer-events: none;
}

/* --- Cards (calendars list, single-page related) ----------------------------- */
.calendars .card img,
.related-events .card img,
.card-image img {
  aspect-ratio: 293 / 159;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- Today's Holidays sidebar list ------------------------------------------- */
.todays-holiday ul li img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

/* --- Year at a Glance (owl-carousel) ----------------------------------------- */
.gallery-months .item .card-img img {
  aspect-ratio: 200 / 100;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* === LOCK DOWN all carousel row heights + image sizes to eliminate CLS ===
   Pre-JS state must match post-JS height EXACTLY. */

/* Override Owl's default display:none — carousels must always be block so
   the section reserves its full height before JS initializes. Without this
   the section is h2-only height, then expands by ~215px when Owl runs. */
.gallery-months .owl-carousel {
  display: block !important;
}

/* Year at a Glance: 200x100 image + ~30px label = 140px total */
.gallery-months .owl-carousel:not(.month-events-carousel) {
  height: 140px !important;
  max-height: 140px !important;
  overflow: hidden !important;
}
.gallery-months .owl-carousel:not(.month-events-carousel) .item {
  width: 200px;
  flex: 0 0 200px;
}
.gallery-months .owl-carousel:not(.month-events-carousel) .item .card-img {
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
}
.gallery-months .owl-carousel:not(.month-events-carousel) .item .card-img img {
  width: 200px;
  height: 100px;
  object-fit: cover;
  display: block;
}

/* Month-events carousels: 293x159 image + ~50px title = 215px total */
.gallery-months .month-events-carousel.owl-carousel {
  height: 215px !important;
  max-height: 215px !important;
  overflow: hidden !important;
}
.month-events-carousel .item .card-image {
  width: 100%;
  height: 159px;
  overflow: hidden;
  border-radius: 12px;
}
.month-events-carousel .item .card-image img {
  width: 100%;
  height: 159px;
  object-fit: cover;
  display: block;
}
.month-events-carousel .item .card-content {
  height: 50px;
  overflow: hidden;
  margin: 0;
}

/* CSS containment — browser knows these blocks don't influence outside layout */
.gallery-months,
.gallery-months .owl-carousel,
#myCarousel {
  contain: layout style;
}

/* === Hero row + Today's Holidays sidebar — BOTH locked at exact 360px height === */
.top-banners .row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 360px;
  margin: 0;
}
.top-banners .carousel-post {
  height: 360px;
  overflow: hidden;
  padding: 0;
}
.top-banners .todays-holiday {
  height: 360px;
  display: flex;
  padding: 0 0 0 12px;
}
.top-banners .todays-holiday > .card.todays-holiday {
  height: 360px !important;
  min-height: 360px;
  max-height: 360px;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}
.top-banners .todays-holiday .card-body {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.top-banners .todays-holiday ul {
  flex: 1 1 auto;
  overflow-y: scroll;        /* always show scrollbar to indicate scrollability */
  margin-bottom: 8px;
  max-height: none !important;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.6) rgba(255,255,255,0.1);
}
.top-banners .todays-holiday ul::-webkit-scrollbar { width: 8px; }
.top-banners .todays-holiday ul::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.1); border-radius: 4px;
}
.top-banners .todays-holiday ul::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.5); border-radius: 4px;
}
.top-banners .todays-holiday ul::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.7);
}
.top-banners .todays-holiday .todays-holiday-button {
  flex-shrink: 0;
}

/* --- Archive table images — fixed container prevents row-height CLS ---------- */
.calendar-table-img-container {
  width: 110px;
  height: 78px;
  overflow: hidden;
  flex-shrink: 0;
}
.calendar-table-image {
  width: 110px;
  height: 78px;
  object-fit: cover;
  display: block;
}

/* --- Single event hero image ------------------------------------------------- */
.single-banner-post {
  height: 350px;
  overflow: hidden;
  border-radius: 8px;
}
.single-banner-post > img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
}

/* --- Today's Holidays sidebar — fixed sizing to prevent CLS during JS hydration --- */
.todays-holiday .card { min-height: 480px; }
.todays-holiday ul { min-height: 270px; }

/* --- Calendar widget month grid --------------------------------------------- */
.card.calendar .month-calendar ul {
  min-height: 240px;          /* fixed-ish grid; prevents day cells reflowing */
}

/* content-visibility: auto removed — the 600px intrinsic-size estimate was
   wrong for every section, causing ~300px of CLS per section on page load.
   The contain: layout style rules on carousels still provide isolation. */

/* --- Web font safety (we use system fonts, but guard if Inter is ever added) - */
@font-face {
  font-display: swap;
  font-family: "Inter";
  src: local("Inter");
}

/* --- Logo image (header + footer) ------------------------------------------- */
header .logo img,
.footer-extra .d-flex > p img {
  width: 188px;
  height: 38px;
  display: block;
}

/* --- Prevent layout shift on the mobile mini-calendar (single page) ---------- */
.card.calendar.mobile .month-calendar {
  min-height: 56px;
}

/* --- Lazy section placeholders: keep table row heights consistent ------------ */
.calendar-table tr.row-date-day td {
  min-height: 50px;
}