/* =========================================================
   Boulevard Club Web App – news-and-events.css
   Author: Lead Fullstack Designer, Root Down UX
   Version: v1.7b – Phase 2 Optimized
   Date: 03/11/2025
   =========================================================
   Notes:
   - Derived from v1.6b (no structural breaks)
   - Performance, clarity, and accessibility optimizations
   - Ready for thumbnail support & expanded color system
   ========================================================= */


/* ---------------------------------------------------------
   ROOT VARIABLES (layout + motion only)
   Colour tokens live in global.css
   --------------------------------------------------------- */
:root {
  --sidebar-w: 15%;
  --features-inner-w: 98%;
  --events-w: 56.5%;
  --notices-w: 38.5%;
  --col-gap: 5%;
  --base-gap: 1.5rem;
  --card-height: 450px;
  --max-content-width: 1400px;

  /* [Phase 2 Update] Transition + motion tokens */
  --motion-fast: 0.25s;
  --motion-normal: 0.35s;
  --motion-slow: 0.45s;
  --easing-standard: cubic-bezier(0.19, 1, 0.22, 1);
}

/* [Phase 2 Update] Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  /* height: 100%; */
  background: var(--news-page-bg);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  height: auto !important;
  overflow-y: visible !important;
}

/* ---------------------------------------------------------
   MAIN LAYOUT
   --------------------------------------------------------- */
/* .page-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--base-gap);
  padding: 1.5rem 2rem;
  align-items: flex-start;
} */

.page-layout {
  /* min-height: 100vh; */
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--base-gap);
  padding: 2rem 2.5rem;
  max-width: var(--max-content-width);
  margin: 0 auto 3rem;
  align-items: flex-start;
  overflow: visible !important; 
}

/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */
/* .sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 7rem;
  /* padding-bottom: 4rem; */
/*} */

/* SIDEBAR COLUMN */
.sidebar {
  position: sticky;
  top: 7.5rem;              /* stable offset beneath header */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;

  height: max-content;    /* ensures all content stays inside the sticky box */
  padding-bottom: 0;      /* prevent artificial vertical “slide” */
}

.months {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.months button {
  width: 88%;
  padding: 0.5rem;
  border: 0;
  background: var(--news-month-bg);
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--motion-fast) ease;
}

.months button.active {
  background: var(--boulevard-accent-1);
  color: var(--text-inverse);
}

.months button.current-month {
  background: var(--boulevard-accent-2);
  color: var(--text-inverse);
  font-weight: 600;
}
.months button.current-month::after {
  content: " 📅";
}

#eventsContainer {
  transition: opacity var(--motion-normal) ease;
}

/* Vertical “Boulevard Club” label */
.logo-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-top: 1.5rem;
  color: var(--news-logo-vertical);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 3.5rem;    /* bold but manageable */
}

/* === Sidebar Stability Fix (Correct Sticky Offset) === */
.sidebar {
  position: sticky;
  top: 82px;  /* calibrated for your header height */
}



/* ---------------------------------------------------------
   RIGHT AREA
   --------------------------------------------------------- */
.main-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

/* ============================================
   FIX: Align Features Heading to Carousel Width
   ============================================ */
.features-title {
  display: block;

  /* MATCH THE CAROUSEL WRAPPER EXACTLY */
  width: fit-content;
  max-width: var(--max-content-width);
  
  /* CENTRE THE BOX ITSELF */
  margin-left: auto;
  margin-right: auto;

  /* TEXT (still centred visually) */
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: var(--boulevard-accent-4) !important;

  /* OPTIONAL: maintains vertical spacing */
  margin-bottom: 1rem;
}


/* ============================================
   v1.8 – Card Interaction Layer (Universal)
   Applies to Feature, Event, Noticeboard cards
   Ensures zero movement, zero layout shift
   ============================================ */

.feature-card,
.event-card,
.notice-card {
  position: relative;              /* Required for ::before overlay */
  transition: box-shadow 0.22s ease,
              filter 0.22s ease;
  will-change: box-shadow, filter;
}

/* Tint overlay (inactive by default) */
.feature-card::after,
.event-card::after,
.notice-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-raw, var(--accent)); /* fallback-safe */
  opacity: 0;                      /* Activated on hover/focus */
  pointer-events: none;            /* Never interferes */
  transition: opacity 0.22s ease;
}

/* Unified non-movement hover state */
.feature-card:hover,
.event-card:hover,
.notice-card:hover,
.feature-card:focus-visible,
.event-card:focus-visible,
.notice-card:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-30); /* Soft interaction ring */
  filter: brightness(1.03);               /* Gentle lift */
}

/* Activate tint overlay during interaction */
.feature-card:hover::after,
.event-card:hover::after,
.notice-card:hover::after,
.feature-card:focus-visible::after,
.event-card:focus-visible::after,
.notice-card:focus-visible::after {
  opacity: 0.03;    /* Light wash */
  transition: opacity 0.28s ease;
}

/* ---------------------------------------------------------
   FEATURES CAROUSEL + WRAPPER
   --------------------------------------------------------- */
.features-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto 1.75rem;
  padding: 1rem 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--news-features-wrapper-bg);
  border-radius: 16px;
  box-shadow: 0 8px 20px var(--shadow-light);
  overflow: hidden;
}

.features-carousel-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--border-light);
}

.features-carousel {
  width: 100%;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0.5rem 0 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.features-carousel::-webkit-scrollbar {
  display: none;
}

/* ---------------------------------------------------------
   FEATURE CARDS
   --------------------------------------------------------- */
.feature-card {
  flex: 0 0 calc((100% - (2 * 1.25rem)) / 3);
  scroll-snap-align: center;
  aspect-ratio: 3 / 4;
  background: var(--surface-main);
  border-radius: 1rem;
  box-shadow: 0 4px 12px var(--shadow-light);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: transform var(--motion-normal) var(--easing-standard),
              box-shadow var(--motion-fast) ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px var(--shadow-med);
}

/* [Phase 2 Update] Future thumbnail prep */
.feature-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Feature thumbnail preview (Phase 3 – Step 3.1)
   --------------------------------------------------------- */
.feature-thumb {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 0.75rem;
}
.feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-normal) var(--easing-standard);
}
.feature-card:hover .feature-thumb img {
  transform: scale(1.05);
}

/* ---------------------------------------------------------
   CAROUSEL BUTTONS
   --------------------------------------------------------- */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 50%;
  box-shadow: 0 2px 6px var(--shadow-light);
  opacity: 0;
  transition: opacity var(--motion-fast) ease, background var(--motion-fast) ease;
  z-index: 2;
}

.features-carousel-wrapper:hover .carousel-btn {
  opacity: 1;
}

.carousel-btn:hover { background: var(--surface-main); }
.carousel-btn.left  { left: 0.5rem; }
.carousel-btn.right { right: 0.5rem; }

@media (max-width: 800px) {
  .carousel-btn { display: none; }
}

@media (max-width: 700px) {
  .features-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
}

/* ---------------------------------------------------------
   CONTENT ROW (Events + Noticeboard)
   --------------------------------------------------------- */
.content-row {
  display: grid;
  grid-template-columns: var(--events-w) var(--notices-w);
  gap: var(--col-gap);
  width: var(--features-inner-w);
  align-items: start;
  max-width: var(--max-content-width);
  padding: 0 0.5rem 2rem;
  margin-top: 0;
}

/* ---------------------------------------------------------
   EVENTS SECTION
   --------------------------------------------------------- */
.events-section {
  background: var(--surface-main);
  padding: 1.25rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px var(--shadow-light);
}

.events-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--boulevard-accent-2);
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
}

/* Selected Month Display */
.selected-month {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--boulevard-accent-2);
  margin-left: 1rem;
  white-space: nowrap;
}

.events-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* =========================================================
   EVENT CARD – K-LAYOUT SYSTEM (FINAL)
   K1/K3/K5 left, K2 right, K4 thumbnail
   Option B spacing (medium)
   ========================================================= */

.event-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;  /* text | thumbnail */
  grid-template-rows: auto auto auto;          /* K1/K2, K3, K5 */
  grid-template-areas:
    "ev-top    ev-thumb"
    "ev-mid    ev-thumb"
    "ev-bottom ev-thumb";
  column-gap: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface-alt);
  border-radius: 10px;
  box-shadow: 0 2px 6px var(--shadow-light);
  cursor: pointer;
}

/* Map each row into the grid */
.ev-top-row {
  grid-area: ev-top;
  display: flex;
  justify-content: space-between;   /* K1 left, K2 right */
  align-items: flex-start;
}

.ev-mid-row {
  grid-area: ev-mid;
  margin-top: 0.4rem;               /* Option B spacing */
}

.ev-bottom-row {
  grid-area: ev-bottom;
  margin-top: 0.35rem;              /* Option B spacing */
}

/* Thumbnail (K4) – spans all rows, top-aligned */
.ev-thumb-wrap {
  grid-area: ev-thumb;
  align-self: flex-start;           /* top of card, level with K1/K2 row */
  width: 130px;
  height: 130px;
  border-radius: 8px;
  overflow: hidden;
}

.ev-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* K1 + K2 typography */
.ev-date,
.k1,
.ev-time,
.k2 {
  font-weight: 700;                 /* K1 & K2 bold */
  font-size: 0.95rem;
}

.ev-date,
.k1 {
  text-align: left;
}

.ev-time,
.k2 {
  text-align: right;
  white-space: nowrap;
  margin-left: 0.75rem;             /* small gap before the right edge */
}

/* K3 + K5 truncation and weights */
.ev-title,
.k3,
.ev-performer,
.k5 {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;          /* clean truncation, no tooltip */
}

.ev-title,
.k3 {
  font-weight: 600;                 /* K3 */
  font-size: 0.95rem;
}

.ev-performer,
.k5 {
  font-weight: 500;                 /* K5 */
  font-size: 0.9rem;
}

/* ---------------------------------------------------------
   NOTICEBOARD
   --------------------------------------------------------- */
.noticeboard {
  background: var(--surface-main);
  padding: 1.25rem;
  border-radius: 10px;
  box-shadow: 0 4px 12px var(--shadow-light);
}
.noticeboard .section-title { color: var(--boulevard-accent-4); }

.notice-card::before { position: relative; z-index: 2; } /* badge */
.notice-card > * { position: relative; z-index: 2; }     /* text/content */

.notice-card {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--news-notice-border);
  padding-bottom: 0.5rem;
  cursor: pointer;
  transition: color var(--motion-fast) ease;
  animation: fadeInNotice var(--motion-slow) ease forwards;
  position: relative;
}

/* [Phase 2 Update] Badge colors now use variables */
.notice-card.active::before {
  content: "✅ Live Now";
  display: inline-block;
  background: var(--boulevard-accent-3);
  color: var(--text-inverse);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
}

.notice-card.upcoming {
  opacity: 0.8;
  font-style: italic;
  border-left: 4px solid var(--boulevard-accent-4);
  background: var(--news-notice-upcoming-bg);
  position: relative;
}
.notice-card.upcoming::before {
  content: "⏳ Coming Soon";
  display: inline-block;
  background: var(--boulevard-accent-4);
  color: var(--text-inverse);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
}

.notice-card::after { z-index: 1; }        /* hover tint layer */

.notice-card:hover { color: var(--boulevard-accent-1); }
.no-notices {
  text-align: center;
  padding: 1rem;
  font-style: italic;
  color: var(--text-muted);
}

.notice-card.upcoming:hover::after,
.notice-card.upcoming:focus-visible::after {
  opacity: 0.04; /* Slightly stronger wash for upcoming to match Live Now */
}

/* =========================================
   SOFT COLOUR DEPTH — FEATURE / EVENT / NOTICE
   ========================================= */

/* Feature cards — soft blue */
.feature-card {
  background: var(--news-feature-card-depth);
}

/* === EVENT CARD — Soft Green Depth Layer (Non-modal, Safe) === */
.event-card {
  background: var(--news-event-card-depth);
}

/* Noticeboard cards — soft navy/blue tint */
.notice-card {
  background: var(--news-notice-card-depth);
}

/* =========================================================
   UNIVERSAL MODAL — FOUNDATION STABILISER (Step 1)
   Used by Features, Events, Notices
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--modal-backdrop);
  z-index: var(--z-modal-overlay, 900);

  opacity: 0;
  pointer-events: none;        /* disabled when invisible */
  transition: opacity 0.28s ease;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;        /* clickable when visible */
}

.modal-content {
  position: relative;
  z-index: var(--z-modal-content, 910);  /* prevents pointer-event clashes */
  max-width: 700px;
  width: 90%;
  max-height: 90vh;            /* prevent uncontrolled growth */
  background: var(--surface-main);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 10px 40px var(--shadow-strong);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  transform: translateY(20px) scale(0.97);
  transition:
    transform 0.28s var(--easing-standard),
    box-shadow 0.28s ease;
}

/* Size variants for FP (feature) vs ENP (event/notice) */
.modal.modal-fp .modal-content {
  max-width: 760px;    /* slightly larger */
}

.modal.modal-enp .modal-content {
  max-width: 640px;    /* more compact */
}

.modal.show .modal-content {
  transform: translateY(0) scale(1);
}

.modal-title-block {
  margin-bottom: 1rem;
  text-align: center;
}

.modal-title-block .enp-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  z-index: var(--z-modal-close, 920);  /* ensure always clickable */
}

/* =========================================================
   MODAL INTERNAL LAYOUTS – FP (Features) & ENP (Events/Notices)
   ========================================================= */

.modal-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: calc(90vh - 2rem);
  overflow: hidden;
}

/* Shared hero image area */
.modal-hero {
  flex: 0 0 auto;
}

.modal-hero .modal-image {
  width: 100%;
  max-height: clamp(220px, 40vh, 420px);
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Scrollable body text */
.modal-body-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* Feature layout (FP) */
.modal-fp-layout .modal-header {
  margin-bottom: 0.25rem;
}

.fp-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.fp-strap {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-muted, #555);
  margin: 0;
  margin-bottom: 0.75rem;
}

.fp-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Event/Notice layout (ENP) */
.enp-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.enp-sub {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-muted, #555);
  margin: 0 0 0.75rem;
}

.enp-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Small screens: give more room to content */
@media (max-width: 800px) {
  .modal-content {
    width: 96%;
    padding: 1.25rem 1.25rem;
  }

  .modal-hero .modal-image {
    max-height: 50vh;
  }
}

/* ============================================================
   BOULEVARD CLUB — UNIVERSAL MODAL SYSTEM (CONSOLIDATED CSS)
   Consolidated after Micro-Chunks 1–5
   Author: Root Down UX
   Notes:
   - FP Modals = Feature content
   - ENP Modals = Event / Noticeboard content
   - Strict-mode safe: CSS only, no HTML/JS touched
   ============================================================ */

/* ------------------------------
   MODAL OVERLAY
   ------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;

  background: var(--modal-backdrop); /* polished overlay */
  z-index: var(--z-modal-overlay, 900);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

/* ------------------------------
   MODAL CONTENT WRAPPER
   ------------------------------ */
.modal-content {
  position: relative;
  width: 100%;
  max-width: min(90vw, 680px);  /* improved responsiveness */
  max-height: 85vh;             /* prevents vertical overflow */

  background: var(--surface-main);
  border-radius: 12px;          /* polished rounded corners */
  padding: 2rem 2rem 1.75rem;   /* balanced default spacing */

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);  /* premium shadow */
  overflow: hidden;

  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.97);
  transition:
    transform 0.28s var(--easing-standard),
    box-shadow 0.28s ease;
}

.modal.show .modal-content {
  transform: translateY(0) scale(1);
}

/* ------------------------------
   MODAL SIZE VARIANTS
   ------------------------------ */
.modal.modal-fp .modal-content {
  max-width: 760px; /* feature modals slightly wider */
}

.modal.modal-enp .modal-content {
  max-width: 640px; /* event/notice modals more compact */
}

/* ------------------------------
   CLOSE BUTTON
   ------------------------------ */
.close-btn {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  font-size: 1.8rem;
  cursor: pointer;
  background: none;
  border: none;
  z-index: var(--z-modal-close, 920);  /* ensure always clickable */

}

/* Mobile anchor refinement */
@media (max-width: 600px) {
  .close-btn {
    top: 0.5rem;
    right: 0.75rem;
  }
}

/* ------------------------------
   HEADER: TITLES + STRAPLINES
   ------------------------------ */
.modal-title-block,
.modal-header {
  margin-bottom: 1.5rem !important; /* improved vertical rhythm */
}

.modal-title-block p,
.modal-header p {
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1.45;
}

/* Primary modal titles */
.fp-title,
.enp-title {
  font-size: 1.4rem !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}

/* Subtitles / straplines */
.fp-strap,
.enp-sub {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* ------------------------------
   HERO IMAGE AREA
   ------------------------------ */
.modal-hero {
  margin-bottom: 1.2rem;
}

.modal-hero .modal-image {
  width: 100%;
  height: auto;
  max-height: 38vh;     /* prevents oversized images */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Mobile image tuning */
@media (max-width: 600px) {
  .modal-hero .modal-image {
    max-height: 32vh;
    border-radius: 6px;
  }
}

/* ------------------------------
   BODY: TEXT SCROLL AREA
   ------------------------------ */
.modal-body-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 0.4rem; /* prevents text flush against scrollbar */

  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-main);

  max-height: calc(85vh - 220px);
}

/* Feature content tends to be longer */
.modal-fp .modal-body-scroll {
  max-height: calc(88vh - 230px);
}

/* Event/Notice content slightly tighter */
.modal-enp .modal-body-scroll {
  max-height: calc(88vh - 200px);
}

/* Mobile scroll tuning */
@media (max-width: 600px) {
  .modal-body-scroll {
    max-height: calc(84vh - 190px);
  }
}

/* ============================================================
   MICRO-CHUNK 6 — Vertical Rhythm Stabiliser
   Safe: CSS-only. No structural or functional changes.
   ============================================================ */

/* 1. Slightly increase top breathing room */
.modal-content {
  padding-top: 2.25rem !important;  /* previously 2rem */
}

/* 2. Smooth spacing between strapline/title and image */
.modal-title-block,
.modal-header {
  margin-bottom: 1.35rem !important;  /* was 1.5rem; more balanced */
}

/* 3. Reduce gap below hero image very slightly */
.modal-hero {
  margin-bottom: 1.05rem !important;  /* was 1.2rem */
}

/* 4. Refine body scroll height for more consistent reading window */
.modal-body-scroll {
  max-height: calc(85vh - 212px);  /* previously 220px */
}

/* Feature modals (slightly more header content) */
.modal-fp .modal-body-scroll {
  max-height: calc(88vh - 225px);  /* previously 230px */
}

/* Event/Notice modals (slightly tighter top stack) */
.modal-enp .modal-body-scroll {
  max-height: calc(88vh - 195px);  /* previously 200px */
}

/* ============================================================
   MICRO-CHUNK 7 — Bottom Padding Balancer
   ============================================================ */

.modal-content {
  padding-bottom: 2.1rem !important;   /* was 1.75rem → visually cramped */
}

/* Scroll container slightly increased for comfort */
.modal-body-scroll {
  padding-bottom: 0.25rem;  /* prevents text sitting on the bottom edge */
}

/* ============================================================
   MICRO-CHUNK 8 — Text Block Lift (Subtle Alignment Polish)
   ============================================================ */

.modal-body-scroll {
  margin-top: -0.15rem;  /* lifts text slightly for visual balance */
}

/* ---------------------------------------------------------
   RESPONSIVE DESIGN
   --------------------------------------------------------- */
@media (max-width: 1100px) {
  :root {
    --sidebar-w: 18%;
    --events-w: 54.3%;
    --notices-w: 40.7%;
    --col-gap: 5%;
  }
  .feature-card { min-width: 260px; min-height: 380px; }
}

@media (max-width: 980px) {
  .page-layout {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem 2.5rem;
  }

  .sidebar {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .logo-vertical {
    font-size: 2.4rem; /* calmer on smaller screens */
  }

  .content-row {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
}

@media (max-width: 800px) {
  .page-layout {
    grid-template-columns: 1fr;
    padding: 1rem;
  }
  .sidebar {
    position: relative;
    flex-direction: row;
    justify-content: space-around;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    order: 2;
  }
  .main-right { order: 1; width: 100%; }
  .features-carousel,
  .content-row { width: 100%; }
  .content-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .feature-card {
    min-width: 85%;
    min-height: 320px;
    flex: 0 0 auto;
  }
  .event-card { width: 100%; }

  .event-card {
    grid-template-columns: minmax(0, 1fr) 110px;  /* slightly smaller thumb */
    column-gap: 1rem;
    padding: 0.85rem 1rem;
  }

  .ev-thumb-wrap {
    width: 110px;
    height: 110px;
  }
}

/* Mobile adjustment */
@media (max-width: 700px) {
  .features-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
}

/* ---------------------------------------------------------
   TOUCH DEVICE SCROLL-SNAP
   --------------------------------------------------------- */
@media (pointer: coarse) {
  .features-carousel { scroll-snap-type: x mandatory; scroll-padding: 1rem; }
  .feature-card { scroll-snap-align: center; }
}


/* =========================================================
   Feature Section Hover Refinement (v1.8 Prep)
   Applies stable, non-movement visual feedback to feature cards.
   Prevents layout shift and scrollbar compensation issues.
   ========================================================= */

.feature-card {
  position: relative;
  border-radius: var(--radius-md, 0.75rem);
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition:
    box-shadow 0.25s var(--easing-standard),
    border-color 0.25s var(--easing-standard);
}

/* commented out during v1.80 testing */
/* .feature-card:hover,
.feature-card:focus-visible {
  /* Non-movement emphasis */
  /*box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  border-color: var(--boulevard-accent-2);
  outline: 2px solid var(--boulevard-accent-2);
  outline-offset: 3px;
} */

/* Accessibility: respect user motion settings */
@media (prefers-reduced-motion: reduce) {
  .feature-card {
    transition: none;
  }
}

/* Optional: maintain hover tint for image-based cards */
.feature-card img {
  transition: filter 0.3s var(--easing-standard);
}
.feature-card:hover img {
  filter: brightness(1.1) contrast(1.05);
}

/* =========================================================
   v1.8 – Final Neutralising Overrides
   ========================================================= */

/* Feature */
.feature-card:hover {
  transform: none !important;
  box-shadow: 0 0 0 2px var(--accent-30) !important;
}
.feature-card:hover .feature-thumb img {
  transform: none !important;
}

/* Event */
.event-card:hover {
  background: var(--surface-alt) !important;
  transform: none !important;
  box-shadow: 0 0 0 2px var(--accent-30) !important;
}

.event-card {
  background: var(--surface-alt);
}

/* =========================================================
   v1.8 – Noticeboard Normalisation (Phase 1)
   Eliminates gradient interference during hover/focus testing
   ========================================================= */

.notice-card.upcoming {
  background: var(--surface-alt) !important;
}

/* Notice */
.notice-card:hover {
  /* unified tint/ring now handles interaction */
  color: inherit !important;
}

/* .notice-card.upcoming:hover {
  background: var(--surface) !important;
} */

.notice-card.upcoming:hover,
.notice-card.upcoming:focus-visible {
  background: var(--news-notice-upcoming-bg) !important;
}

/* Prevent sticky sidebar from releasing early */
.events-wrapper, 
.main-events-area, 
.page-content {
  min-height: calc(100vh + 400px);
}

/* ============================================================
   STICKY SIDEBAR — FOOTER COLLISION PREVENTION FIX
   Ensures sticky element never hits the footer boundary
   ============================================================ */

.events-wrapper,
.main-events-area,
.page-content {
  padding-bottom: 300px;  /* Adjust if your footer is taller */
}

/* =========================================================
   v1.8 – Responsive Stability Add-ons (Non-modal, Safe)
   ========================================================= */

/* 1) Mid-tablet: tidy sidebar column and vertical logo */
@media (max-width: 980px) {
  .sidebar {
    align-items: flex-start;
  }

  .logo-vertical {
    font-size: 2.2rem;
    margin-top: 0;
  }
}

/* 2) Small tablets / large phones: month buttons + layout */
@media (max-width: 768px) {
  .page-layout {
    padding: 1.25rem 1rem 2.5rem;
  }

  .months {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
  }

  .months button {
    width: auto;
    min-width: 6.2rem;
    padding-inline: 0.75rem;
  }

  .content-row {
    padding: 0;
  }
}

/* 3) Phones: simplify sidebar, hide vertical label, soften padding */
@media (max-width: 600px) {
  .sidebar {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .logo-vertical {
    display: none;          /* keep small screens clean */
  }

  .features-carousel-wrapper {
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.5rem 1.25rem;
  }

  .events-section,
  .noticeboard {
    padding: 1rem;
  }
}

/* =========================================================
   NEWS & EVENTS – LAYOUT SAFETY LAYER
   (Add at bottom of /css/news-and-events.css)
   ---------------------------------------------------------
   Targets ONLY:
   - .page-layout
   - .sidebar / .months / .logo-vertical
   - .main-right
   - .features-title / carousel wrapper
   - .content-row / .events-section / .noticeboard
   ========================================================= */

/* Base layout: sidebar + main content */
.page-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  /* assume a max-width is already defined elsewhere if needed */
}

.sidebar {
  flex: 0 0 220px;    /* keeps sidebar narrow but stable */
  max-width: 260px;
  min-width: 180px;
}

.main-right {
  flex: 1 1 auto;
  min-width: 0;       /* prevents horizontal overflow from flex children */
}

/* Two-column content row: Events + Noticeboard */
.content-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.events-section,
.noticeboard {
  min-width: 0;       /* avoid flex overflow at mid-widths */
}

.events-section {
  flex: 2 1 0;
}

.noticeboard {
  flex: 1 1 0;
}

/* Features heading + carousel safety */
.features-title {
  text-align: center;
  /* assume colours/typography already set elsewhere */
}

.features-carousel-wrapper {
  max-width: 100%;
  overflow: hidden;   /* prevent buttons from forcing a scrollbar */
}

.features-carousel {
  max-width: 100%;
}

/* =========================================================
   1280px and below – tighten gaps, keep two columns
   ========================================================= */
@media (max-width: 1280px) {
  .page-layout {
    gap: 1.75rem;
  }

  .content-row {
    gap: 1.75rem;
  }

  .sidebar {
    flex-basis: 200px;
  }
}

/* =========================================================
   1024px and below – prep for stacking
   (still two columns, but less aggressive spacing)
   ========================================================= */
@media (max-width: 1024px) {
  .page-layout {
    gap: 1.5rem;
  }

  .content-row {
    gap: 1.5rem;
  }
}

/* =========================================================
   980px and below – stack Events above Noticeboard
   (stops overlap / squashing)
   ========================================================= */
@media (max-width: 980px) {
  .content-row {
    flex-direction: column;
  }

  .events-section,
  .noticeboard {
    width: 100%;
  }
}

/* =========================================================
   768px and below – stack Sidebar above main content
   (sticky can be relaxed on small screens)
   ========================================================= */
@media (max-width: 768px) {
  .page-layout {
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Cancel sticky-style layout on narrow screens only.
     Assumes existing sticky rules remain for >768px. */
  .sidebar {
    position: static;
    width: 100%;
    max-width: none;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
  }

  .months {
    flex: 1 1 auto;
  }

  .logo-vertical {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .main-right {
    width: 100%;
  }
}

/* =========================================================
   600px and below – simplify Features carousel controls
   ========================================================= */
@media (max-width: 600px) {
  .features-carousel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .carousel-btn {
    /* buttons line up nicely without causing overflow */
    align-self: flex-end;
  }

  .section-title {
    font-size: 1.15rem;
  }
}

/* =========================================================
   480px and below – compress sidebar header layout
   ========================================================= */
@media (max-width: 480px) {
  .sidebar {
    flex-direction: column;
    align-items: flex-start;
  }

  .logo-vertical {
    align-self: flex-end;
  }

  .section-title {
    font-size: 1.05rem;
  }
}

/* =========================================================
   375px and below – extra small devices
   ========================================================= */
@media (max-width: 375px) {
  .section-title {
    line-height: 1.2;
  }

  .features-carousel {
    padding-bottom: 0.25rem; /* small buffer to avoid clipping shadows */
  }
}

/* =========================================================
   BOULEVARD – NEWS & EVENTS
   v1.8 Responsive Stability Patch (STRICT-MODE SAFE)
   - No HTML changes
   - No JS changes
   - No modal changes
   - Layout-only corrections
   ========================================================= */

/* 0. Base structural safety – prevent hidden overflow
   --------------------------------------------------------- */
.main-right {
  /* stop inner content from shrinking to centre on narrow layouts */
  align-items: stretch;
  width: 100%;
}

/* Make sure key wrappers never exceed viewport width */
.features-carousel-wrapper,
.features-carousel,
.content-row {
  max-width: 100%;
}

/* Let Events + Noticeboard shrink safely without causing scroll */
.events-section,
.noticeboard {
  min-width: 0;
}

/* =========================================================
   1) Desktop → Mid-width: tame content row widths
   (fix subtle overflow / squashing between ~1200px → 1024px)
   ========================================================= */
@media (max-width: 1280px) {
  .content-row {
    width: 100%;
    max-width: 100%;
    column-gap: 2rem;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

/* Slightly tighter gap on small laptops */
@media (max-width: 1100px) {
  .content-row {
    column-gap: 1.75rem;
  }
}

/* =========================================================
   2) 980px and below – unified single-column behaviour
   (Sidebar on top, then Features, then Events + Noticeboard)
   ========================================================= */
@media (max-width: 980px) {
  /* Ensure grid truly collapses to 1 column */
  .page-layout {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem 2.5rem;
  }

  /* Sidebar becomes non-sticky and full-width */
  .sidebar {
    position: static;
    width: 100%;
    max-width: none;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
  }

  .months {
    width: 100%;
  }

  /* Content below sidebar is full-width and stacked */
  .main-right {
    width: 100%;
  }

  .content-row {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    row-gap: 2rem;
  }

  .events-section,
  .noticeboard {
    width: 100%;
  }

  /* Vertical logo calmer at tablet sizes */
  .logo-vertical {
    font-size: 2.3rem;
    margin-top: 0;
  }
}

/* =========================================================
   3) 800px and below – fix sidebar row overflow
   (prevents sidebar + logo pushing off-screen)
   ========================================================= */
@media (max-width: 800px) {
  /* Override earlier row layout: keep sidebar compact & centred */
  .sidebar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  .months {
    justify-content: center;
  }

  .logo-vertical {
    font-size: 2.1rem;
  }

  /* Ensure Events + Noticeboard are a clean vertical stack */
  .content-row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .events-section,
  .noticeboard {
    width: 100%;
  }
}

/* =========================================================
   4) 768px and below – tighter buttons and headings
   (month selector always usable on small tablets / big phones)
   ========================================================= */
@media (max-width: 768px) {
  .page-layout {
    padding: 1.25rem 1rem 2.5rem;
  }

  .months {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }

  .months button {
    width: auto;
    min-width: 5.2rem;
    padding-inline: 0.6rem;
  }

  .section-title {
    font-size: 1.25rem;
  }
}

/* =========================================================
   5) 600px and below – phone layout & overflow guard
   ========================================================= */
@media (max-width: 600px) {
  /* Sidebar becomes a simple block; label hidden by your existing rule */
  .sidebar {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  /* Make sure headings wrap nicely – no horizontal push */
  .section-title {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    font-size: 1.15rem;
  }

  .selected-month {
    margin-left: 0;
    font-size: 1.15rem;
  }

  .events-section,
  .noticeboard {
    padding: 1rem;
  }

  /* Prevent any subtle overflow from card shadows/tints */
  .events-section,
  .noticeboard,
  .features-carousel-wrapper {
    box-sizing: border-box;
  }
}

/* =========================================================
   6) 480px and below – very small phones
   ========================================================= */
@media (max-width: 480px) {
  .section-title {
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .features-title {
    font-size: 1.1rem;
    letter-spacing: 0.04em;
  }

  .features-carousel-wrapper {
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.5rem 1.25rem;
  }
}

/* =========================================================
   7) 375px and below – ultra-small devices
   ========================================================= */
@media (max-width: 375px) {
  .section-title {
    font-size: 1rem;
  }

  .features-carousel {
    padding-bottom: 0.75rem; /* avoid clipping shadows at the bottom */
  }
}

/* =========================================================
   FIX 1 — Sidebar calendar stability (800px → 768px)
   ========================================================= */
@media (max-width: 800px) {

  /* Ensure sidebar does NOT collapse or push content sideways */
  .sidebar {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    position: static;   /* disables sticky collision below 800px */
  }

  /* Prevent calendar from shrinking to zero width */
  .months {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .months button {
    min-width: 5.5rem;
  }
}

/* =========================================================
   FIX 2 — Prevent sidebar disappearing at 768px
   ========================================================= */
@media (max-width: 768px) {
  .sidebar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  .months {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Ensure vertical label does not distort layout */
  .logo-vertical {
    display: none;
  }
}

/* =========================================================
   FIX 3 — Features carousel stability (below 800px)
   ========================================================= */
@media (max-width: 800px) {

  /* Wrapper must not inherit max-content width */
  .features-carousel-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible;
  }

  /* Inner track must NOT overflow its container */
  .features-carousel {
    max-width: 100% !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Cards need smaller minimum width to remain scrollable */
  .feature-card {
    min-width: 65% !important; /* previously 85% */
  }
}

/* =========================================================
   FIX 4 — Smaller devices (600px → 480px)
   Ensure cards fully enter viewport
   ========================================================= */
@media (max-width: 600px) {

  .feature-card {
    min-width: 80% !important;
  }

  .features-carousel-wrapper {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

@media (max-width: 480px) {

  .feature-card {
    min-width: 90% !important;
  }

  .features-carousel {
    gap: 1rem;
  }
}

/* =========================================================
   MOBILE LAYOUT REORDERING
   Move month buttons BELOW Features and ABOVE Events
   (Only applies on smaller screens)
   ========================================================= */
@media (max-width: 800px) {

  /* Turn main-right into a vertical flex-flow (safe) */
  .main-right {
    display: flex;
    flex-direction: column;
  }

  /* Move sidebar calendar INTO the flow of main-right visually */
  .sidebar {
    order: 0; /* but we reposition the months separately */
  }

  /* Months appear AFTER features, BEFORE events */
  .months {
    order: 2; /* Features = 1, Months = 2, Events = 3 */
    margin: 1rem 0;
    width: 100%;
  }

  /* Reorder Features heading + carousel */
  .features-title {
    order: 1;
  }

  .features-carousel-wrapper {
    order: 1;
  }

  /* Events/Noticeboard follow after months */
  .content-row {
    order: 3;
  }
}

/* =========================================================
   MOBILE STRUCTURE FIX — FINAL ORDERING (≤800px)
   Order required:
   1. Month Buttons
   2. Feature Cards
   3. Event Cards
   4. Noticeboard Cards
   ========================================================= */

@media (max-width: 800px) {

  /* Make main-right a vertical stack container */
  .main-right {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* ---------------------------
     1) MONTH BUTTONS FIRST
     --------------------------- */
  .months {
    order: 1;
    width: 100%;
    margin: 1rem 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
  }

  /* Sidebar wrapper shouldn't interfere */
  .sidebar {
    position: static;
    width: 100%;
    order: 0; /* but months themselves override with order:1 */
  }

  .logo-vertical {
    display: none;
  }

  /* ---------------------------
     2) FEATURE CARDS SECOND
     --------------------------- */
  .features-title {
    order: 2;
  }

  .features-carousel-wrapper {
    order: 2;
    width: 100%;
    max-width: 100%;
  }

  /* Turn carousel into stacked cards */
  .features-carousel {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    gap: 1rem !important;
    padding-left: 0;
    padding-right: 0;
    width: 100% !important;
  }

  .feature-card {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
  }

  .carousel-btn {
    display: none !important;
  }

  /* ---------------------------
     3) EVENTS THIRD
     --------------------------- */
  .content-row {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  .events-section {
    order: 3;
  }

  /* ---------------------------
     4) NOTICEBOARD FOURTH
     --------------------------- */
  .noticeboard {
    order: 4;
  }
}
/* =========================================================
   FORCE SIDEBAR BELOW FEATURES ON MOBILE
   ========================================================= */
@media (max-width: 800px) {

  /* Sidebar (containing months) must come *after* features */
  .sidebar {
    order: 2;        /* moved below features */
    width: 100%;
  }

  /* Months stay first inside the sidebar, but sidebar itself is later */
  .months {
    order: 1;        /* months first inside sidebar */
    margin-top: 0;
  }

  /* Features ABOVE months */
  .features-title,
  .features-carousel-wrapper {
    order: 1 !important;   /* enforce priority */
  }

  /* Events + Noticeboard come after months */
  .content-row {
    order: 3 !important;
  }
}


/* =========================================================
   PATCH 1 — Modal Visibility Safety Layer
   Ensures modals are visible and clickable when .show is set.
   ========================================================= */

.modal {
  display: flex;                 /* keep flex centering */
  align-items: center;
  justify-content: center;

  opacity: 0;                    /* default: hidden */
  pointer-events: none;          /* default: not interactive */

  z-index: var(--z-modal-overlay, 900);
}

.modal.show {
  opacity: 1;                    /* fade in */
  pointer-events: auto;          /* clickable when visible */
}

/* =========================================================
   PATCH 2 — Feature Card Click Affordance
   ========================================================= */

.feature-card {
  cursor: pointer;
}

/* =========================================================
   PATCH 3 — Event & Noticeboard Typography Alignment
   Keeps card sizes, truncation, and layout intact.
   ========================================================= */

.event-card,
.notice-card {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* =========================================================
   FEATURE CARD — I1–I7 LAYOUT + TRUNCATION (v2)
   (Non-modal, card-only; sizing & hover behaviour unchanged)
   ========================================================= */

/* Top row: I1 (date) left, I2–I3 (time range) right */
.feature-card .feature-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  column-gap: 1.5rem;  /* NEW: ensures they never “touch” */
}

.feature-card .feature-date,
.feature-card .feature-time {
  white-space: nowrap;
}

.feature-card .feature-date {
  text-align: left;
}

.feature-card .feature-time {
  text-align: right;
  white-space: nowrap;
}

/* I4: Strapline above image (standard weight) */
.feature-card .feature-strapline {
  margin: 0 0 0.45rem;
  font-size: 1rem;          /* closer to global body size */
  font-weight: 400;
}

/* I5: image keeps existing .feature-thumb styling elsewhere */

/* I6: Performer name below image (bold) */
.feature-card .feature-performer {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;         /* bold as requested */
}

/* I7: Description – restore larger “body” feel */
.feature-card .feature-desc {
  margin: 0.4rem 0 0;
  font-size: 1rem;          /* back to standard size */
  line-height: 1.6;
}

/* Multi-line truncation to keep card height stable */
.feature-card .feature-strapline,
.feature-card .feature-performer,
.feature-card .feature-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Adjust clamp counts as needed */
.feature-card .feature-strapline {
  -webkit-line-clamp: 2;
}

.feature-card .feature-performer {
  -webkit-line-clamp: 1;
}

.feature-card .feature-desc {
  -webkit-line-clamp: 3;
}