/* ===========================================================================
   pm-mobile.css — mobile-first readability layer (28 October 2026)
   ---------------------------------------------------------------------------
   Loaded after pm-design-system.css. It keeps the brand exactly as it is
   (green #00BF63, black, white, Maharlika, the real logo) and changes only
   how the pages read on a phone:

   1. Headings and labels in normal sentence case instead of ALL CAPITALS,
      which is slower to read for everyone and harder for second-language
      readers.
   2. The decorative network lines stay behind the hero on large screens but
      are hidden on phones, where they ran straight through the text.
   3. A "Book a seat" button sits in the header on phones, so booking is one
      tap from anywhere on the site.
   4. Bigger body text, full-width buttons and 48px+ touch targets on phones.

   To undo everything: remove the one <link> to this file from
   includes/layout/head.php. Nothing else depends on it.
   =========================================================================== */

/* -- 1. Sentence case everywhere, all screen sizes ------------------------ */
.pm-display,
.pm-h1,
.pm-h2,
.pm-h3--caps,
.pm-eyebrow,
.pm-label,
.pm-stat__label,
.pm-price__note,
.pm-field__label,
.pm-table th,
.pm-nav__link,
.pm-btn,
.pm-btn--link,
.pm-brand__word {
  text-transform: none;
  letter-spacing: 0;
}

.pm-display { letter-spacing: -0.01em; }
.pm-h1,
.pm-h2 { letter-spacing: -0.005em; line-height: 1.12; }
.pm-btn { font-size: 15px; letter-spacing: 0.01em; }
.pm-nav__link { font-size: 15px; }
.pm-eyebrow,
.pm-label { font-size: 14px; }
.pm-stat__label,
.pm-price__note { font-size: 14px; }
.pm-field__label { font-size: 15px; }

/* The header "Book a seat" button: hidden on large screens, where the nav
   already carries the same button. */
.pm-header__book { display: none; }

/* -- 2–4. Phones and small tablets --------------------------------------- */
@media (max-width: 900px) {

  /* Comfortable reading size. */
  body.pm { font-size: 17px; }
  .pm-lede { font-size: 18px; line-height: 1.55; color: var(--pm-black); }
  .pm-body { font-size: 16px; line-height: 1.6; }

  /* Headline sizes that fit a phone without breaking words. */
  .pm-display { font-size: clamp(32px, 9vw, 42px); line-height: 1.08; max-width: none; }
  .pm-h1 { font-size: clamp(28px, 8vw, 36px); max-width: none; }
  .pm-h2 { font-size: clamp(24px, 6.6vw, 30px); }

  /* The network motif ran through the hero text. Hide it on phones. */
  .pm-motif { display: none; }

  /* Header: logo, Book a seat, Menu — all reachable with a thumb. */
  .pm-header__bar { min-height: 64px; gap: 10px; }
  .pm-brand__logo { height: 34px; width: auto; }
  .pm-header__book {
    display: inline-flex;
    margin-left: auto;
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
  }
  html[data-pm-js="on"] .pm-nav-toggle { margin-left: 0; min-height: 44px; }

  /* Open menu: large, plain links. */
  html[data-pm-js="on"] .pm-nav__link { font-size: 22px; }

  /* Main actions full width, stacked, easy to hit. */
  .pm-btn-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .pm-btn-row > .pm-btn { width: 100%; min-height: 52px; }
  .pm-section-head { gap: 14px; }
  .pm-section-head__action { width: 100%; }

  /* Figures row: two across instead of a long single column. */
  .pm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-stat__value { font-size: 30px; }

  /* Form controls: big enough to tap, text big enough that phones do not
     zoom in when a field is focused (needs 16px+). */
  .pm-input,
  .pm-select,
  .pm-textarea { font-size: 16px; min-height: 52px; }

  /* Event cards: price and buttons get room to breathe. */
  .pm-card { padding: 22px; }
}

/* -- 5. Typeface (28 Oct 2026) --------------------------------------------
   Google Sans Flex everywhere; San Francisco on Apple devices, then each
   system's own sans-serif, if Google Fonts is unreachable. Every rule in the
   design system reads var(--pm-font), so this one line changes the whole site. */
:root {
  --pm-font: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Arial, sans-serif;
}
/* ".pm h1" in the design system pins every heading to 400, which suited
   Maharlika. The extra .pm here outranks it so a sans-serif reads firmly. */
.pm .pm-display, .pm .pm-h1, .pm .pm-h2 { font-weight: 600; }
.pm .pm-h3, .pm .pm-h4, .pm .pm-stat__value, .pm .pm-price, .pm .pm-listing__range { font-weight: 500; }
.pm .pm-btn, .pm .pm-eyebrow, .pm .pm-label, .pm .pm-field__label { font-weight: 500; }
.pm strong, .pm b { font-weight: 600; }

/* -- 6. No network lines, tighter spacing (28 Oct 2026) -------------------
   Removes the green network-line graphic on every screen size and
   tightens the space between and inside sections, on desktop and mobile. */

/* The green network lines: gone everywhere. */
.pm-motif { display: none !important; }

/* Space between sections. */
.pm-section { padding-top: clamp(32px, 4.5vw, 64px); padding-bottom: clamp(32px, 4.5vw, 64px); }
.pm-section--tight { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 40px); }

/* Space inside sections. */
.pm-section-head { padding-bottom: 14px; gap: 12px; }
.pm .pm-mt-lg { margin-top: 18px; }
.pm .pm-mt-sm { margin-top: 6px; }
.pm-btn-row { gap: 10px; }
.pm-card { padding: clamp(18px, 2vw, 24px); }
.pm-card__foot { padding-top: 12px; }
.pm-cell { padding: clamp(16px, 2vw, 24px); }
.pm-lede { margin-bottom: 0; }

/* Header and footer: slimmer. */
.pm-header__bar { min-height: 64px; }
.pm-footer { padding-top: clamp(32px, 4vw, 56px); padding-bottom: 24px; }

/* Event images: wide instead of square, so a course card is not a full
   screen tall on a phone. */
.pm-banner { aspect-ratio: 16 / 9; }

@media (max-width: 900px) {
  .pm-section { padding-top: 28px; padding-bottom: 28px; }
  .pm-section--tight { padding-top: 20px; padding-bottom: 20px; }
  .pm-display { font-size: clamp(30px, 8.5vw, 38px); }
  .pm-grid--ruled > * { padding: 16px; }
  .pm-stat__value { font-size: 26px; }
  .pm-stat__label { margin-top: 4px; }
}

/* -- 7. Vision and mission band (28 Oct 2026) ---------------------------- */
.pm-vm__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.pm-vm__text { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: var(--pm-on-dark-muted, #d0d0d0); max-width: 62ch; }
.pm-vm__text--lead { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; font-weight: 500; color: var(--pm-white); max-width: 28ch; }
@media (min-width: 900px) {
  .pm-vm__grid { grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
  .pm-vm__item + .pm-vm__item { border-left: 1px solid var(--pm-on-dark-rule, #333); padding-left: 56px; }
}

/* -- 8. Course poster cards (1 Nov 2026) ---------------------------------
   Course posters are portrait. Each one is shown whole, at its own shape,
   centred on a light panel with no grey bars. Its width and shape are held
   while the image loads. When only one course is listed it becomes a
   full-width feature card: poster left, details right on wider screens,
   stacked on phones. */
.pm-tile .pm-banner {
  aspect-ratio: auto;
  background: var(--pm-surface, #f6f6f4);
  border-bottom: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pm-tile .pm-banner img {
  position: static; display: block;
  width: 100%; max-width: 320px; height: auto;
  aspect-ratio: auto 5 / 6;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.pm-grid:has(> .pm-tile:only-child) { background: transparent; gap: 0; }
.pm-grid > .pm-tile:only-child {
  grid-column: 1 / -1;
  border: 1px solid var(--pm-border, #e3e3e0); border-radius: 6px; overflow: hidden;
}
@media (max-width: 639px) {
  .pm-grid > .pm-tile:only-child .pm-banner img { max-width: 260px; }
}
@media (min-width: 640px) {
  .pm-grid > .pm-tile:only-child {
    display: grid; grid-template-columns: minmax(260px, 36%) 1fr; align-items: stretch;
  }
  .pm-grid > .pm-tile:only-child .pm-banner { padding: 28px; }
  .pm-grid > .pm-tile:only-child .pm-cell {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(24px, 3vw, 44px);
  }
  .pm-grid > .pm-tile:only-child .pm-h4 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
}

/* -- 9. 2027 courses: date tiles, register buttons, phone list (1 Nov 2026) --
   A course with no designed poster shows a date tile: the days, month and
   city in the brand black and green. With several courses listed, every
   card keeps the same image height. Register is a real button on every card.
   On phones the cards become a compact list: small tile left, details right. */
.pm-banner--date { flex-direction: column; gap: 6px; text-align: center; }
.pm-tile .pm-banner--date { background: var(--pm-black, #000); color: var(--pm-white, #fff); }
.pm-datetile__days { font-size: clamp(34px, 4vw, 48px); font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.pm-datetile__month { font-size: 16px; font-weight: 500; color: var(--pm-white, #fff); }
.pm-datetile__city { margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--pm-green, #00BF63); color: var(--pm-black, #000); font-size: 14px; font-weight: 600; }

.pm-grid > .pm-tile:not(:only-child) .pm-banner { aspect-ratio: 5 / 6; }
.pm-grid > .pm-tile:not(:only-child) .pm-banner img { height: 100%; width: auto; max-width: 100%; }

.pm-tile .pm-btn-row a.pm-btn--link[href$="/register"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  background: var(--pm-green, #00BF63); color: var(--pm-black, #000);
  border: 1px solid var(--pm-green, #00BF63); border-radius: var(--pm-radius, 2px);
  font-weight: 500;
}
.pm-tile .pm-btn-row a.pm-btn--link[href$="/register"]:hover,
.pm-tile .pm-btn-row a.pm-btn--link[href$="/register"]:focus-visible {
  background: var(--pm-black, #000); border-color: var(--pm-black, #000); color: var(--pm-white, #fff);
}
.pm-tile .pm-btn-row { align-items: center; gap: 16px; }

@media (max-width: 639px) {
  .pm-grid > .pm-tile:not(:only-child) { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; }
  .pm-grid > .pm-tile:not(:only-child) .pm-banner { padding: 0; margin: 16px 0 16px 16px; border-radius: 4px; overflow: hidden; }
  .pm-grid > .pm-tile:not(:only-child) .pm-banner img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; box-shadow: none; border-radius: 0; }
  .pm-grid > .pm-tile:not(:only-child) .pm-banner--date { gap: 2px; }
  .pm-grid > .pm-tile:not(:only-child) .pm-datetile__days { font-size: 20px; }
  .pm-grid > .pm-tile:not(:only-child) .pm-datetile__month { font-size: 11px; }
  .pm-grid > .pm-tile:not(:only-child) .pm-datetile__city { margin-top: 4px; padding: 2px 7px; font-size: 10px; }
  .pm-grid > .pm-tile:not(:only-child) .pm-cell { padding: 16px; }
  .pm-grid > .pm-tile:not(:only-child) .pm-h4 { font-size: 17px; line-height: 1.3; }
}

/* -- 10. Shorter registration form (1 Nov 2026) --------------------------
   Gender, meal preference and future topics are optional, so they are hidden
   to keep booking quick. The handler already treats them as optional. */
.pm-field:has(> [name="gender"]),
.pm-field:has(> [name="meal_preference"]),
.pm-field:has(> [name="future_topics"]) { display: none; }

/* -- 11. Fixes for the 2027 course list (1 Nov 2026) ----------------------
   The two-across rule for the figures row must not squeeze the course grid
   on phones; date tiles are black everywhere (also in the calendar list);
   calendar rows get Register beside View. */
@media (max-width: 639px) {
  .pm-grid--4:has(> .pm-tile) { grid-template-columns: minmax(0, 1fr); }
}
.pm-banner--date { background: var(--pm-black, #000); color: var(--pm-white, #fff); }
.pm-listing__row .pm-banner--date { aspect-ratio: 5 / 6; gap: 4px; }
.pm-listing__row .pm-datetile__days { font-size: 26px; }
.pm-listing__row .pm-datetile__month { font-size: 13px; }
.pm-listing__row .pm-datetile__city { font-size: 12px; padding: 2px 9px; }
.pm-listing__side .pm-listing__actions { display: flex; flex-wrap: wrap; gap: 8px; }