/* ──────────────────────────────────────────────────────────────
   Mobile-only centring (phones, below 768px). Desktop is untouched:
   every rule lives inside the media query below.

   Loaded after output.css. These rules are unlayered, so they win over
   Tailwind utilities and the base `p { text-align: left }` rule.

   Hook classes (add in templates):
     m-center   centre text in this element (paragraphs inside follow it)
     m-stack    turn an icon + text row into a centred column
     m-justify  centre the items of a flex row
     m-block    centre a block (e.g. a checklist) while its lines stay left-aligned
     m-self     centre this item inside a flex column
     m-nopad    drop side padding (used where a left indent would push centred text off-centre)
     m-quote    pull-quote with a left bar: bar moves to a short centred line on top
   ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Paragraphs follow their container's alignment instead of forcing left,
     so existing `text-center` wrappers work on mobile too */
  /* :where() keeps this at zero specificity so any page rule still wins */
  :where(main p:not([class*="text-center"]):not([class*="text-left"]):not([class*="text-right"])) {
    text-align: inherit;
  }

  .m-center { text-align: center; }

  .m-stack {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .m-justify { justify-content: center; }

  .m-block {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .m-self { align-self: center; }

  .m-nopad { padding-left: 0; padding-right: 0; }

  /* Pull-quote with a left bar: swap the side bar for a short centred bar on top */
  .m-quote {
    border-left: none;
    padding-left: 0;
    padding-top: 0.75rem;
    position: relative;
    text-align: center;
  }
  .m-quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 40px;
    height: 2px;
    background: #c9a84c;
    transform: translateX(-50%);
  }

  /* Shared inner-page banner (partials/components/page_hero.html) */
  .page-hero-section .container-kmo,
  .page-hero-section h1,
  .page-hero-section p { text-align: center; }
  .page-hero-section .container-kmo > .max-w-2xl { margin-left: auto; margin-right: auto; }
}

/* Event detail "Other Events": on phones, compact rows (same look as the Events page list)
   instead of full-width cards with large images */
@media (max-width: 639px) {
  .kmo-related-events {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(26, 71, 49, 0.10);
  }
  .kmo-related-events .kmo-event-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.875rem;
    height: auto;
    padding: 1rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(26, 71, 49, 0.10);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .kmo-related-events .kmo-event-card:hover { box-shadow: none; transform: none; }
  .kmo-related-events .kmo-event-card__media {
    flex-shrink: 0;
    width: 104px;
    aspect-ratio: 5 / 4;
    border-radius: 10px;
  }
  .kmo-related-events .kmo-event-card__date { display: none; }
  .kmo-related-events .kmo-event-card__body { flex: 1; min-width: 0; padding: 0; }
  .kmo-related-events .kmo-event-card__status { font-size: 0.5625rem; }
  .kmo-related-events .kmo-event-card__title { margin-top: 0.6875rem; font-size: 0.9375rem; }
  .kmo-related-events .kmo-event-card__meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    margin-top: 0.4rem;
  }
  .kmo-related-events .kmo-event-card__meta li { font-size: 0.6875rem; }
  .kmo-related-events .kmo-event-card__meta svg { width: 11px; height: 11px; }
  .kmo-related-events .kmo-event-card__excerpt,
  .kmo-related-events .kmo-event-card__cta { display: none; }
}

/* About page "Our Milestones": phones keep the desktop zig-zag, just more compact
   (less padding beside the line, smaller dot and year) so the short text fits */
@media (max-width: 767px) {
  .ms-list { display: flex; flex-direction: column; gap: 1.5rem; }
  .ms-list > .ms-item { margin: 0; }
  .ms-text { width: calc(50% - 22px); }
  .ms-spacer { width: calc(50% - 22px); }
  .ms-text.ms-left { padding-right: 0.75rem; }
  .ms-text.ms-right { padding-left: 0.75rem; }
  .ms-dot { width: 2rem; height: 2rem; }
  .ms-dot > div { width: 0.625rem; height: 0.625rem; }
  .ms-text h3 { font-size: 1.125rem; margin-bottom: 0.125rem; }
  .ms-text p { font-size: 0.8125rem; line-height: 1.45; }
}

/* Footer: centre the section headings on phones (lists below stay left-aligned) */
@media (max-width: 767px) {
  footer h3 { align-self: center; text-align: center; }

  /* Quick Links / Institutions: the two columns are centred as a block; each
     column stays left-aligned so the › arrows line up straight */
  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 8.75rem));
    justify-content: center;
    column-gap: 1.5rem;
  }

  /* Get in Touch: each contact line centred, icon sits inline right before
     the first word (so a wrapped address doesn't push the icon far away) */
  .footer-contact > div { align-items: center; }
  .footer-contact > div > div { display: block; width: 100%; text-align: center; }
  .footer-contact > div > div > :first-child {
    display: inline-flex;
    vertical-align: -2px;
    margin: 0 0.4rem 0 0;
  }
  .footer-contact > div > div > :last-child { display: inline; text-align: center; }
}