/*
 * ps-styles.css — page-specific styles for /mschedule/ (M Lighting)
 *
 * Sits on top of the shared sheets. Load order matters:
 *   mv-main.css -> grid-styles.css -> card-styles.css -> ps-styles.css
 *
 * Contains only what the shared sheets don't provide:
 *   1. Brand mapping for the card system
 *   2. The slideshow band (shared .swap-slider component)
 *   3. Compact "key facts" card variant
 *   4. Section rhythm
 */

/* ==========================================================================
   1. BRAND MAPPING
   --------------------------------------------------------------------------
   card-styles.css expects --primary / --accent from main-style.css, which
   this page does not load, so it would otherwise fall back to a generic
   navy (#1a3a6b) that is off-brand. Point the card tokens at the real
   moval.org brand colors from mv-main.css instead.
   ========================================================================== */
:root {
  --card-accent: var(--brand-blue, #2E5A93);
  --card-blue:   var(--brand-blue, #2E5A93);
  --card-maroon: var(--brand-maroon, #582b2c);
  --card-radius: 8px;
}

/* ==========================================================================
   2. SLIDESHOW BAND
   --------------------------------------------------------------------------
   The shared .swap-slider system (css/slider.css) is built for slides that
   carry their photo as a CSS background-image, with a .swap-message text box
   overlaid on top. This page uses real <img> elements instead, so that each
   slide keeps its own descriptive alt text. These rules adapt the shared
   system to that markup:

     - .slide drops the flex layout, padding and 500px min-height that exist
       to position the message box, and simply lets the image set the height.
     - The ::before / ::after scrims exist to make overlaid text readable.
       There is no text on these slides, so they are switched off.

   All four photos are 1145 x 466, so every slide ends up the same height and
   the images scale with the container instead of sitting at intrinsic size.
   ========================================================================== */
.swap-slider {
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.swap-slider .slide {
  display: block;
  min-height: 0;
  padding: 0;
}

.swap-slider .slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* No message box on this page, so the readability scrims would only dim the
   photo — and below 768px the mobile rule washes it out entirely. */
.swap-slider .slide::before,
.swap-slider .slide::after {
  display: none;
}

/* ==========================================================================
   3. KEY FACTS CARDS
   --------------------------------------------------------------------------
   A compact variant of .card for the four at-a-glance facts. Smaller type and
   an icon above the label; no hover lift, since these are not links.
   ========================================================================== */
.fact-card .card__body {
  padding: 1.4rem 1.2rem 1.5rem;
  text-align: center;
}

.fact-card .card__icon {
  display: block;
  font-size: 2.4rem;
  margin-bottom: 0.6rem;
  color: var(--card-accent);
}

.fact-card .card__eyebrow {
  font-size: 1.1rem;
  color: var(--neutral-gray-dark, #4D515F);
}

.fact-card .card__title {
  font-size: 1.9rem;
  margin-bottom: 0.2rem;
}

.fact-card .card__text {
  font-size: 1.35rem;
  line-height: 1.45;
}

/* ==========================================================================
   4. SECTION RHYTHM
   ========================================================================== */
.m-section {
  margin-bottom: 3.5rem;
}

.m-section > h2 {
  margin-bottom: 0.8rem;
}

/* Lead paragraph under the slideshow */
.m-lede {
  font-size: 1.8rem;
  line-height: 1.6;
  margin: 2rem 0 2.5rem;
}

/* Tockify embed sits flush inside its section */
.m-calendar {
  margin-top: 1rem;
	border: solid 1px #CECECE;
	border-radius:  20px;
}

/* The restrictions card carries a warning, so its list needs a little more
   breathing room than the default card list. */
.card--maroon .card__list li {
  margin-bottom: 0.5rem;
}
.card--maroon .card__list li:last-child {
  margin-bottom: 0;
}