/* PMA Science University — Avia Layout Builder section styling.

   2.0.0. The institutional homepage and the major landing pages are built in
   Enfold's own Avia Layout Builder so they can be opened, edited, reordered and
   refined in WordPress without code. This file makes Avia's own output look
   institutional, so the page itself carries content and nothing else.

   HOW MICKEY USES IT
   Every class below is typed into the Avia element's own
   "Custom CSS Class" field (Advanced -> Developer Settings). No HTML, no
   shortcodes to remember, no inline styles, nothing to break.

     pma-hero          on a Color Section  -> navy university hero
     pma-band-navy     on a Color Section  -> navy institutional band
     pma-band-ivory    on a Color Section  -> warm ivory band
     pma-band-stone    on a Color Section  -> light stone band
     pma-pillars       on a Color Section  -> the four institutional pillars
     pma-eyebrow-tb    on a Text Block     -> small uppercase gold label
     pma-lede-tb       on a Text Block     -> larger opening paragraph
     pma-prose         on a Color Section  -> constrained measure for reading
     pma-cards         on a Color Section  -> equal-height column cards
     pma-schools       on a Color Section  -> School cards with imagery
     pma-quiet         on any element      -> small secondary print

   Sections alternate ground colour by default, so a page reads as a sequence
   of institutional bands even before any class is applied. Reordering sections
   in Avia therefore cannot produce two identical grounds in a row.
   ------------------------------------------------------------------ */

/* ---- Rhythm. Enfold's default section padding is too tight for an
        institutional page; the Master Plan asks for generous spacing. ---- */
body.pma .avia-section > .container {
  padding-block: var(--s-9);
}

body.pma .avia-section.av-minimum-height > .container {
  padding-block: var(--s-8);
}

@media (max-width: 767px) {
  body.pma .avia-section > .container {
    padding-block: var(--s-7);
  }
}

/* Alternating grounds, so a reordered page still reads as bands. */
body.pma .avia-section:nth-of-type(even):not([class*='pma-band']):not(.pma-hero) {
  background-color: var(--pma-stone-100);
}

/* ---- Named grounds ---- */
body.pma .avia-section.pma-band-navy,
body.pma .avia-section.pma-hero,
body.pma .avia-section.pma-pillars {
  background-color: var(--pma-navy-900);
}

body.pma .avia-section.pma-band-ivory {
  background-color: var(--pma-ivory);
}

body.pma .avia-section.pma-band-stone {
  background-color: var(--pma-stone-100);
}

/* Text on a dark ground. Restated at high specificity for the same reason
   section 12 of 09-enfold-system.css exists: body.pma h1-h4 sets navy. */
body.pma .avia-section.pma-band-navy h1,
body.pma .avia-section.pma-band-navy h2,
body.pma .avia-section.pma-band-navy h3,
body.pma .avia-section.pma-band-navy h4,
body.pma .avia-section.pma-band-navy p,
body.pma .avia-section.pma-band-navy li,
body.pma .avia-section.pma-hero h1,
body.pma .avia-section.pma-hero h2,
body.pma .avia-section.pma-hero h3,
body.pma .avia-section.pma-hero p,
body.pma .avia-section.pma-pillars h2,
body.pma .avia-section.pma-pillars h3,
body.pma .avia-section.pma-pillars p {
  color: var(--pma-ivory);
}

body.pma .avia-section.pma-band-navy a:not(.avia-button),
body.pma .avia-section.pma-hero a:not(.avia-button),
body.pma .avia-section.pma-pillars a:not(.avia-button) {
  color: var(--pma-gold-300);
}

/* ---- Hero ---- */
body.pma .avia-section.pma-hero > .container {
  padding-block: var(--s-10);
}

body.pma .pma-hero h1,
body.pma .pma-hero .av-special-heading-tag {
  font-family: var(--pma-serif);
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 22ch;
}

body.pma .pma-hero .avia-desc-col,
body.pma .pma-hero .av_textblock_section p {
  font-size: var(--fs-lede);
  line-height: 1.55;
  max-width: 52ch;
  color: var(--pma-gold-300);
}

@media (max-width: 767px) {
  body.pma .avia-section.pma-hero > .container { padding-block: var(--s-8); }
  body.pma .pma-hero h1 { max-width: none; }
}

/* ---- Eyebrow and lede, applied to a Text Block ---- */
body.pma .pma-eyebrow-tb p,
body.pma .pma-eyebrow-tb {
  font-family: var(--pma-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pma-gold-500);
  margin-bottom: var(--s-3);
}

body.pma .pma-band-navy .pma-eyebrow-tb p,
body.pma .pma-hero .pma-eyebrow-tb p,
body.pma .pma-pillars .pma-eyebrow-tb p {
  color: var(--pma-gold-300);
}

body.pma .pma-lede-tb p {
  font-size: var(--fs-lede);
  line-height: 1.55;
  max-width: 60ch;
}

body.pma .pma-quiet,
body.pma .pma-quiet p {
  font-family: var(--pma-sans);
  font-size: var(--fs-sm);
  color: var(--pma-navy-600);
}

/* ---- Reading measure ---- */
body.pma .pma-prose .av_textblock_section p,
body.pma .pma-prose .avia_textblock p {
  max-width: 68ch;
}

/* ---- Column cards. Avia columns become equal-height institutional cards. ---- */
body.pma .pma-cards .flex_column,
body.pma .pma-schools .flex_column {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--pma-white);
  border: 1px solid var(--pma-stone-300);
  border-top: 3px solid var(--pma-gold-500);
}

body.pma .pma-cards .flex_column > *:last-child,
body.pma .pma-schools .flex_column > *:last-child {
  margin-top: auto;
  margin-bottom: 0;
}

body.pma .pma-cards .flex_column h3,
body.pma .pma-schools .flex_column h3 {
  font-family: var(--pma-serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: 0 0 var(--s-2);
}

body.pma .pma-band-navy .flex_column,
body.pma .pma-pillars .flex_column {
  background: var(--pma-navy-800);
  border-color: var(--pma-navy-600);
  border-top-color: var(--pma-gold-500);
}

/* ---- Schools. Distinct imagery per School, uniform frame. ---- */
body.pma .pma-schools .flex_column {
  padding: 0;
  overflow: hidden;
}

body.pma .pma-schools .flex_column .avia-image-container {
  margin: 0;
}

body.pma .pma-schools .flex_column .avia-image-container img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

body.pma .pma-schools .flex_column .av_textblock_section,
body.pma .pma-schools .flex_column .av-special-heading {
  padding-inline: var(--s-5);
}

body.pma .pma-schools .flex_column .av-special-heading { padding-top: var(--s-5); }
body.pma .pma-schools .flex_column .av_textblock_section:last-of-type { padding-bottom: var(--s-5); }

/* ---- The four institutional pillars ---- */
body.pma .pma-pillars .flex_column {
  border-top-width: 3px;
  border-top-style: solid;
}

body.pma .pma-pillars .flex_column:nth-child(1) { border-top-color: var(--pma-gold-500); }
body.pma .pma-pillars .flex_column:nth-child(2) { border-top-color: var(--pma-gold-300); }
body.pma .pma-pillars .flex_column:nth-child(3) { border-top-color: var(--pma-gold-500); }
body.pma .pma-pillars .flex_column:nth-child(4) { border-top-color: var(--pma-gold-300); }

/* ---- Enfold headings inside an institutional section ---- */
body.pma .avia-section .av-special-heading .av-special-heading-tag {
  font-family: var(--pma-serif);
  letter-spacing: 0.005em;
}

body.pma .avia-section .av-special-heading .special-heading-border {
  display: none;
}

/* ---- Enfold buttons, held to the institutional square-edged language ---- */
body.pma .avia-button {
  font-family: var(--pma-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
  padding: var(--s-3) var(--s-5);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

body.pma .pma-band-navy .avia-button,
body.pma .pma-hero .avia-button,
body.pma .pma-pillars .avia-button {
  color: var(--pma-navy-900);
  background-color: var(--pma-gold-300);
  border-color: var(--pma-gold-300);
}

body.pma .pma-band-navy .avia-button:hover,
body.pma .pma-hero .avia-button:hover,
body.pma .pma-pillars .avia-button:hover {
  background-color: var(--pma-ivory);
  border-color: var(--pma-ivory);
}

/* ---- Images: stable dimensions, minimal layout shift, no upscaling ---- */
body.pma .avia-section img {
  max-width: 100%;
  height: auto;
}

/* ---- Restraint. Enfold ships decorative flourishes the Master Plan does not
        want repeated across an institutional page. ---- */
body.pma .avia-section .av-subheading { font-family: var(--pma-sans); }
body.pma .avia-section hr.avia-divider-fullwidth { border-color: var(--pma-stone-300); }