@charset "UTF-8";
/* -------------------------------------------------------------------------
 * Polylang language switcher — one look in both header and footer
 * Per the "Info Footer" design: inline, current language as a white pill with
 * dark-green text, other languages muted. The header uses Polylang's
 * navigation variant, where the block class and .current-lang sit on the same
 * <li>; in the footer the block class is on the wrapping <ul>.
 * ---------------------------------------------------------------------- */
footer .wp-block-polylang-language-switcher {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
footer .wp-block-polylang-language-switcher li {
  margin: 0;
}
footer .wp-block-polylang-language-switcher a {
  text-decoration: none;
  color: #b6b6b6;
  font-family: "Anuphan", sans-serif;
  font-weight: 500;
  line-height: 24px;
}
footer .wp-block-polylang-language-switcher .current-lang a {
  color: var(--wp--preset--color--dark-base, #284d26);
  background: var(--wp--preset--color--base-alt, #ffffff);
  border-radius: 2px;
  padding: 0 8px;
  font-weight: 700;
}

.wp-block-polylang-navigation-language-switcher > a {
  text-decoration: none;
  /* Design: inactive language sits back in grey. */
  color: #9ca3af;
  font-family: "Anuphan", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.wp-block-polylang-navigation-language-switcher.current-lang > a {
  color: #183318;
  background: #f1f5f9;
  border-radius: var(--wp--custom--rounded--base, 4px);
  padding: 2px 4px;
  font-weight: 500;
}

/* Extra breathing room between the logo and the main menu, on top of the
   header row's own blockGap (which applies uniformly between all 3 columns,
   so it can't be nudged for just this one gap on its own). */
header .wp-block-site-logo {
  margin-right: 40px;
}

/* Wide screens get another 20px. Deliberately above 1280px only: between
   1024 and 1280 the menu and CTA buttons are already being shrunk to keep
   the bar on one line, so widening this gap there would work against that. */
@media (min-width: 1281px) {
  header .wp-block-site-logo {
    margin-right: 60px;
  }
}
/* -------------------------------------------------------------------------
 * Header navigation
 * The menu items, language switch and CTA buttons all live inside the
 * navigation block so they fold into the hamburger overlay on mobile. On
 * desktop the switch + buttons are pushed to the right edge, as in the design.
 * ---------------------------------------------------------------------- */
header .wp-block-navigation {
  flex: 1;
  /* Menu labels must never line-wrap inside their own item, at any
     desktop width — the shrink rule further down only covers 1024–1280px,
     but the item itself can still narrow past its label's width above
     1280px too (the header's content is capped at 1280px regardless of
     how wide the actual screen is, so this needs to hold everywhere, not
     just in that one range). */
  /* Arrows come only from core's submenu icon, which it renders solely for
     items that actually have children — so a menu item without a dropdown
     shows no arrow at all. Sized to the design's 6px. */
}
header .wp-block-navigation .wp-block-navigation__container {
  align-items: center;
  flex-wrap: nowrap;
}
header .wp-block-navigation .wp-block-navigation-item__label {
  white-space: nowrap;
}
header .wp-block-navigation .wp-block-buttons {
  align-items: center;
}
header .wp-block-navigation .wp-block-navigation__submenu-icon {
  padding: 0;
  margin-left: 4px;
}
header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
  width: 6px;
  height: 6px;
  stroke: currentColor;
}

/* Header switches to the hamburger menu below 1024px (not core's own 600px
   default) — the header nav needs the full desktop row's width to fit
   without wrapping (5 menu links + language switch + 2 buttons), so it
   makes the mobile jump earlier than the rest of the site's 782px
   breakpoint. Overrides core's two hardcoded 600px media queries: the
   open-hamburger button's default hide and the responsive-container's
   default show both need !important, since core's selectors carry more
   specificity than a plain max-width override could beat otherwise. */
@media (max-width: 1023px) {
  header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  /* Core renders the buttons as a sibling of the menu <ul> inside the
     responsive container, so stretch that row and let the switch soak up the
     free space: items stay left of centre, switch + buttons end up right.
     Core's own rule for this element — .wp-block-navigation__responsive-
     container:not(.hidden-by-default):not(.is-menu-open) — carries two
     :not() pseudo-classes (specificity 0,3,0), which beats this selector's
     0,2,1 even with the `header` ancestor added, so `display:flex` here was
     silently losing to core's `display:block` and collapsing the whole row
     into a squeezed, wrapped column. !important forces the win. */
  header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: flex !important;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
  }
  header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    flex: 1;
    flex-wrap: nowrap;
  }
  header .wp-block-navigation {
    /* Only the FIRST language item soaks up the free space. Applying this
       to every language <li> pushed each one in turn, which forced the
       menu onto a second row and stretched the bar. */
    /* Design keeps ไทย and EN as a tight pair. */
  }
  header .wp-block-navigation .wp-block-polylang-navigation-language-switcher.lang-item-first {
    margin-left: auto;
  }
  header .wp-block-navigation .wp-block-polylang-navigation-language-switcher + .wp-block-polylang-navigation-language-switcher {
    margin-left: 2px;
  }
  header .wp-block-navigation .wp-block-buttons {
    margin-left: var(--wp--preset--spacing--20, 0.75rem);
  }
}
/* Inside the open hamburger overlay: stack the CTA buttons full width. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-left: 0;
  gap: var(--wp--preset--spacing--30, 0.75rem);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-button__link {
  width: 100%;
  text-align: center;
}

/* -------------------------------------------------------------------------
 * List items — breathing room between bullets
 * ---------------------------------------------------------------------- */
.wp-block-list li {
  margin-bottom: 0.75rem;
  /* no trailing gap under the last bullet */
}
.wp-block-list li:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Global text links — smooth animated underline
 * Uses text-decoration-color (not a background) so it never clashes with
 * button/pill backgrounds. Excludes UI links: buttons, navigation, social,
 * site title/logo, and the language switcher.
 * ---------------------------------------------------------------------- */
a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-home-link):not(.wp-block-social-link-anchor):not(.wp-block-site-title a):not(.wp-block-polylang-language-switcher a)) {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: auto;
  /* Constant offset — clears Thai below-vowels and tone marks without
     detaching from the text. Only the colour animates, so the underline
     fades in on hover instead of jumping. */
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.25s ease;
}
a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-home-link):not(.wp-block-social-link-anchor):not(.wp-block-site-title a):not(.wp-block-polylang-language-switcher a)):hover, a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-home-link):not(.wp-block-social-link-anchor):not(.wp-block-site-title a):not(.wp-block-polylang-language-switcher a)):focus-visible {
  text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------------
 * Buttons — balanced hover
 * Each button style darkens or inverts within its own colour family instead
 * of every button jumping to the same gold. WordPress prints preset colour
 * classes with !important, so the hover states have to match that weight.
 * Order matters: the rules below share specificity, so the more specific
 * variants are listed last.
 * ---------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Default gold button → deeper gold, text unchanged. Buttons that opt into
   one of the button-system variants are excluded: those carry their own
   hover/pressed colours from the Figma artboard further down. .t4a-arrow-link
   is excluded too — it's a plain text-plus-arrow link, not a pill button,
   and its own !important background:none further down this file used to
   lose to this rule's higher specificity (.wp-block-button + five :not()s
   + .wp-block-button__link + :hover beats .t4a-arrow-link .wp-block-button__link
   :hover even though both carry !important), flashing a gold pill behind it
   on hover.
   Scoped to page content with :where() (which adds no specificity) so the
   header bar's own buttons keep their colours — turning the white header
   CTA gold on hover was never the intent. */
:where(main, footer) .wp-block-button:not(.is-style-outline):not(.is-style-primary):not(.is-style-secondary):not(.is-style-tertiary):not(.is-style-text):not(.t4a-arrow-link) .wp-block-button__link:hover, :where(main, footer) .wp-block-button:not(.is-style-outline):not(.is-style-primary):not(.is-style-secondary):not(.is-style-tertiary):not(.is-style-text):not(.t4a-arrow-link) .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--accent-5) !important;
  color: var(--wp--preset--color--contrast) !important;
}

/* The white CTA in the header dims on hover rather than changing colour —
   filter keeps whatever fill the button has, so it reads as the same button
   pressed in, not a different one. */
.wp-block-button .wp-block-button__link.has-base-alt-background-color {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}
.wp-block-button .wp-block-button__link.has-base-alt-background-color:hover, .wp-block-button .wp-block-button__link.has-base-alt-background-color:focus-visible {
  filter: brightness(0.9);
}

/* Ghost/outline button on a dark bar — the header, and the footer's matching
   pair, which is the same block with the same classes. It borrows the text
   colour (white) and fills white on hover. Outline buttons elsewhere follow
   the button-system rules further down. */
header .wp-block-button.is-style-outline .wp-block-button__link,
.t4a-footer .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: currentColor;
}
header .wp-block-button.is-style-outline .wp-block-button__link:hover, header .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.t4a-footer .wp-block-button.is-style-outline .wp-block-button__link:hover,
.t4a-footer .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--base-alt) !important;
  color: var(--wp--preset--color--dark-base) !important;
  border-color: var(--wp--preset--color--base-alt) !important;
}

/* =========================================================================
 * Button system — Figma "Trees4All button system" (807:1401)
 * Five variants (primary / secondary / tertiary / outline / text) x five
 * states (default / hover / pressed / disabled / loading), three sizes and
 * the circular icon buttons. Variants are real block styles registered in
 * functions.php, so the client picks one in the block sidebar instead of
 * hand-rolling colours per button ("outline" comes from WordPress core).
 *
 * Core spec from the artboard: pill radius 100px · standard padding
 * 32x14 · icon gap 5-8px · minimum touch target 44px · label IBM Plex
 * Sans Thai SemiBold · 3px focus ring.
 * ---------------------------------------------------------------------- */
:root {
  --t4a-btn-ink: #252525;
  --t4a-btn-disabled-bg: #e2e5df;
  --t4a-btn-disabled-fg: #969c94;
  --t4a-btn-focus-ring: #2563eb;
  --t4a-btn-gap: 6px;
}

.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--t4a-btn-gap);
  border-radius: 100px;
  font-family: var(--wp--preset--font-family--ibm-plex-sans-thai, "IBM Plex Sans Thai");
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.wp-block-button .wp-block-button__link:focus-visible {
  outline: 3px solid var(--t4a-btn-focus-ring);
  outline-offset: 2px;
}

/* --- sizes: SM 36 / MD 48 / LG 53 -------------------------------------
   Scoped to buttons that actually opt into a variant, so plain buttons
   (the header's, for one) keep whatever sizing they already had. */
.wp-block-button.is-style-primary,
.wp-block-button.is-style-secondary,
.wp-block-button.is-style-tertiary,
.wp-block-button.is-style-outline,
.wp-block-button.is-style-text {
  /* LG is the default. The artboard draws it 58px tall with 32px sides;
     53px and 22px read better against the rest of the page. Only the
     padding moves — the label keeps its size. */
  /* SM keeps the 44px touch target on mobile, per the artboard note */
}
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.is-style-tertiary .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-text .wp-block-button__link {
  padding: 12px 22px;
  font-size: 1.125rem;
  min-height: 53px;
}
.wp-block-button.is-style-primary.t4a-btn-md .wp-block-button__link,
.wp-block-button.is-style-secondary.t4a-btn-md .wp-block-button__link,
.wp-block-button.is-style-tertiary.t4a-btn-md .wp-block-button__link,
.wp-block-button.is-style-outline.t4a-btn-md .wp-block-button__link,
.wp-block-button.is-style-text.t4a-btn-md .wp-block-button__link {
  padding: 12px 24px;
  font-size: 1rem;
  min-height: 48px;
}
.wp-block-button.is-style-primary.t4a-btn-sm .wp-block-button__link,
.wp-block-button.is-style-secondary.t4a-btn-sm .wp-block-button__link,
.wp-block-button.is-style-tertiary.t4a-btn-sm .wp-block-button__link,
.wp-block-button.is-style-outline.t4a-btn-sm .wp-block-button__link,
.wp-block-button.is-style-text.t4a-btn-sm .wp-block-button__link {
  padding: 8px 16px;
  font-size: 0.875rem;
  min-height: 36px;
}
@media (max-width: 781px) {
  .wp-block-button.is-style-primary.t4a-btn-sm .wp-block-button__link,
  .wp-block-button.is-style-secondary.t4a-btn-sm .wp-block-button__link,
  .wp-block-button.is-style-tertiary.t4a-btn-sm .wp-block-button__link,
  .wp-block-button.is-style-outline.t4a-btn-sm .wp-block-button__link,
  .wp-block-button.is-style-text.t4a-btn-sm .wp-block-button__link {
    min-height: 44px;
  }
}

/* --- variant: Primary (gold) ------------------------------------------- */
.wp-block-button.is-style-primary .wp-block-button__link {
  background-color: #f3ca61;
  color: var(--t4a-btn-ink);
  border: none;
}
.wp-block-button.is-style-primary .wp-block-button__link:hover, .wp-block-button.is-style-primary .wp-block-button__link:focus-visible {
  background-color: #f7d77f;
  color: var(--t4a-btn-ink);
}
.wp-block-button.is-style-primary .wp-block-button__link:active {
  background-color: #ddb34c;
}

/* --- variant: Secondary (dark green) ----------------------------------- */
.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: #284d26;
  color: #fff;
  border: none;
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover, .wp-block-button.is-style-secondary .wp-block-button__link:focus-visible {
  background-color: #356632;
  color: #fff;
}
.wp-block-button.is-style-secondary .wp-block-button__link:active {
  background-color: #1d3b1c;
}

/* --- variant: Tertiary (light green) ----------------------------------- */
.wp-block-button.is-style-tertiary .wp-block-button__link {
  background-color: #e0eadc;
  color: #284d26;
  border: none;
}
.wp-block-button.is-style-tertiary .wp-block-button__link:hover, .wp-block-button.is-style-tertiary .wp-block-button__link:focus-visible {
  background-color: #cfdfc9;
  color: #284d26;
}
.wp-block-button.is-style-tertiary .wp-block-button__link:active {
  background-color: #b9d0b1;
}

/* --- variant: Outline (core style, restyled) --------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--t4a-btn-ink);
  border: 1.5px solid #284d26;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background-color: transparent;
  color: var(--t4a-btn-ink);
  border-color: #284d26;
}
.wp-block-button.is-style-outline .wp-block-button__link:active {
  background-color: rgba(40, 77, 38, 0.12);
}

/* --- variant: Text (no fill; hover underlines) ------------------------- */
.wp-block-button.is-style-text .wp-block-button__link {
  background-color: transparent;
  color: var(--t4a-btn-ink);
  border: none;
  padding-inline: 0;
  font-weight: 500;
}
.wp-block-button.is-style-text .wp-block-button__link:hover, .wp-block-button.is-style-text .wp-block-button__link:focus-visible {
  background-color: transparent;
  color: var(--t4a-btn-ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- state: disabled (same treatment across every variant) ------------- */
.wp-block-button.t4a-btn-disabled .wp-block-button__link,
.wp-block-button .wp-block-button__link[aria-disabled=true] {
  pointer-events: none;
  cursor: not-allowed;
  background-color: var(--t4a-btn-disabled-bg);
  color: var(--t4a-btn-disabled-fg);
  border-color: #284d26;
}

.wp-block-button.is-style-text.t4a-btn-disabled .wp-block-button__link {
  background-color: transparent;
  text-decoration: none;
}

/* --- state: loading (spinner before the label) ------------------------- */
.wp-block-button.t4a-btn-loading .wp-block-button__link {
  pointer-events: none;
}
.wp-block-button.t4a-btn-loading .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: t4a-btn-spin 0.7s linear infinite;
}

@keyframes t4a-btn-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button.t4a-btn-loading .wp-block-button__link::before {
    animation-duration: 2.4s;
  }
}
/* --- circular icon buttons --------------------------------------------
   Carousel controls are 40px solid white, social buttons 36px white at
   33% opacity, both with 16-22px glyphs (artboard "Icon examples"). */
.t4a-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background-color: #fff;
  color: #284d26;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.t4a-icon-btn svg,
.t4a-icon-btn img {
  width: 16px;
  height: 16px;
}
.t4a-icon-btn:hover {
  background-color: #f7d77f;
}
.t4a-icon-btn:active {
  transform: scale(0.96);
}
.t4a-icon-btn:focus-visible {
  outline: 3px solid var(--t4a-btn-focus-ring);
  outline-offset: 2px;
}
.t4a-icon-btn--social {
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.33);
  color: #fff;
}
.t4a-icon-btn--social:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

/* Footer menu links are content links, not top-bar navigation, so they get the
   same hover underline as body text. The global rule above skips every
   .wp-block-navigation-item__content, which is why they need their own rule
   now that the footer columns are navigation blocks. */
footer .wp-block-navigation .wp-block-navigation-item__content {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.25s ease;
}
footer .wp-block-navigation .wp-block-navigation-item__content:hover, footer .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------------
 * Home hero
 * The photo (cover background), the white wordmark over it and a gold CTA
 * pill sitting hard against the bottom edge.
 * Every size is expressed against the 1440x746 design frame so the whole thing
 * keeps its proportions as the viewport shrinks:
 *   height 746/1440 = 51.8vw · title 128/1440 = 8.9vw
 *   taglines 20/1440 = 1.39vw · title top 146/1440 = 10.14vw
 *   tagline gap 217/1440 = 15.07vw
 * ---------------------------------------------------------------------- */
.t4a-hero {
  min-height: clamp(360px, 51.8vw, 746px);
  /* One source of truth for the wordmark's size: the taglines below measure
     themselves against it. */
  --t4a-hero-title-size: clamp(2.25rem, 8.9vw, 8rem);
  /* "Trees4All" set in Noto Sans Thai Bold with 0.02em tracking always comes
     out 4.694 times its font size wide — checked at 36, 64, 91 and 128px, and
     600.84px at 128 against the design's 599px box. Because every part of that
     scales with the font size, the ratio holds at any viewport. */
  --t4a-hero-title-width: calc(4.694 * var(--t4a-hero-title-size));
  /* The T's ink starts a touch inside its text box — the glyph's left side
     bearing, 0.02 of the font size. */
  --t4a-hero-title-bearing: calc(0.02 * var(--t4a-hero-title-size));
  /* Design puts the pill at y=642 of a 746-tall hero: hard against the
     bottom, so let the flex column push it there. */
}
.t4a-hero .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  min-height: inherit;
  padding-top: clamp(1.75rem, 10.14vw, 9.125rem);
  /* 46/1440 — the gap the design leaves below the CTA. */
  padding-bottom: clamp(1rem, 3.2vw, 2.875rem);
}
.t4a-hero .t4a-hero__title {
  margin: 0;
  font-size: var(--t4a-hero-title-size);
}
.t4a-hero .t4a-hero__taglines {
  /*
   * The two taglines used to sit in a centred row with a fixed gap, so
   * "ต้นไม้ของเรา" landed wherever that row happened to fall — a few
   * pixels to the LEFT of the T above it, and by a different amount at
   * every viewport. Matching the row to the wordmark's own width and
   * pushing the two to its ends puts the first one under the start of
   * the T and the second under the end of the l, at any size.
   */
  width: min(100%, var(--t4a-hero-title-width));
  margin-inline: auto;
  justify-content: space-between;
  gap: 1rem;
  padding-inline-start: var(--t4a-hero-title-bearing);
  /* The 20px above comes from the cover's blockGap, not from here —
     clearing the logical property WordPress actually sets. */
  margin-block-start: 0;
}
.t4a-hero .t4a-hero__taglines p {
  margin: 0;
  /* 5px under the previous 15/23px ramp, at every width. */
  font-size: calc(clamp(0.9375rem, 1.57vw, 1.4375rem) - 5px);
}
.t4a-hero .t4a-hero__cta {
  margin-top: auto;
}
.t4a-hero .t4a-hero__cta-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(0.875rem, 1.25vw, 1.125rem);
  /* Hard offset shadow from the design, not a blurred one. */
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.17);
  /* Arrow is the exported Figma asset, masked so it follows the label
     colour instead of being a fixed-colour image. */
}
.t4a-hero .t4a-hero__cta-button .wp-block-button__link::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background-color: currentColor;
  mask: url("../img/arrow-right.svg") no-repeat center/contain;
  -webkit-mask: url("../img/arrow-right.svg") no-repeat center/contain;
}

/* -------------------------------------------------------------------------
 * Header floats over whatever sits at the top of the page
 *
 * The design shows the top menu with no bar of its own, sitting on the
 * photo/banner behind it. Taking the header out of flow lets that first
 * section start at the very top, and its own dark background is what keeps
 * the white menu legible.
 * Scoped with :has() to pages whose first block is a cover — see below.
 * ---------------------------------------------------------------------- */
/* Only pages that OPEN WITH A FULL-BLEED COVER get the floating treatment —
   that is the home and About designs (762:362, 778:362), where the first
   section is a photo the menu sits on top of. Every other page — FAQ
   (807:1583), posts, and any new page — keeps the header's own solid
   dark-green band and starts its content below it, so nothing is hidden and
   the menu never looks washed out.
   The :has() test reads the page's own first block: either a cover, or a
   section carrying .t4a-hero-lead (a full-bleed group whose own photo runs
   to the top edge, like the How We Work hero). */
body:has(main .wp-block-post-content > .wp-block-cover:first-child),
body:has(main .entry-content > .wp-block-cover:first-child),
body:has(main .wp-block-post-content > .t4a-hero-lead:first-child),
body:has(main .entry-content > .t4a-hero-lead:first-child) {
  /* The solid colour lives on the INNER group (.has-dark-base-background-color),
     which WordPress prints with !important — so clear it there, not on the
     template-part wrapper, and match that weight. Over the hero photo the
     design leaves only a faint dark-green veil, and the header carries
     Figma's GLASS effect (807:1584 — radius 4, refraction .8, depth 20).
     CSS has no refraction/dispersion, so the frost is reproduced with a
     backdrop blur; a little more blur than Figma's radius compensates for
     what those extra glass properties contribute there. */
}
body:has(main .wp-block-post-content > .wp-block-cover:first-child) .wp-site-blocks,
body:has(main .entry-content > .wp-block-cover:first-child) .wp-site-blocks,
body:has(main .wp-block-post-content > .t4a-hero-lead:first-child) .wp-site-blocks,
body:has(main .entry-content > .t4a-hero-lead:first-child) .wp-site-blocks {
  position: relative;
}
body:has(main .wp-block-post-content > .wp-block-cover:first-child) header.wp-block-template-part,
body:has(main .entry-content > .wp-block-cover:first-child) header.wp-block-template-part,
body:has(main .wp-block-post-content > .t4a-hero-lead:first-child) header.wp-block-template-part,
body:has(main .entry-content > .t4a-hero-lead:first-child) header.wp-block-template-part {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 10;
}
body:has(main .wp-block-post-content > .wp-block-cover:first-child) header.wp-block-template-part > .wp-block-group,
body:has(main .entry-content > .wp-block-cover:first-child) header.wp-block-template-part > .wp-block-group,
body:has(main .wp-block-post-content > .t4a-hero-lead:first-child) header.wp-block-template-part > .wp-block-group,
body:has(main .entry-content > .t4a-hero-lead:first-child) header.wp-block-template-part > .wp-block-group {
  background-color: transparent !important;
  /* The two translucent fills the design stacks on the bar
     (762:860 / 778:737): #003d0e at 20% over #000000 at 10%. */
  background-image: linear-gradient(rgba(0, 61, 14, 0.2), rgba(0, 61, 14, 0.2)), linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) !important;
  /* GLASS effect, radius 4 — kept at the design's own radius so the
     photo behind stays readable rather than fully frosted. */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* `backdrop-filter` makes this bar a containing block for anything
     `position: fixed` inside it, which pinned the mobile menu drawer to
     the 80px header instead of the viewport — the reason the drawer
     opened as an empty sliver. Nothing behind a full-screen drawer needs
     frosting, so the blur steps aside while it is open. */
}
body:has(main .wp-block-post-content > .wp-block-cover:first-child) header.wp-block-template-part > .wp-block-group:has(.wp-block-navigation__responsive-container.is-menu-open),
body:has(main .entry-content > .wp-block-cover:first-child) header.wp-block-template-part > .wp-block-group:has(.wp-block-navigation__responsive-container.is-menu-open),
body:has(main .wp-block-post-content > .t4a-hero-lead:first-child) header.wp-block-template-part > .wp-block-group:has(.wp-block-navigation__responsive-container.is-menu-open),
body:has(main .entry-content > .t4a-hero-lead:first-child) header.wp-block-template-part > .wp-block-group:has(.wp-block-navigation__responsive-container.is-menu-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* -------------------------------------------------------------------------
 * Theme webfonts, declared here as well as in theme.json
 *
 * The site's Global Styles record carries its own typography.fontFamilies
 * list (the Font Library additions made in the Site Editor), and that list
 * REPLACES the one in theme.json rather than merging with it — which silently
 * dropped Anuphan and Noto Sans Thai, leaving h1-h6 pointing at an undefined
 * --wp--preset--font-family--anuphan. Declaring the faces and filling in those
 * two custom properties here keeps the theme's typography working whatever the
 * editor's font list happens to contain.
 * ---------------------------------------------------------------------- */
@font-face {
  font-family: "Anuphan";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/anuphan/anuphan-var.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/notosansthai/notosansthai-var.woff2") format("woff2");
}
:root {
  --wp--preset--font-family--anuphan: "Anuphan", sans-serif;
  --wp--preset--font-family--noto-sans-thai: "Noto Sans Thai", sans-serif;
}

/* -------------------------------------------------------------------------
 * Header bar height
 * Design is an 80px bar: a 48px logo with 16px of breathing room above and
 * below. Setting it here keeps the pattern free of magic numbers.
 * ---------------------------------------------------------------------- */
header.wp-block-template-part > .wp-block-group {
  padding-top: 16px;
  padding-bottom: 16px;
}

header .wp-block-site-logo img {
  height: 48px;
  width: auto;
}

/* Below 782px the bar shrinks to a 56px hamburger header — the 80px desktop
   bar left too little room for the page content on a phone screen.
   The header's padding is set inline (style="padding-top:16px..."), which
   beats a plain override at equal specificity — this needs !important to
   actually land, the same reason the vertical padding stayed at 16px here
   the first time round despite this rule. */
@media (max-width: 781px) {
  header.wp-block-template-part > .wp-block-group {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  header .wp-block-site-logo img {
    height: 36px;
  }
}
/* The button system sizes its variants for page CTAs (58px tall at LG).
   The header bar is only 80px, so its buttons opt out of that minimum and
   keep the compact size the design shows — otherwise the whole bar grows.
   The attribute selector is there to outrank `.wp-block-button.is-style-x
   .wp-block-button__link` (0,3,0) without reaching for !important. */
header .wp-block-button[class*=is-style-] .wp-block-button__link,
header .wp-block-button .wp-block-button__link {
  min-height: 0;
}

/* -------------------------------------------------------------------------
 * Header spacing + active language chip (design values)
 * Gaps: 10px from the language pair to the CTA group, 12px between the two
 * buttons. Both blocks live inside the menu post, so they are set here rather
 * than by editing the user's menu content.
 * ---------------------------------------------------------------------- */
header .wp-block-navigation {
  /* Scoped through the header + nav so it comfortably outweighs the group's
     own `elements.link` colour, which would otherwise paint this white. */
  /* The button label was wrapping onto 2 lines as the row ran out of
     width below ~1280px (ติดตามต้นไม้ / ปลูกต้นไม้ are short, but with no
     nowrap they still break once the pill has no room left), inflating
     the whole header's height. Keep the label on one line and shrink the
     pill instead — see the 1280px breakpoint below. */
}
header .wp-block-navigation .wp-block-buttons {
  gap: 12px;
}
header .wp-block-navigation .wp-block-polylang-navigation-language-switcher.current-lang > a,
header .wp-block-navigation .wp-block-polylang-navigation-language-switcher.current-lang > a .wp-block-navigation-item__label {
  color: #183318;
}
header .wp-block-navigation .wp-block-buttons .wp-block-button__link {
  white-space: nowrap;
}

/* Below 1280px (but still desktop nav, i.e. above the 1024px hamburger
   breakpoint) shrink the two header CTA pills so the row keeps fitting
   logo + full menu + language switch + buttons on one line without
   wrapping, per the design's explicit "smaller buttons under 1280" rule. */
@media (max-width: 1280px) and (min-width: 1024px) {
  header .wp-block-navigation .wp-block-buttons .wp-block-button__link {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 14px !important;
  }
  /* The main menu's 5 links (each with a chevron icon) run out of room in
     this range: the item itself kept icon+label on one row (flex-wrap:nowrap),
     but flex-shrink still let the item narrow past its label's natural width,
     so the label text itself line-wrapped. Force it back to one line and drop
     the font a touch so the whole row keeps fitting.

     The gap grows with the viewport instead of sitting at a flat 12px, which
     read far tighter than the 40px the design uses. At 1024px the five links
     measure 403px inside 490px of free space, so ~21px is the most that fits;
     by ~1250px there is room for the full 40px. */
  header .wp-block-navigation:first-of-type {
    font-size: 14px !important;
  }
  header .wp-block-navigation:first-of-type .wp-block-navigation__container {
    gap: clamp(20px, 20px + (100vw - 1024px) * 0.09, 40px) !important;
  }
  header .wp-block-navigation:first-of-type .wp-block-navigation-item__label {
    white-space: nowrap;
  }
}
@media (min-width: 1024px) {
  header .wp-block-navigation .wp-block-buttons {
    margin-left: 10px;
  }
}
/* -------------------------------------------------------------------------
 * Mobile — hero + mission
 * Measured off the Figma frame `tree4all-home-mobile_final` (730:1191), whose
 * phone screen is 376px wide:
 *   hero 474/376 = 126vw tall · title ≈ 72/376 = 19vw · taglines ≈ 3.5vw
 * The hero reflows responsively because it is built from real blocks. The
 * mission section is a flat image, which cannot rearrange itself, so the
 * mobile artwork is a second image and the two are swapped at the breakpoint.
 * ---------------------------------------------------------------------- */
.t4a-mission--mobile,
.t4a-mission__cta {
  display: none;
}

@media (max-width: 781px) {
  .t4a-mission--desktop {
    display: none;
  }
  .t4a-mission--mobile {
    display: block;
  }
  /* Mobile design rhythm, measured off the 376px frame: 48px above the
     artwork, 24px down to the CTA, 49px below it. */
  .t4a-mission--mobile {
    margin-top: 48px;
  }
  /* The mobile design ends this section with a CTA. It is a real button
     rather than part of the artwork so it can be clicked and translated. */
  .t4a-mission__cta {
    display: flex;
    margin: 24px 0 0;
    padding: 0 0 49px;
  }
  .t4a-hero {
    /* 474/376 of the design frame, floored so very narrow phones keep a
       usable hero and capped before it dominates larger handsets. */
    min-height: clamp(420px, 126vw, 560px);
    /* The header floats transparently over this hero (see hero-home.php's
       gradient comment), so the base clamp's ~38px here — sized for the
       desktop header — left the "Trees4All" wordmark starting above the
       mobile header's own bottom edge, clipped behind the solid bar.
       56px is this breakpoint's header height (10px padding + 36px logo,
       both top and bottom); 8px is the design's own gap below it. */
    /* Override the size through the variable, not on .t4a-hero__title —
       the taglines below derive their width from it, and setting the two
       separately left them 5px out of step with the T on a phone. */
    --t4a-hero-title-size: 19vw;
    /* A dedicated portrait shot (media #684) for the phone-width hero
       instead of a cropped sliver of the wide desktop photo — swap which
       of the two stacked <img> tags is visible rather than fighting the
       landscape photo's object-position into a portrait frame. */
  }
  .t4a-hero .wp-block-cover__inner-container {
    padding-top: 64px;
  }
  .t4a-hero .t4a-hero__taglines {
    /* Still the wordmark's width, and still pushed to its two ends —
       which at this size is very nearly the full container anyway. */
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  .t4a-hero .t4a-hero__taglines p {
    font-size: clamp(0.75rem, 3.5vw, 0.9375rem);
  }
  .t4a-hero .t4a-hero__bg--desktop {
    display: none;
  }
  .t4a-hero .t4a-hero__bg--mobile {
    display: block;
  }
}
/* Above the phone breakpoint, hide the mobile-only hero photo — the desktop
   one (shown by default, no rule needed) covers everything from here up. */
@media (min-width: 782px) {
  .t4a-hero__bg--mobile {
    display: none;
  }
}
/* -------------------------------------------------------------------------
 * Mission artwork (transparent PNG/WebP)
 * These exports are the CONTENT box from Figma, not the whole section, so they
 * are centred at their own size instead of being stretched edge to edge — and
 * they carry their own alpha, so no background is painted behind them.
 * ---------------------------------------------------------------------- */
.t4a-mission--desktop,
.t4a-mission--mobile {
  /* `alignfull` (core) sets its own fixed, negative margin-left/-right to
     bleed to the viewport edge, at the same specificity as this rule and
     later in the cascade — it was winning, pinning the (narrower, capped)
     image to the left edge instead of letting it centre. */
  margin-inline: auto !important;
}
.t4a-mission--desktop img,
.t4a-mission--mobile img {
  display: block;
  width: 100%;
  height: auto;
}

/* Natural 1x widths: 1747/2 and 663/2 — never upscale past the export. */
.t4a-mission--desktop {
  max-width: 874px;
}

.t4a-mission--mobile {
  max-width: 332px;
}

/* -------------------------------------------------------------------------
 * How It Works
 * Design frame 1440x1015 (node 730:654). The polaroid frame is drawn in CSS —
 * white card, bottom-heavy padding, soft shadow and a per-column tilt — so the
 * photos stay ordinary core/image blocks the editor can swap.
 * Ratios against the 1440 frame: title 40px = 2.78vw · step title 28px = 1.94vw
 * · label/body 14-16px · photo window 219.7x256 (aspect .858).
 * ---------------------------------------------------------------------- */
.t4a-hiw {
  /* Handwritten second line sits tight under the first. */
  /* --- polaroid --------------------------------------------------------- */
  /* Each card leans a different way, exactly as the design has them. */
}
.t4a-hiw .t4a-hiw__title {
  margin: 0;
  font-size: clamp(1.375rem, 2.78vw, 2.5rem);
}
.t4a-hiw .t4a-hiw__title--script {
  margin-top: 0.15em;
}
.t4a-hiw .t4a-hiw__steps {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.t4a-hiw .t4a-hiw__step-label {
  margin: 0 0 0.25rem;
  font-size: clamp(0.75rem, 0.97vw, 0.875rem);
  letter-spacing: 0.02em;
}
.t4a-hiw .t4a-hiw__step-title {
  margin: 0;
  font-size: clamp(1.25rem, 1.94vw, 1.75rem);
}
.t4a-hiw .t4a-hiw__photo {
  margin: clamp(1rem, 1.67vw, 1.5rem) 0;
  max-width: 240px;
  background: #fffefa;
  border-radius: 3.38px;
  /* Design: 10.14px on three sides, 40.56px at the foot. */
  padding: 10px 10px 40px;
  box-shadow: 3.38px 6.76px 7.6px rgba(0, 0, 0, 0.22);
}
.t4a-hiw .t4a-hiw__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 219.718/256.056;
  object-fit: cover;
  border-radius: 1.69px;
}
.t4a-hiw .t4a-hiw__step:nth-child(1) .t4a-hiw__photo {
  transform: rotate(-3deg);
}
.t4a-hiw .t4a-hiw__step:nth-child(2) .t4a-hiw__photo {
  transform: rotate(2deg);
}
.t4a-hiw .t4a-hiw__step:nth-child(3) .t4a-hiw__photo {
  transform: rotate(-1.5deg);
}
.t4a-hiw .t4a-hiw__step:nth-child(4) .t4a-hiw__photo {
  transform: rotate(3deg);
}
.t4a-hiw .t4a-hiw__step-text {
  margin: 0;
  font-size: clamp(0.875rem, 1.11vw, 1rem);
}
.t4a-hiw .t4a-hiw__cta {
  margin-top: clamp(1.5rem, 2vw, 2rem);
}

/* Mobile: the four columns stack and each step centres. All spacing below is
   measured off the 376px design frame — 32px side padding, 37.5px from the
   heading to step 1, 70px between steps, and within a step 19.5px label to
   photo and 24.5px photo to copy. */
@media (max-width: 781px) {
  .t4a-hiw {
    padding-left: 32px;
    padding-right: 32px;
    /* Design sets the label beside the step name on one line here,
       rather than stacked as on desktop. */
  }
  .t4a-hiw .t4a-hiw__steps {
    gap: 70px;
    margin-top: 37.5px;
  }
  .t4a-hiw .t4a-hiw__step {
    text-align: center;
  }
  .t4a-hiw .t4a-hiw__step-label,
  .t4a-hiw .t4a-hiw__step-title {
    display: inline-block;
    margin: 0;
    vertical-align: baseline;
  }
  .t4a-hiw .t4a-hiw__step-label {
    margin-right: 8px;
    font-size: 0.875rem;
  }
  .t4a-hiw .t4a-hiw__step-title {
    font-size: 1.125rem;
  }
  .t4a-hiw .t4a-hiw__photo {
    margin: 19.5px auto 24.5px;
    /* Frame is 200px wide in the design, not the full column. */
    max-width: 200px;
  }
  .t4a-hiw .t4a-hiw__title {
    font-size: clamp(1.25rem, 6.4vw, 1.75rem);
  }
}
/* The gold pill's trailing arrow, shared with the hero CTA. */
.t4a-cta-arrow .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.t4a-cta-arrow .wp-block-button__link::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background-color: currentColor;
  mask: url("../img/arrow-right.svg") no-repeat center/contain;
  -webkit-mask: url("../img/arrow-right.svg") no-repeat center/contain;
}

/* -------------------------------------------------------------------------
 * Impact Stat
 * Desktop node 730:705, mobile 730:1272. Same six figures either way, but the
 * treatment differs: desktop is 3-up with hairline dividers, mobile is 2-up
 * cards. One grid handles both.
 * The leaf photo sits at the top and fades into #162511 — it is decorative, so
 * it is a CSS background (url passed in as --t4a-impact-bg) rather than an
 * <img> in the flow.
 * ---------------------------------------------------------------------- */
.t4a-impact {
  position: relative;
  isolation: isolate;
  padding-top: clamp(6rem, 13.9vw, 12.5rem);
  padding-bottom: clamp(3rem, 5.56vw, 5rem);
  overflow: hidden;
  /* The photo itself is the section's own background (a real block
     attribute, so it survives an editor save and stays swappable). This
     overlay reproduces what the design lays on top of it (762:441): a
     #284d26 39% wash over the photo, the fade to the base colour starting
     at y=161 — 19.6% of the 822px photo, NOT at the very top — stacked
     twice exactly as the design does, and solid base below the photo. */
  --t4a-impact-photo-h: clamp(249px, 57vw, 822px);
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  /* Second half of the headline is the handwritten face. */
  /* --- the six figures -------------------------------------------------- */
  /* Hairline between figures in a row — never before the first of a row. */
}
.t4a-impact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to bottom, rgba(22, 37, 17, 0) 19.6%, rgb(22, 37, 17) 100%), linear-gradient(to bottom, rgba(22, 37, 17, 0) 19.6%, rgb(22, 37, 17) 100%), linear-gradient(rgba(40, 77, 38, 0.39), rgba(40, 77, 38, 0.39)), linear-gradient(#162511, #162511);
  background-size: 100% var(--t4a-impact-photo-h), 100% var(--t4a-impact-photo-h), 100% var(--t4a-impact-photo-h), 100% calc(100% - var(--t4a-impact-photo-h) + 1px);
  background-position: center top, center top, center top, center bottom;
  background-repeat: no-repeat;
}
.t4a-impact .t4a-impact__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.78vw, 2.5rem);
  line-height: 1.3;
}
.t4a-impact .t4a-impact__title-script {
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER");
  font-weight: 400;
}
.t4a-impact .t4a-impact__lead {
  margin: 16px auto 0;
  max-width: 33ch;
  font-size: clamp(1.25rem, 2.22vw, 2rem);
  line-height: 1.4;
}
.t4a-impact .t4a-impact__note {
  margin: 16px auto 0;
  max-width: 50ch;
  font-size: clamp(0.9375rem, 1.67vw, 1.5rem);
  line-height: 1.4;
}
.t4a-impact .t4a-impact__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
}
.t4a-impact .t4a-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px 16px;
  /* WordPress's is-layout-flow adds margin-block-start to siblings, which
     would stack on top of the grid gap — neutralise it here. */
  margin-block: 0;
}
.t4a-impact .t4a-stat:not(:nth-child(3n+1))::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
}
.t4a-impact .t4a-stat__icon {
  margin: 0;
}
.t4a-impact .t4a-stat__icon img {
  display: block;
  width: 28px;
  height: 28px;
}
.t4a-impact .t4a-stat__value {
  margin: 0;
  font-size: clamp(1.5rem, 3.33vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}
.t4a-impact .t4a-stat__unit {
  font-size: 0.5em;
  font-weight: 700;
}
.t4a-impact .t4a-stat__label {
  margin: 0;
  color: #a1b29e;
  font-size: clamp(0.75rem, 1.25vw, 1.125rem);
  font-weight: 500;
  line-height: 1.3;
}
.t4a-impact .t4a-stat__note {
  margin: 0;
  color: #a1b29e;
  font-size: clamp(0.75rem, 0.97vw, 0.875rem);
  line-height: 1.4;
}
.t4a-impact .t4a-impact__cta {
  margin-top: clamp(1.25rem, 2vw, 1.875rem);
}

/* Mobile: two per row, and each figure becomes a bordered card as designed. */
@media (max-width: 781px) {
  .t4a-impact {
    padding-left: 16px;
    padding-right: 16px;
    /* 154px to the headline, per the mobile frame (762:979) */
    padding-top: 154px;
    padding-bottom: 50px;
    /* A dedicated mobile shot (881:7175, media library #683) rather than
       a `cover`-cropped sliver of the wide desktop photo — the section's
       own background is set inline (a swappable block attribute), which
       needs !important to beat here. Relative to this stylesheet
       (assets/css → wp-content/uploads), not to the site root: the
       production site lives under /new/, where a root-relative
       /wp-content/… missed the folder and the image never loaded. */
    background-image: url("../../../../uploads/2026/09/impact-stat-bg-mobile.webp") !important;
    /* The mobile design fades the 249px photo from its very top — there
       is no clear band above the fade the way the desktop frame has. */
    /* Cards carry their own edges, so the dividers go away. */
  }
  .t4a-impact::before {
    background-image: linear-gradient(to bottom, rgba(22, 37, 17, 0) 0%, rgb(22, 37, 17) 100%), linear-gradient(rgba(40, 77, 38, 0.39), rgba(40, 77, 38, 0.39)), linear-gradient(#162511, #162511);
    background-size: 100% var(--t4a-impact-photo-h), 100% var(--t4a-impact-photo-h), 100% calc(100% - var(--t4a-impact-photo-h) + 1px);
    background-position: center top, center top, center bottom;
  }
  .t4a-impact .t4a-impact__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 24px;
  }
  .t4a-impact .t4a-stat {
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
  }
  .t4a-impact .t4a-stat::before {
    content: none;
  }
  .t4a-impact .t4a-stat__icon img {
    width: 24px;
    height: 24px;
  }
  .t4a-impact .t4a-impact__cta {
    margin-top: 20px;
  }
}
/* -------------------------------------------------------------------------
 * Impact Map
 * Text column + a swipeable slideshow built on core/gallery, progressively
 * enhanced by assets/js/impact-map-slider.js (no plugin — see that file's
 * header comment). The client manages slides the normal way: add/remove/
 * reorder images in the Gallery block toolbar.
 * ---------------------------------------------------------------------- */
.t4a-impact-map {
  /* --- the slider -------------------------------------------------------- */
}
.t4a-impact-map .t4a-impact-map__row {
  align-items: center;
}
.t4a-impact-map .t4a-impact-map__text {
  flex: 1 1 420px;
}
.t4a-impact-map .t4a-impact-map__eyebrow {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.t4a-impact-map .t4a-impact-map__title {
  margin: 10px 0 0;
  font-size: 23px;
}
.t4a-impact-map .t4a-impact-map__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}
.t4a-impact-map .t4a-impact-map__body + .t4a-impact-map__body {
  margin-top: 1em;
}
.t4a-impact-map .t4a-impact-map__actions {
  margin-top: 8px;
}
.t4a-impact-map .t4a-impact-map__slider {
  flex: 1 1 480px;
  max-width: 780px;
  width: 100%;
  outline: none;
}
.t4a-impact-map .t4a-impact-map__viewport {
  overflow: hidden;
  border-radius: 20px;
  touch-action: pan-y;
}
.t4a-impact-map .t4a-impact-map__gallery {
  display: flex !important;
  flex-wrap: nowrap;
  transition: transform 0.4s ease;
  margin: 0;
  gap: 0;
}
.t4a-impact-map .t4a-impact-map__gallery .wp-block-image {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 780/439;
}
.t4a-impact-map .t4a-impact-map__gallery .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.t4a-impact-map .t4a-impact-map__slide {
  cursor: zoom-in;
}
.t4a-impact-map .t4a-impact-map__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.t4a-impact-map .t4a-impact-map__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.t4a-impact-map .t4a-impact-map__arrow:hover, .t4a-impact-map .t4a-impact-map__arrow:focus-visible {
  background: #ffffff;
}
.t4a-impact-map .t4a-impact-map__arrow img {
  display: block;
  width: 14px;
  height: 14px;
}
.t4a-impact-map .t4a-impact-map__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.t4a-impact-map .t4a-impact-map__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.t4a-impact-map .t4a-impact-map__dot.is-active {
  background: #111111;
}

@media (max-width: 781px) {
  .t4a-impact-map {
    /* Mobile frame (762:1044) uses a lighter cream than desktop's
       #eff4ed. The section colour is an inline block style, which beats
       an external stylesheet at any specificity, so this needs
       !important to win. */
    background-color: #fafaf5 !important;
    /* Both buttons relocate below the slider as one row here — see
       initMapActionsReflow() in impact-map-slider.js, which also swaps
       them to map-then-plant order (reversed from desktop). Design has
       them as an even flex:1 pair, not auto-width. */
    /* Auto-width, single line, centred — matching every other pill button
       on the site. An earlier flex:1 pair (to match the design's literal
       166.5px-each box) made the buttons wrap to 2-3 lines and grow
       visibly taller than any other button: the 32px inline padding
       baked into each button leaves only ~100px for the label, not
       enough for "ปลูกต้นไม้ของเรา" at 16px. flex-wrap lets the second
       pill drop to its own line on narrow phones instead of squeezing. */
  }
  .t4a-impact-map .t4a-impact-map__row {
    flex-direction: column;
    align-items: stretch;
  }
  .t4a-impact-map .t4a-impact-map__text,
  .t4a-impact-map .t4a-impact-map__slider {
    max-width: none;
    flex-basis: auto;
  }
  .t4a-impact-map .t4a-impact-map__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
  }
  .t4a-impact-map .t4a-impact-map__actions .wp-block-button__link {
    white-space: nowrap;
    font-size: 1rem;
  }
}
/* -------------------------------------------------------------------------
 * Back to top — built by assets/js/back-to-top.js on every page. Sits below
 * the lightbox (1000) and the mobile menu overlay, so both cover it.
 * ---------------------------------------------------------------------- */
.t4a-back-to-top {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  /* the white ring keeps it visible over the site's dark-green sections */
  border: 2px solid #fff;
  border-radius: 50%;
  background: #284d26;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background-color 0.2s ease;
}
.t4a-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.t4a-back-to-top:hover {
  background: #3a6b37;
}
.t4a-back-to-top:focus-visible {
  outline: 3px solid #f3ca61;
  outline-offset: 3px;
}
@media (max-width: 781px) {
  .t4a-back-to-top {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .t4a-back-to-top {
    transform: none;
    transition: none;
  }
}
@media print {
  .t4a-back-to-top {
    display: none;
  }
}

/* -------------------------------------------------------------------------
 * Slideshow lightbox — one shared instance for any [data-t4a-slider]
 * ---------------------------------------------------------------------- */
.t4a-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.92);
  padding: 24px;
}
.t4a-lightbox.is-open {
  display: flex;
}

html.t4a-lightbox-open {
  overflow: hidden;
}

.t4a-lightbox__figure {
  margin: 0;
  max-width: min(92vw, 1400px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t4a-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 8px;
}

.t4a-lightbox__counter {
  margin-top: 12px;
  color: #ffffff;
  font-size: 0.875rem;
  opacity: 0.8;
}

.t4a-lightbox__close,
.t4a-lightbox__arrow {
  position: absolute;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.t4a-lightbox__close:hover, .t4a-lightbox__close:focus-visible,
.t4a-lightbox__arrow:hover,
.t4a-lightbox__arrow:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}

.t4a-lightbox__close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
}

.t4a-lightbox__arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 2rem;
}

.t4a-lightbox__arrow--prev {
  left: 20px;
}

.t4a-lightbox__arrow--next {
  right: 20px;
}

@media (max-width: 600px) {
  .t4a-lightbox__arrow {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  .t4a-lightbox__close {
    width: 36px;
    height: 36px;
    font-size: 1.5rem;
  }
}
/* -------------------------------------------------------------------------
 * Join Us
 * Dark green band (node 730:797), 4 equal cards on core/columns. Each photo
 * sits in a thick-white-border "product frame" (12px border, soft shadow) —
 * a plain core/image so the client can swap photos, framed by CSS.
 * ---------------------------------------------------------------------- */
.t4a-joinus .t4a-joinus__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.78vw, 2.5rem);
  line-height: 1.3;
}
.t4a-joinus .t4a-joinus__title-script {
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER");
  font-weight: 400;
  /* 5px under the line above it at every width — the same clamp as
     .t4a-joinus__title, minus 5px, rather than a second pair of numbers
     that would drift apart the next time the title is resized. */
  font-size: calc(clamp(1.5rem, 2.78vw, 2.5rem) - 5px);
}
.t4a-joinus .t4a-joinus__lead {
  margin: 12px auto 0;
  max-width: 54ch;
  /* Flat 18px. It used to scale 18 -> 24px, which on a wide screen put the
     lead almost level with the card titles under it. */
  font-size: 1.125rem;
  line-height: 1.4;
}
.t4a-joinus .t4a-joinus__cards {
  margin-top: clamp(1.5rem, 2vw, 1.875rem);
}
.t4a-joinus .t4a-joinus__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.t4a-joinus .t4a-joinus__photo {
  margin: 0;
  width: 100%;
  max-width: 300px;
  background: #fafaf5;
  border: 12px solid #ffffff;
  border-radius: 1.5px;
  box-shadow: 0 7.5px 18px -4.5px rgba(0, 0, 0, 0.08);
}
.t4a-joinus .t4a-joinus__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 300/345;
  object-fit: cover;
}
.t4a-joinus .t4a-joinus__card-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}
.t4a-joinus .t4a-joinus__card-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.t4a-joinus .t4a-joinus__cta {
  margin-top: auto;
  padding-top: 4px;
}
.t4a-joinus .t4a-joinus__cta .wp-block-button__link {
  width: 220px;
  justify-content: center;
}

/* Icon button system — global, used by any core/button across the site
   (Impact Map, Join Us, CTA Container, ...). Icon is a CSS background on
   ::before, never an <img> inside the button's RichText label — an <img>
   there gets stripped the moment someone edits that button's text in the
   editor, since RichText only preserves recognised inline formatting. The
   className (".t4a-btn-icon" + a "--<icon>" modifier) IS a real block
   attribute, so it survives edits. Previously this base rule was nested
   under .t4a-impact-map only, so every other section's icon silently
   never rendered (no ::before box without a scoped `content` rule) —
   moved here once so it works everywhere. */
.t4a-btn-icon .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.t4a-btn-icon .wp-block-button__link::before {
  content: "";
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.t4a-btn-icon--leaf .wp-block-button__link::before {
  background-image: url("../img/impact-map/leaf.svg");
}

.t4a-btn-icon--map .wp-block-button__link::before {
  background-image: url("../img/impact-map/map-icon.svg");
}

.t4a-btn-icon--users .wp-block-button__link::before {
  background-image: url("../img/join-us/icon-users.svg");
}

.t4a-btn-icon--edit .wp-block-button__link::before {
  background-image: url("../img/join-us/icon-edit.svg");
}

.t4a-btn-icon--product .wp-block-button__link::before {
  background-image: url("../img/join-us/icon-product.svg");
}

@media (max-width: 781px) {
  .t4a-joinus {
    /* core/columns already wraps below 782px by default (seed4/core
       behaviour); just make each card take the full row so it stacks
       one-per-line instead of two-up. */
    /* One card per row turns the block's split blockGap (row 1.5–2.5rem,
       column 1–2.5rem) into a single wrapped column, so only the row
       value should still apply — but core's columns gap doesn't always
       carry over cleanly once every card is forced to 100% width, so
       space them explicitly instead of trusting it to. */
  }
  .t4a-joinus .t4a-joinus__card {
    flex-basis: 100% !important;
  }
  .t4a-joinus .t4a-joinus__cards {
    row-gap: 32px !important;
  }
  .t4a-joinus .t4a-joinus__photo {
    max-width: 320px;
    /* Desktop keeps every card dead straight (measured 0deg on both
       730:797 and its 762:797 duplicate); the mobile frame
       (762:533, phone-width) gives each photo a slight alternating
       tilt instead — a lighter version of the polaroid treatment
       used for Mission / How It Works. Desktop is untouched. */
    transform: rotate(-2deg);
  }
  .t4a-joinus .t4a-joinus__card:nth-child(even) .t4a-joinus__photo {
    transform: rotate(2deg);
  }
}
/* -------------------------------------------------------------------------
 * Partners
 * Three groups (funders / project funders / implementing & partner orgs),
 * each a left-border label + a row of logos. One layout for both desktop and
 * mobile — flex-wrap reflows the logos naturally instead of needing a
 * separate mobile structure (node 762:697 is 1440px-only; there is no
 * dedicated mobile frame for this section).
 * ---------------------------------------------------------------------- */
.t4a-partners {
  /* The group itself has nothing to draw; dissolving it lets its label and
     its logo strip become grid items of the row above. */
  /* Each group stacks its OWN label above its OWN logos (confirmed from
     the design's `flex-col` on every "carousel-header" — missed on the
     first pass, which wrongly built label+logos side by side and then
     "fixed" the resulting mis-render by forcing full width, compounding
     the mistake). The 3 groups then sit side by side as columns in the
     outer row on desktop (room for 248/380/651px columns in 1280px), and
     wrap to full-width stacked columns on mobile purely because they no
     longer fit side by side — no explicit direction override needed
     there any more, just the spacing/typography differences kept below. */
}
.t4a-partners .t4a-partners__row {
  /*
   * A two-row grid, not a flex row. Flex made each group its own
   * little column, so a label that wrapped to two lines pushed its own
   * logos down while the neighbours' stayed put, and the three groups
   * sat at three different heights. In a grid the labels all share row
   * 1 and the logo strips all share row 2, so both line up across the
   * section however the labels wrap.
   *
   * Columns are sized to their own label (Figma 248 / 380 / the rest of
   * 1280), instead of the equal 400px thirds WordPress's flex layout
   * was handing out — which is what pushed the seven-logo group onto a
   * line of its own.
   */
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  column-gap: 2.25rem;
  row-gap: 1.1875rem;
}
.t4a-partners .t4a-partners__group {
  display: contents;
}
.t4a-partners .t4a-partners__label {
  grid-row: 1;
}
.t4a-partners .t4a-partners__logos {
  grid-row: 2;
}
.t4a-partners .t4a-partners__label {
  margin: 0;
  /* No width cap. 260px forced the two longer labels onto a second line
     while the first stayed on one, which is what set the three columns
     at different heights in the first place. The grid column sizes to
     the label instead, exactly as the design does (248 / 380 / rest),
     and an "auto" track still lets the text wrap when the viewport is
     genuinely too narrow. */
  padding-left: 12px;
  border-left: 1px solid #6b6661;
  color: #6b6661;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
.t4a-partners .t4a-partners__logos {
  /*
   * 8-16px. The old 10-30px opened to 28px on a normal desktop, roughly
   * four times the 7.4px the design leaves between the seven logos of
   * the third group, and it was wide enough to wrap that group onto a
   * second line before the viewport was anywhere near narrow. The design
   * packs a longer row tighter than a short one (18.5px in the group of
   * two); one range covering both keeps this working whatever the client
   * adds or removes later.
   */
  column-gap: clamp(0.5rem, 1.25vw, 1rem);
  row-gap: 0.75rem;
  align-items: center;
}
.t4a-partners .t4a-partners__logo {
  margin: 0;
  /* A consistent visual height regardless of each logo's own aspect
     ratio, so the row reads as one tidy strip — same idea as any
     standard "as featured in" logo bar. */
  height: clamp(1.625rem, 4.86vw, 3.75rem);
}
.t4a-partners .t4a-partners__logo img {
  display: block;
  width: auto;
  height: 100%;
  /* A wordmark is far wider than it is tall, so matching its height
     to the round logos blew ChangeFusion out to 194px wide and it
     swamped the row. Capping the width lets object-fit shrink those
     few back to the proportions the design draws them at, while the
     round logos never reach the cap. */
  max-width: 10rem;
  object-fit: contain;
}

@media (max-width: 781px) {
  .t4a-partners {
    /* Real mobile frame (762:1205, 375px) differs from desktop (762:697)
       in more than just wrapping: 35px vertical padding (desktop's clamp
       floor is 40px), 30px between groups, and each group is its own
       centred column (label above, logos below) with a tight 9.375px
       gap — not the desktop's side-by-side label + row. */
    padding-top: 2.1875rem;
    padding-bottom: 2.1875rem;
    row-gap: 1.875rem;
  }
  .t4a-partners .t4a-partners__row {
    /* Back to a stack: on a phone each group is a centred column of
       its own, one under the other, so the desktop grid's shared
       label and logo rows have nothing to line up. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Space between the three groups. It has to live here, on the
       row: the section's own row-gap above never reached them, so
       they were sitting on the desktop grid's 19px and read as one
       crowded block. */
    row-gap: 2.5rem;
  }
  .t4a-partners .t4a-partners__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
  }
  .t4a-partners .t4a-partners__label,
  .t4a-partners .t4a-partners__logos {
    grid-row: auto;
  }
  .t4a-partners .t4a-partners__label {
    max-width: none;
    padding-left: 0;
    border-left: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8125rem;
  }
  .t4a-partners .t4a-partners__logos {
    flex-basis: 100%;
    justify-content: center;
    column-gap: 0.625rem;
  }
  .t4a-partners .t4a-partners__logo {
    /* Design shows mobile logos noticeably taller (~50-62px) than
       this section's desktop-oriented vw-based clamp would give at
       phone widths — a flat height matches it better here. */
    height: 3rem;
  }
}
/* --- CTA Container (730:998 desktop / 762:1243 mobile) -------------------- */
.t4a-cta {
  text-align: center;
}
.t4a-cta .t4a-cta__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER");
  font-weight: 400;
  font-size: clamp(1.5rem, 2.22vw, 2rem);
}
.t4a-cta .t4a-cta__body {
  margin: 0;
  font-size: clamp(1.1rem, 1.81vw, 1.625rem);
  padding: 0 clamp(4rem, 2.78vw, 3rem);
  line-height: 1.53;
}
.t4a-cta .t4a-cta__body strong {
  font-weight: 700;
}

/* --- News & Articles (730:852 desktop / 762:1140 mobile) ------------------
 * A real Query Loop (core/query, inherit:false) filtered to the "news" +
 * "article" categories, so new posts show up on their own — nothing here is
 * baked-in content. On mobile the 3 cards become a one-at-a-time carousel,
 * built the same way as the Impact Map slider: assets/js/news-slider.js
 * toggles an `.is-active` class per `.wp-block-post` and adds prev/next
 * buttons, driven purely by CSS display rules below (no layout shift).
 *
 * The supporter-stories section reuses the same card markup, so it shares this
 * scope. Only the card rules can match there — the news grid and carousel
 * rules key off classes that section does not use. */
/* Shared "text + trailing arrow" link style — used by the header's
   "อ่านทั้งหมด" button, each card's dynamic Read More link, and the
   category archive links on events/videos/publications. Not scoped to
   .t4a-news/.t4a-stories: it used to live inside that selector, which meant
   the same className on any other section's button (or on a card the client
   had rebuilt outside that wrapper) never picked it up. Strips the theme's
   default green pill button look (bg/padding/radius come from seed4's
   theme.json button style and need !important to beat it, same as the other
   button-colour overrides in this file). */
.t4a-arrow-link.wp-block-read-more,
.t4a-arrow-link .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none !important;
  color: #111 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 700;
  font-size: 0.875rem;
  /* Underline only appears on hover — a transparent line at rest
     avoids the "always underlined" clutter, same convention as
     the site's other hover-underline links (see the global rule
     near the top of this file). */
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.t4a-arrow-link.wp-block-read-more::after,
.t4a-arrow-link .wp-block-button__link::after {
  content: "";
  display: block;
  flex: none;
  width: 10px;
  height: 10px;
  background-color: currentColor;
  mask: url("../img/arrow-right.svg") no-repeat center/contain;
  -webkit-mask: url("../img/arrow-right.svg") no-repeat center/contain;
  transition: transform 0.2s ease;
}
.t4a-arrow-link.wp-block-read-more:hover, .t4a-arrow-link.wp-block-read-more:focus-visible,
.t4a-arrow-link .wp-block-button__link:hover,
.t4a-arrow-link .wp-block-button__link:focus-visible {
  /* The site's default button hover rule (gold background,
     .wp-block-button:not(.is-style-outline) ... :hover) has
     higher specificity than the plain base rule above, so it
     was winning on hover and flashing a gold pill behind this
     plain text link — background needs re-asserting here too. */
  background: none !important;
  color: #649852 !important;
  text-decoration-color: currentColor;
}
.t4a-arrow-link.wp-block-read-more:hover::after, .t4a-arrow-link.wp-block-read-more:focus-visible::after,
.t4a-arrow-link .wp-block-button__link:hover::after,
.t4a-arrow-link .wp-block-button__link:focus-visible::after {
  transform: translateX(3px);
}
.t4a-arrow-link.t4a-arrow-link--lg .wp-block-button__link {
  font-size: 1rem;
  font-weight: 600;
}
.t4a-arrow-link.t4a-arrow-link--lg .wp-block-button__link::after {
  width: 12px;
  height: 12px;
}

.t4a-news,
.t4a-stories {
  /* .t4a-news__section is a plain flow layout, so its 30px blockGap prints
     as a margin-top on the grid via the shared --wp--style--block-gap var
     — override directly rather than fighting that variable. */
  /* The className lands directly on the same element WP already tags
     .wp-block-post-terms — not a wrapper around it. */
  /* A post often sits in two categories (e.g. ข่าวสาร AND เรื่องราวจาก
     ผู้สนับสนุน). The design shows a single badge, so only the first term
     is kept — the separator is a real element, so it hides cleanly. */
  /* The card-body's blockGap JSON attribute never made it into the
     hand-written HTML's inline style (no --wp--style--block-gap var was
     written), so the rows sat flush against each other — set the gap
     directly instead of depending on that mechanism. */
  /* Mobile carousel nav — hidden on desktop, shown + populated by JS only
     below the 781px breakpoint (matches every other section's cutoff). */
}
.t4a-news .t4a-news__title,
.t4a-stories .t4a-news__title {
  margin: 0 0 clamp(2rem, 4.44vw, 3.5rem);
  text-align: center;
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
}
.t4a-news .t4a-news__title-script,
.t4a-stories .t4a-news__title-script {
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER");
  font-weight: 400;
}
.t4a-news .t4a-news__header,
.t4a-stories .t4a-news__header {
  column-gap: 1rem;
}
.t4a-news .t4a-news__grid,
.t4a-stories .t4a-news__grid {
  margin-top: 20px !important;
}
.t4a-news .t4a-news__heading,
.t4a-stories .t4a-news__heading {
  margin: 0;
  font-size: clamp(1.25rem, 1.78vw, 2rem);
}
.t4a-news .t4a-news__card,
.t4a-stories .t4a-news__card {
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Figma: shadow-[0px_4px_12px_0px_rgba(0,0,0,0.03)]. */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.t4a-news .t4a-news__card-body,
.t4a-stories .t4a-news__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.t4a-news .t4a-news__badge,
.t4a-stories .t4a-news__badge {
  display: inline-block;
  background-color: #e0eadc;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
}
.t4a-news .t4a-news__badge a,
.t4a-stories .t4a-news__badge a {
  color: #111;
  text-decoration: none;
}
.t4a-news .t4a-news__badge a ~ a,
.t4a-news .t4a-news__badge .wp-block-post-terms__separator,
.t4a-stories .t4a-news__badge a ~ a,
.t4a-stories .t4a-news__badge .wp-block-post-terms__separator {
  display: none;
}
.t4a-news .t4a-news__date,
.t4a-stories .t4a-news__date {
  margin: 0;
  font-size: 0.75rem;
  color: #505a53;
}
.t4a-news .t4a-news__card-title,
.t4a-stories .t4a-news__card-title {
  margin: 10px 0 0;
  font-size: 1.125rem;
  line-height: 1.45;
  /* Reserve exactly 3 lines of height (1.45 × 18px × 3) whether the
     actual title is 1, 2 or 3 lines — so the Read More link below
     always lands at the same distance from the top, which is what
     makes it land at the same bottom position across every card
     without needing a fragile flex "push to bottom" margin (that
     pushes too little on the one card whose title genuinely fills
     all 3 lines, recreating the "touching" gap bug). */
  min-height: 4.35em;
  /* 3-line clamp — longer titles get cut off rather than stretching
     the card further than the fixed height above allows. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.t4a-news .t4a-news__card-title a,
.t4a-stories .t4a-news__card-title a {
  color: inherit;
  text-decoration: none;
}
.t4a-news .t4a-news__card-title a:hover, .t4a-news .t4a-news__card-title a:focus-visible,
.t4a-stories .t4a-news__card-title a:hover,
.t4a-stories .t4a-news__card-title a:focus-visible {
  text-decoration: underline;
}
.t4a-news .t4a-news__card .wp-block-read-more,
.t4a-stories .t4a-news__card .wp-block-read-more {
  margin-top: 10px !important;
}
.t4a-news .t4a-news__nav,
.t4a-stories .t4a-news__nav {
  display: none;
}

@media (max-width: 781px) {
  .t4a-news {
    /* The track slides via transform (set by news-slider.js), so the
       viewport needs to clip it — .t4a-news__grid is the wp:query
       wrapper, one level up from the sliding .t4a-news__cards track. */
    /* Only the grids the slider actually drives become a track. An archive
       listing (`.t4a-archive__grid`) carries `.t4a-news` for the card look
       but must stay a plain stack you scroll down — without this scoping
       the `!important` below laid every card out in one endless row. */
  }
  .t4a-news .t4a-news__grid {
    overflow: hidden;
  }
  .t4a-news .t4a-news__grid .t4a-news__cards {
    display: flex !important;
    flex-wrap: nowrap;
    transition: transform 0.35s ease;
  }
  .t4a-news .t4a-news__grid .wp-block-post {
    flex: 0 0 100%;
    width: 100%;
  }
  .t4a-news .t4a-news__nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
  }
  .t4a-news .t4a-news__nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .t4a-news .t4a-news__nav-btn img {
    width: 14px;
    height: 14px;
    display: block;
  }
}
/* --- Category archive (/category/news/, /category/article/, ...) --------
 * templates/category.html — plain blocks written directly in the template
 * (not a PHP-registered pattern), so the client can open it in
 * Appearance → Editor → Templates and change it without touching code.
 * Reuses the same .t4a-news__card / .t4a-arrow-link styling as the
 * homepage sections above (shares the .t4a-news class on <main>) so the
 * cards look identical; only the grid itself gets its own class since a
 * paginated archive listing should stay a plain 1-column stack on mobile,
 * not the homepage's swipe carousel. */
.t4a-archive__title {
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
}

@media (max-width: 781px) {
  /* one card per row, stacked down the page */
  .t4a-archive__grid .t4a-news__cards {
    display: grid;
    grid-template-columns: 1fr;
  }
}
/* --- About page hero (778:364 desktop / 778:780 mobile) ------------------- */
.t4a-about-hero {
  min-height: clamp(475px, 50vw, 744px);
}
.t4a-about-hero .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  max-width: 763px;
  margin-inline: auto;
}
.t4a-about-hero .t4a-about-hero__eyebrow {
  margin: 0;
  font-size: clamp(0.875rem, 1.1vw, 1.25rem);
}
.t4a-about-hero .t4a-about-hero__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER");
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.18;
}
.t4a-about-hero .t4a-about-hero__body {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 2rem);
  line-height: 1.3;
}
.t4a-about-hero .t4a-about-hero__body strong {
  font-weight: 700;
  color: #b2c966;
}

@media (max-width: 781px) {
  .t4a-about-hero {
    min-height: clamp(420px, 126vw, 560px);
  }
}
/* --- About page mission statement (778:377 desktop / 778:802 mobile) ----- */
.t4a-about-mission {
  position: relative;
  overflow: hidden;
  /* `position: relative` alone does not open a stacking context — without
     a z-index here too, the leaves' z-index:-1 (below) escaped to the
     nearest ancestor that DOES have one and painted behind that instead,
     landing behind the hero section's own opaque background and
     vanishing entirely. Pinning one here keeps -1 scoped to just this
     section, behind its own text but still above its own background. */
  z-index: 0;
  /* Decorative leaf line-art bleeding in from both edges — exported
     straight from Figma as flattened PNGs (778:381/778:384 desktop,
     778:806/778:807 mobile) rather than rebuilt with a live CSS mask,
     since Figma had already composited the mask + 160°/19° rotation and
     the export's backdrop happens to be the exact same #fafaf5 as this
     section, so there's no visible seam despite the export being opaque
     (the Figma MCP can't export true transparency). */
}
.t4a-about-mission::before, .t4a-about-mission::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 206px;
  height: 607px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  /* -1, not 0: a positioned z-index:0 element still paints above
     normal-flow content (the quote/desc paragraphs below aren't
     positioned), so at 0 the leaves sat on top of the text instead of
     behind it. Negative is what actually drops behind in-flow content. */
  z-index: -1;
}
.t4a-about-mission::before {
  left: 0;
  background-image: url("../img/about/mission-leaf-left.webp");
}
.t4a-about-mission::after {
  right: 0;
  background-image: url("../img/about/mission-leaf-right.webp");
}
.t4a-about-mission .t4a-about-mission__quote {
  margin: 0;
  font-size: clamp(0.875rem, 1.53vw, 1.375rem);
  line-height: 1.6;
}
.t4a-about-mission .t4a-about-mission__quote strong {
  font-weight: 600;
}
.t4a-about-mission .t4a-about-mission__desc {
  margin: 0;
  font-size: clamp(0.875rem, 1.53vw, 1.375rem);
  line-height: 1.6;
}
.t4a-about-mission .t4a-about-mission__desc strong {
  font-weight: 600;
}

@media (max-width: 781px) {
  .t4a-about-mission {
    /* Mobile has no mask/rotation on the source layer — the design just
       lets a small sliver of a much bigger image peek in at the bottom
       corners, so the exported crops here are already just that sliver
       (44×345 / 42×352) rather than the full 206×607 desktop strip. */
  }
  .t4a-about-mission::before, .t4a-about-mission::after {
    top: auto;
    bottom: 0;
    transform: none;
    width: 44px;
    height: 345px;
    background-image: url("../img/about/mission-leaf-left-mobile.webp");
  }
  .t4a-about-mission::after {
    width: 42px;
    height: 352px;
    background-image: url("../img/about/mission-leaf-right-mobile.webp");
  }
}
/* --- About page "ความสำคัญ" (778:387 desktop / 778:808 mobile) ----------- */
.t4a-about-importance__hero {
  /* A real core/group with a native background-image (no <img> tag) —
     aspect-ratio keeps it sized to the design's 1440:760 proportions
     at any width instead of a fixed min-height forcing background-size:
     cover to crop/zoom the photo to fit an unrelated box. The text sits
     at the bottom of that exact box, and the green continues seamlessly
     into the next section the moment the photo's own bottom edge ends. */
  aspect-ratio: 1440/760;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-bottom: clamp(1.5rem, 4vw, 3rem) !important;
}
.t4a-about-importance__hero .t4a-about-importance__eyebrow {
  margin: 0;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
}
.t4a-about-importance__hero .t4a-about-importance__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER");
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.2;
}

/* --- About page "Section Quote" (778:428 desktop / 778:837 mobile) ------- */
.t4a-about-quote {
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
  padding-left: clamp(1.25rem, 5.56vw, 5rem);
  padding-right: clamp(1.25rem, 5.56vw, 5rem);
}
.t4a-about-quote .t4a-about-quote__icon img {
  width: clamp(32px, 3.33vw, 48px);
  height: clamp(32px, 3.33vw, 48px);
}
.t4a-about-quote .t4a-about-quote__text {
  margin: 20px 0 0;
  font-size: clamp(1rem, 1.67vw, 1.5rem);
  line-height: 1.4;
  max-width: 46.5rem;
}
.t4a-about-quote .t4a-about-quote__text strong {
  font-weight: 700;
}
.t4a-about-quote .t4a-about-quote__author {
  margin-top: clamp(1rem, 1.67vw, 1.5rem);
  align-items: center;
  gap: clamp(12px, 1.11vw, 16px);
}
.t4a-about-quote .t4a-about-quote__avatar img {
  width: clamp(48px, 4.44vw, 64px);
  height: clamp(48px, 4.44vw, 64px);
  border-radius: 50%;
  object-fit: cover;
}
.t4a-about-quote .t4a-about-quote__author-name {
  margin: 0;
  font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
}
.t4a-about-quote .t4a-about-quote__author-title {
  margin: 0;
  color: #c9c9c9;
  font-size: clamp(0.75rem, 0.97vw, 0.875rem);
}

/* Desktop and mobile use different crops (778:387 vs 778:810), so each is
   its own Group block with its own editable background image; CSS only
   decides which one is on screen. */
/* !important because the shared .t4a-about-importance__hero rule above sets
   display: flex !important to win over the block editor's own layout CSS. */
.t4a-about-importance__hero--mobile {
  display: none !important;
}

@media (max-width: 781px) {
  .t4a-about-importance__hero--desktop {
    display: none !important;
  }
  .t4a-about-importance__hero--mobile {
    display: flex !important;
    /* the mobile crop is taller than the desktop one */
    aspect-ratio: 375/449;
    position: relative;
    /* The mobile export has no gradient baked in (the desktop one does),
       so it is layered on as an overlay rather than as a second
       background-image — that would overwrite the inline url the block
       editor writes, and the photo would stop being swappable. */
  }
  .t4a-about-importance__hero--mobile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(22, 37, 17, 0) 0%, #162511 100%);
    pointer-events: none;
  }
  .t4a-about-importance__hero--mobile > * {
    position: relative;
    z-index: 1;
  }
}
/* --- About page "ปลูก ติดตาม" (778:440 desktop / 778:846 mobile) --------- */
.t4a-about-plant-track__hero {
  /* Same technique as .t4a-about-importance__hero: native background-image
     (no <img>), a CSS gradient fading the photo into the solid section
     below, sized by aspect-ratio so it never crops/stretches. */
  aspect-ratio: 1447/822;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: clamp(1.5rem, 4vw, 3rem) !important;
  position: relative;
}
.t4a-about-plant-track__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 37, 17, 0) 0%, #162511 100%);
  pointer-events: none;
}
.t4a-about-plant-track__hero .t4a-about-plant-track__title {
  position: relative;
  margin: 0;
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER");
  font-weight: 400;
  font-size: clamp(1.5rem, 3.33vw, 2.5rem);
  line-height: 1.2;
}

.t4a-about-plant-track {
  padding-top: clamp(1.5rem, 2.78vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5.56vw, 5rem);
  padding-left: clamp(1.25rem, 5.56vw, 5rem);
  padding-right: clamp(1.25rem, 5.56vw, 5rem);
}
.t4a-about-plant-track .t4a-about-plant-track__body {
  margin: 0;
  font-size: clamp(0.875rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-about-plant-track .t4a-about-plant-track__body strong {
  font-weight: 600;
  color: #649852;
}
.t4a-about-plant-track .t4a-about-plant-track__body + .t4a-about-plant-track__body {
  margin-top: clamp(1rem, 2.22vw, 2rem);
}
.t4a-about-plant-track .t4a-about-plant-track__actions {
  margin-top: clamp(1.5rem, 2.78vw, 2.5rem);
}

@media (max-width: 781px) {
  .t4a-about-plant-track__hero {
    aspect-ratio: 375/449;
    background-position: 30% 15% !important;
  }
  .t4a-about-plant-track__hero::before {
    background: linear-gradient(180deg, rgba(22, 37, 17, 0) 0%, #162511 100%);
  }
}
/* --- About page "Hero Section - Mission" / วิสัยทัศน์ (778:461 desktop / 778:860 mobile) --- */
.t4a-about-vision {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3rem, 13.9vw, 12.5rem);
  padding-bottom: clamp(3rem, 13.9vw, 12.5rem);
  padding-left: clamp(1.25rem, 5.56vw, 5rem);
  padding-right: clamp(1.25rem, 5.56vw, 5rem);
  /* Hand-drawn branches bleeding in from both margins. Figma (778:475 /
     778:477) clips a 459x450 drawing inside a 394x506 box that hangs off
     the section edge — hence the >100% background width — and uses the
     same asset twice: mirrored horizontally on the left, flipped
     vertically on the right. The left one sits low, the right one high. */
  /* left branch: box hangs 188px off the left, 44px below the section */
  /* right branch: hangs 179px off the right, starting 26px above the top */
  /* --- polaroids: same white-card treatment as .t4a-hiw__photo --------- */
  /* Card metrics straight from Figma: 239x281 card, 207 square photo
     inset 16px on three sides (58px foot), 1.8px radius and a soft
     0 3.6px 10.8px shadow at 15%. */
  /* top-left, leaning anticlockwise (778:473) */
  /* mid-right, leaning clockwise (778:471) */
}
.t4a-about-vision::before, .t4a-about-vision::after {
  content: "";
  position: absolute;
  width: clamp(240px, 27.4vw, 394px);
  aspect-ratio: 394/506;
  background-image: url("../img/about/vision-leaf.webp");
  background-repeat: no-repeat;
  background-size: 116.5% 88.9%;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}
.t4a-about-vision::before {
  left: clamp(-188px, -13.05vw, -114px);
  bottom: -5.3%;
  transform: scaleX(-1);
}
.t4a-about-vision::after {
  right: clamp(-179px, -12.43vw, -109px);
  top: -3.1%;
  transform: scaleY(-1);
}
.t4a-about-vision > * {
  position: relative;
  z-index: 1;
}
.t4a-about-vision .t4a-about-vision__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER");
  font-weight: 400;
  font-size: clamp(1.5rem, 2.78vw, 2.5rem);
}
.t4a-about-vision .t4a-about-vision__quote {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.94vw, 1.75rem);
  line-height: 1.3;
}
.t4a-about-vision .t4a-about-vision__quote strong {
  font-weight: 700;
  color: #284d26;
}
.t4a-about-vision .t4a-about-vision__body {
  margin: clamp(1rem, 1.11vw, 1rem) 0 0;
  font-weight: 500;
  font-size: clamp(0.875rem, 1.67vw, 1.5rem);
  line-height: 1.4;
}
.t4a-about-vision .t4a-about-vision__body strong {
  font-weight: 700;
  color: #284d26;
}
.t4a-about-vision .t4a-about-vision__polaroids {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  pointer-events: none;
}
.t4a-about-vision .t4a-about-vision__polaroid {
  position: absolute;
  margin: 0;
  width: clamp(170px, 16.6vw, 239px);
  background: #fff;
  border-radius: 1.8px;
  /* 16px inset on three sides, 58px foot at the 1440 design width
     (percentages collapse the image inside .wp-block-image) */
  padding: clamp(11px, 1.11vw, 16px) clamp(11px, 1.11vw, 16px) clamp(41px, 4.03vw, 58px);
  box-shadow: 0 3.6px 10.8px rgba(0, 0, 0, 0.15);
}
.t4a-about-vision .t4a-about-vision__polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 1.8px;
}
.t4a-about-vision .t4a-about-vision__polaroid--a {
  left: clamp(24px, 5.42vw, 78px);
  top: 11.4%;
  transform: rotate(-3.92deg);
}
.t4a-about-vision .t4a-about-vision__polaroid--b {
  right: clamp(16px, 3.06vw, 44px);
  top: 58.1%;
  width: clamp(164px, 16.1vw, 232px);
  transform: rotate(4.77deg);
}

@media (max-width: 781px) {
  .t4a-about-vision {
    padding-top: clamp(2rem, 10.67vw, 2.5rem);
  }
  .t4a-about-vision::before, .t4a-about-vision::after {
    width: 100px;
    height: auto;
  }
  .t4a-about-vision::before {
    left: -45px;
    top: 8%;
  }
  .t4a-about-vision::after {
    right: -45px;
    top: auto;
    bottom: 4%;
    transform: scaleX(-1);
  }
  .t4a-about-vision .t4a-about-vision__polaroids {
    position: relative !important;
    inset: auto !important;
    width: 300px !important;
    max-width: 300px !important;
    height: 388px;
    margin: 0 auto clamp(1.5rem, 6.4vw, 2rem) !important;
  }
  .t4a-about-vision .t4a-about-vision__polaroid {
    width: 198px;
  }
  .t4a-about-vision .t4a-about-vision__polaroid--a {
    left: 7px;
    top: 21px;
  }
  .t4a-about-vision .t4a-about-vision__polaroid--b {
    right: auto;
    left: 115px;
    top: 156px;
    transform: rotate(4.77deg);
    width: 195px;
  }
}
.t4a-about-importance .t4a-about-importance__body {
  max-width: 47.5rem;
  margin-inline: auto;
  font-size: clamp(0.875rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-about-importance .t4a-about-importance__body strong {
  font-weight: 600;
  color: #649852;
}
.t4a-about-importance .t4a-about-importance__tags-title {
  margin: 0;
  font-size: clamp(1rem, 1.39vw, 1.25rem);
}
.t4a-about-importance .t4a-about-importance__tags {
  row-gap: 0.75rem;
  column-gap: clamp(0.375rem, 0.83vw, 0.75rem);
  max-width: 47.5rem;
}
.t4a-about-importance .t4a-about-importance__tag {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #334b2b;
  border-radius: 100px;
  padding: 8px 16px 8px 12px;
  font-size: clamp(0.75rem, 0.97vw, 1rem);
}
.t4a-about-importance .t4a-about-importance__tag::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #649852;
}

/* -------------------------------------------------------------------------
 * About page "เส้นทางการเติบโตของเรา" milestone timeline (778:876 mobile /
 * 778:479 desktop). Deliberately simplified from Figma's alternating,
 * absolutely-positioned zigzag graph into one straightforward vertical list —
 * every milestone is a plain, duplicable Group block (native border colour +
 * native List), so the client can add a new year or edit the copy entirely
 * from the Site Editor without any CSS or dev help.
 * ---------------------------------------------------------------------- */
.t4a-about-timeline {
  /* --- mobile milestone: 24px spine gutter with a node dot at the top of
     each year, exactly like the mobile design (778:883 Spine-Column:
     16px node over a 12px rounded bar). Colour comes from the
     milestone's own modifier class and drives both via currentColor. */
  /* no gap between milestones, so consecutive spine segments butt up
     against each other into one continuous line (each milestone's own
     padding-bottom does the spacing instead) */
  /* --- two independent trees, one shown per breakpoint -------------- */
  /* --- desktop: branching graph, every card individually placed ------
     Stage is locked to the design's own 1440:1104 aspect ratio so every
     top/left percentage below (traced straight from the Figma frame)
     keeps landing in the right spot at any width ≥1024px. */
  /* One overlay per milestone, spanning the whole stage so its dot and
     branch can be placed in stage percentages (and so the branch length
     scales with the stage, not the viewport): ::before draws the node
     dot on the spine, ::after the branch stub that carries the year out
     toward its card. */
  /* the year, sitting on its branch stub, tilted to match it */
  /* Card geometry lives here, keyed by the card's own modifier class —
     NOT in inline styles. The block editor rebuilds a block's markup from
     its attributes on save and throws away any hand-written inline style,
     which silently flattened this whole timeline the first time the page
     was edited. Classes survive that round-trip. */
}
.t4a-about-timeline .t4a-about-timeline__eyebrow {
  width: fit-content;
  margin-inline: auto;
  background-color: rgba(40, 77, 38, 0.1);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: clamp(0.875rem, 1.1vw, 1rem);
}
.t4a-about-timeline .t4a-about-timeline__title {
  margin: 8px 0 0;
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER");
  font-weight: 400;
  font-size: clamp(1.5rem, 2.78vw, 2.5rem);
}
.t4a-about-timeline .t4a-about-timeline__stream--mobile > * {
  margin-block: 0;
}
.t4a-about-timeline .t4a-about-timeline__milestone {
  position: relative;
  padding-bottom: 2rem;
  color: #319795;
  /* Kept in the same proportion as the desktop spine rather than the
     mobile mock's literal 12px, which reads far heavier on a 375px
     screen than the same bar does on a 1440px stage. */
  --spine-x: 8px;
  --spine-w: 4px;
  --dot-size: 14px;
  /* the spine bar */
  /* the node dot, sitting on the bar */
}
.t4a-about-timeline .t4a-about-timeline__milestone::before {
  content: "";
  position: absolute;
  left: calc(var(--spine-x) - var(--spine-w) / 2);
  top: 0;
  bottom: 0;
  width: var(--spine-w);
  border-radius: var(--spine-w);
  background: currentColor;
}
.t4a-about-timeline .t4a-about-timeline__milestone::after {
  content: "";
  position: absolute;
  left: calc(var(--spine-x) - var(--dot-size) / 2);
  top: 0;
  width: var(--dot-size);
  height: var(--dot-size);
  box-sizing: border-box;
  border-radius: 50%;
  background: #fafaf5;
  border: 3px solid currentColor;
}
.t4a-about-timeline .t4a-about-timeline__milestone.t4a-about-timeline__milestone--last {
  padding-bottom: 0;
  /* the last year's spine stops in a short tail (778:956) */
}
.t4a-about-timeline .t4a-about-timeline__milestone.t4a-about-timeline__milestone--last::before {
  bottom: auto;
  height: 136px;
}
.t4a-about-timeline .t4a-about-timeline__milestone--1 {
  color: #319795;
}
.t4a-about-timeline .t4a-about-timeline__milestone--2 {
  color: #ecc94b;
}
.t4a-about-timeline .t4a-about-timeline__milestone--3 {
  color: #ed8936;
}
.t4a-about-timeline .t4a-about-timeline__milestone--4 {
  color: #e53e3e;
}
.t4a-about-timeline .t4a-about-timeline__milestone--5 {
  color: #805ad5;
}
.t4a-about-timeline .t4a-about-timeline__year {
  margin: 0;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
}
.t4a-about-timeline .t4a-about-timeline__subtitle {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.33;
}
.t4a-about-timeline .t4a-about-timeline__list {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  /* spacing comes from the global .wp-block-list li margin — adding a
     gap here as well would double it */
  font-size: 0.875rem;
  line-height: 1.57;
  color: #4b5563;
}
.t4a-about-timeline .t4a-about-timeline__list li::marker {
  color: #3f6330;
  font-weight: 700;
}
.t4a-about-timeline .t4a-about-timeline__stream--mobile {
  display: none;
}
.t4a-about-timeline .t4a-about-timeline__stream--desktop {
  display: block;
  position: relative;
  max-width: 1440px;
  margin-inline: auto;
  aspect-ratio: 1440/1104;
  /* Design tokens traced from the Figma frame (1440x1104):
     spine bar 12px wide at x=720, branch stub 145x12 at 22deg,
     node dot 16px, year 28px Bold offset 58px out / 58px up. */
  --spine-w: clamp(8px, 0.83vw, 12px);
  --dot-size: clamp(12px, 1.11vw, 16px);
  /* the spine: vertical, one hard-stopped colour per milestone,
     each segment ending at that milestone's node. It runs to the
     stage's foot. The stops are percentages of the spine's own
     height (1.6% → 100% of the stage), so moving top or bottom means
     recomputing them: stop = (node top − 1.6) / 98.4. */
}
.t4a-about-timeline .t4a-about-timeline__stream--desktop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.6%;
  bottom: 0;
  width: var(--spine-w);
  transform: translateX(-50%);
  border-radius: var(--spine-w);
  background: linear-gradient(to bottom, #319795 0%, #319795 16.87%, #ecc94b 16.87%, #ecc94b 34.45%, #ed8936 34.45%, #ed8936 52.64%, #e53e3e 52.64%, #e53e3e 69.92%, #805ad5 69.92%, #805ad5 100%);
}
.t4a-about-timeline .t4a-about-timeline__node {
  position: absolute;
  inset: 0;
  /* The editor's block gap gives every node after the first a 20px
     top margin, which shrinks and shifts the overlay and drops its dot
     off the spine's colour change. The overlay must be the whole stage. */
  margin: 0;
  color: #319795;
  pointer-events: none;
  /* node dot — border-box, or the 3px ring adds 6px to its size while
     the margin only pulls it back by half the nominal size, and the dot
     sits 3px right of and below the spine */
  /* branch stub — 145/1440 of the stage, 22deg up-and-out */
  /* even milestones branch out to the left instead */
}
.t4a-about-timeline .t4a-about-timeline__node::before, .t4a-about-timeline .t4a-about-timeline__node::after {
  content: "";
  position: absolute;
  left: 50%;
}
.t4a-about-timeline .t4a-about-timeline__node::before {
  box-sizing: border-box;
  width: var(--dot-size);
  height: var(--dot-size);
  margin: calc(var(--dot-size) / -2);
  border-radius: 50%;
  background: #fafaf5;
  border: 3px solid currentColor;
  z-index: 2;
}
.t4a-about-timeline .t4a-about-timeline__node::after {
  width: 10.07%;
  height: var(--spine-w);
  margin-top: calc(var(--spine-w) / -2);
  border-radius: var(--spine-w);
  background: currentColor;
  transform-origin: 0 50%;
  transform: rotate(-22deg);
  z-index: 1;
}
.t4a-about-timeline .t4a-about-timeline__node--2::after, .t4a-about-timeline .t4a-about-timeline__node--4::after {
  transform: rotate(202deg);
}
.t4a-about-timeline .t4a-about-timeline__node--1 {
  color: #319795;
}
.t4a-about-timeline .t4a-about-timeline__node--1::before, .t4a-about-timeline .t4a-about-timeline__node--1::after {
  top: 18.2%;
}
.t4a-about-timeline .t4a-about-timeline__node--2 {
  color: #ecc94b;
}
.t4a-about-timeline .t4a-about-timeline__node--2::before, .t4a-about-timeline .t4a-about-timeline__node--2::after {
  top: 35.5%;
}
.t4a-about-timeline .t4a-about-timeline__node--3 {
  color: #ed8936;
}
.t4a-about-timeline .t4a-about-timeline__node--3::before, .t4a-about-timeline .t4a-about-timeline__node--3::after {
  top: 53.4%;
}
.t4a-about-timeline .t4a-about-timeline__node--4 {
  color: #e53e3e;
}
.t4a-about-timeline .t4a-about-timeline__node--4::before, .t4a-about-timeline .t4a-about-timeline__node--4::after {
  top: 70.4%;
}
.t4a-about-timeline .t4a-about-timeline__node--5 {
  color: #805ad5;
}
.t4a-about-timeline .t4a-about-timeline__node--5::before, .t4a-about-timeline .t4a-about-timeline__node--5::after {
  top: 86.1%;
}
.t4a-about-timeline .t4a-about-timeline__year-on-spine {
  position: absolute;
  margin: 0;
  font-family: var(--wp--preset--font-family--ibm-plex-sans-thai, "IBM Plex Sans Thai");
  font-weight: 700;
  font-size: clamp(1.25rem, 1.94vw, 1.75rem);
  line-height: 1.3;
  white-space: nowrap;
  z-index: 3;
  /* right-hand milestones: 58px out, 58px up from the node */
  /* left-hand ones mirror, so the tilt mirrors too */
}
.t4a-about-timeline .t4a-about-timeline__year-on-spine--1, .t4a-about-timeline .t4a-about-timeline__year-on-spine--3, .t4a-about-timeline .t4a-about-timeline__year-on-spine--5 {
  transform: translate(-50%, -50%) rotate(-22deg);
}
.t4a-about-timeline .t4a-about-timeline__year-on-spine--2, .t4a-about-timeline .t4a-about-timeline__year-on-spine--4 {
  transform: translate(-50%, -50%) rotate(22deg);
}
.t4a-about-timeline .t4a-about-timeline__year-on-spine--1 {
  top: 12.95%;
  left: 54.05%;
  color: #319795;
}
.t4a-about-timeline .t4a-about-timeline__year-on-spine--2 {
  top: 30.25%;
  left: 45.95%;
  color: #e7ba1c;
}
.t4a-about-timeline .t4a-about-timeline__year-on-spine--3 {
  top: 48.15%;
  left: 54.05%;
  color: #ed8936;
}
.t4a-about-timeline .t4a-about-timeline__year-on-spine--4 {
  top: 65.15%;
  left: 45.95%;
  color: #e53e3e;
}
.t4a-about-timeline .t4a-about-timeline__year-on-spine--5 {
  top: 80.85%;
  left: 54.05%;
  color: #805ad5;
}
.t4a-about-timeline .t4a-about-timeline__card {
  position: absolute;
  z-index: 3;
  /* right-hand cards (2565 / 2567 / 2569) */
  /* left-hand cards (2566 / 2568) */
}
.t4a-about-timeline .t4a-about-timeline__card .t4a-about-timeline__subtitle {
  margin-bottom: 15px;
  font-size: clamp(1.125rem, 1.67vw, 1.5rem);
}
.t4a-about-timeline .t4a-about-timeline__card .t4a-about-timeline__list {
  font-size: clamp(0.875rem, 1.11vw, 1rem);
}
.t4a-about-timeline .t4a-about-timeline__card--1, .t4a-about-timeline .t4a-about-timeline__card--3, .t4a-about-timeline .t4a-about-timeline__card--5 {
  left: 61.1%;
  width: clamp(300px, 32.6vw, 470px);
}
.t4a-about-timeline .t4a-about-timeline__card--2, .t4a-about-timeline .t4a-about-timeline__card--4 {
  left: 10.4%;
  width: clamp(260px, 28.8vw, 415px);
}
.t4a-about-timeline .t4a-about-timeline__card--1 {
  top: 7.1%;
}
.t4a-about-timeline .t4a-about-timeline__card--2 {
  top: 22.5%;
}
.t4a-about-timeline .t4a-about-timeline__card--3 {
  top: 45.6%;
}
.t4a-about-timeline .t4a-about-timeline__card--4 {
  top: 60.5%;
  width: clamp(260px, 27.2vw, 392px);
}
.t4a-about-timeline .t4a-about-timeline__card--5 {
  top: 78.3%;
}

@media (max-width: 1023px) {
  .t4a-about-timeline .t4a-about-timeline__stream--desktop {
    display: none;
  }
  .t4a-about-timeline .t4a-about-timeline__stream--mobile {
    display: block;
  }
}
/* =========================================================================
 * "วิธีการปลูก" hero (712:4764)
 * A 822px photo fading into #162511 under three stacked gradients, the
 * script headline, intro copy and four numbered steps. Every measurement is
 * expressed against the 1440 design frame so the band keeps its proportions.
 * ---------------------------------------------------------------------- */
.t4a-howto-hero {
  /* the photo band: 822px of the 1440 frame. The photo itself (media
     library #713, 2000x1281) runs a little taller at full width; the base
     colour below the band covers its foot, as the frame's clip does. */
  --t4a-howto-photo-h: clamp(320px, 57.08vw, 822px);
  position: relative;
  isolation: isolate;
  /* content starts at y=470 of the frame, 100px of air at the foot */
  padding-top: clamp(4rem, 32.6vw, 29.375rem);
  padding-bottom: clamp(3rem, 6.94vw, 6.25rem);
  padding-left: clamp(1.25rem, 5.56vw, 5rem);
  padding-right: clamp(1.25rem, 5.56vw, 5rem);
  color: #fff;
  /* full width from the top, as the frame draws it — `cover` scaled the
     photo to the whole (much taller) section and cropped its sides */
  background-size: 100% auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  /* the design stacks three fades over the photo: a short one darkening
     the very top, then two that carry it down into the base colour */
  /* --- the four numbered steps ---------------------------------------- */
}
.t4a-howto-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to bottom, rgba(22, 37, 17, 0.8) 0%, rgba(22, 37, 17, 0) 100%), linear-gradient(to bottom, rgba(22, 37, 17, 0) 0%, rgb(22, 37, 17) 100%), linear-gradient(to bottom, rgba(22, 37, 17, 0) 0%, rgb(22, 37, 17) 100%), linear-gradient(#162511, #162511);
  background-size: 100% calc(var(--t4a-howto-photo-h) * 0.2275), 100% calc(var(--t4a-howto-photo-h) * 0.804), 100% calc(var(--t4a-howto-photo-h) * 0.549), 100% calc(100% - var(--t4a-howto-photo-h) + 1px);
  background-position: center top, center calc(var(--t4a-howto-photo-h) * 0.196), center calc(var(--t4a-howto-photo-h) * 0.451), center bottom;
  background-repeat: no-repeat;
}
.t4a-howto-hero > * {
  position: relative;
}
.t4a-howto-hero .t4a-howto-hero__eyebrow {
  margin: 0;
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  filter: drop-shadow(0 4px 9.5px rgba(0, 0, 0, 0.39));
}
.t4a-howto-hero .t4a-howto-hero__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER");
  font-weight: 400;
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  line-height: 1.177;
  filter: drop-shadow(0 4px 9.5px rgba(0, 0, 0, 0.39));
}
.t4a-howto-hero .t4a-howto-hero__lead {
  margin: 10px 0 0;
  font-size: clamp(1.25rem, 2.22vw, 2rem);
  line-height: 1.3;
  filter: drop-shadow(0 4px 9.5px rgba(0, 0, 0, 0.39));
}
.t4a-howto-hero .t4a-howto-hero__lead strong {
  font-weight: 600;
}
.t4a-howto-hero .t4a-howto-hero__body {
  max-width: 768px;
  margin: clamp(1.25rem, 2.08vw, 1.875rem) auto 0;
  font-size: clamp(0.9375rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-howto-hero .t4a-howto-hero__steps {
  margin-top: clamp(2rem, 3.9vw, 3.5rem);
  gap: clamp(1rem, 2.22vw, 2rem);
  padding-inline: clamp(0px, 1.39vw, 20px);
}
.t4a-howto-hero .t4a-howto-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 50%;
  background: #2c4a2e;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
}
.t4a-howto-hero .t4a-howto-step__title {
  margin: 24px 0 0;
  font-size: clamp(1.125rem, 1.67vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
}
.t4a-howto-hero .t4a-howto-step__text {
  margin: 8px 0 0;
  font-size: clamp(0.875rem, 1.11vw, 1rem);
  line-height: 1.6;
}

/* Mobile (881:7814): its own portrait photo, a single fade into the base
   colour, and the four steps as a stacked list — number on the left, title
   and text beside it. */
@media (max-width: 781px) {
  .t4a-howto-hero {
    /* the photo (media library #712, 750x898) runs the full width at its
       own ratio: 449px tall on the 375px frame */
    --t4a-howto-photo-h: 119.73vw;
    /* the headline block sits at the foot of the photo, 20px above its
       edge, as the frame's justify-end column puts it */
    padding-top: calc(var(--t4a-howto-photo-h) * 0.71);
    padding-bottom: 40px;
    padding-left: 16px;
    padding-right: 16px;
    /* The section's desktop photo is a block attribute set inline, so
       this needs !important to win. Relative to this stylesheet, not the
       site root, so it also works with the site in a subfolder (/new/). */
    background-image: url("../../../../uploads/2026/09/how-to-work-hero-mobile.webp") !important;
    background-size: 100% auto !important;
  }
  .t4a-howto-hero::before {
    background-image: linear-gradient(to bottom, rgba(22, 37, 17, 0) 0%, rgb(22, 37, 17) 100%), linear-gradient(#162511, #162511);
    background-size: 100% var(--t4a-howto-photo-h), 100% calc(100% - var(--t4a-howto-photo-h) + 1px);
    background-position: center top, center bottom;
  }
  .t4a-howto-hero .t4a-howto-hero__eyebrow {
    font-size: 0.875rem;
  }
  .t4a-howto-hero .t4a-howto-hero__title {
    margin-top: 0;
    font-size: 1.5rem;
    line-height: 1.3;
  }
  .t4a-howto-hero .t4a-howto-hero__lead {
    margin-top: 10px;
    font-size: 1.125rem;
    line-height: 1.4;
  }
  .t4a-howto-hero .t4a-howto-hero__lead strong {
    font-weight: 700;
  }
  .t4a-howto-hero .t4a-howto-hero__body {
    margin-top: 20px;
    font-size: 0.875rem;
    line-height: 1.6;
    /* the line breaks are placed for the 768px desktop measure;
       on a phone the text wraps on its own */
  }
  .t4a-howto-hero .t4a-howto-hero__body br {
    display: none;
  }
  .t4a-howto-hero .t4a-howto-hero__steps {
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    padding-inline: 0;
  }
  .t4a-howto-hero .t4a-howto-step {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    padding: 16px;
  }
  .t4a-howto-hero .t4a-howto-step__number {
    grid-row: 1/span 2;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
  }
  .t4a-howto-hero .t4a-howto-step__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .t4a-howto-hero .t4a-howto-step__text {
    margin: 4px 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
  }
}
/* =========================================================================
 * "การดำเนินงานประจำปี" yearly board
 * Design: desktop 987:3143 · mobile 987:3675
 *
 * WHERE TO CHANGE WHAT
 *   wording, rows, bars, milestones, legend → patterns/howto-timeline.php
 *   colours, column widths, card padding    → the custom properties below
 *   layout                                  → the rules below
 *
 * Bars, captions and milestones are positioned from the modifier classes the
 * pattern writes (--start-N / --span-N / --col-N), never from inline styles:
 * the block editor rebuilds a block from its attributes on save and throws
 * hand-written inline styles away, which would flatten the whole board the
 * first time the client edited the page.
 *
 * Desktop is a table — task column on the left, twelve month columns on the
 * right. Below $t4a-gantt-stack-at the same markup stacks: the task text moves
 * above its own month strip, and the milestone captions become cards under it.
 * ========================================================================= */
/* Month columns. Must match $months in patterns/howto-timeline.php. */
/* Below this width the board stacks into the mobile layout. */
.t4a-gantt {
  /* geometry */
  /* The task column narrows with the viewport so the twelve months always
     fit the card — the board never scrolls sideways at any width. */
  --t4a-gantt-task-w: clamp(208px, 20.83vw, 300px); /* desktop only */
  --t4a-gantt-pad: 16px; /* card padding, mobile only */
  /* palette */
  --t4a-gantt-card: #fafaf5;
  --t4a-gantt-line: #e5e7eb;
  --t4a-gantt-ink: #162511;
  --t4a-gantt-muted: #72816e;
  --t4a-gantt-accent: #d98a29;
  --t4a-gantt-plant: #225336; /* "ช่วงปลูก" bar + its legend swatch */
  --t4a-gantt-survey: #58854d; /* "ช่วงเก็บข้อมูล" */
  --t4a-gantt-care: #e1eadb; /* "ต่อเนื่องตลอดปี" fill */
  --t4a-gantt-care-line: #8caf91; /* ...and its dashed outline */
  --t4a-gantt-caption: #4a5e47;
  --t4a-gantt-note-bg: #fcfaf2;
  --t4a-gantt-milestone-bg: #fdf4ea; /* milestone cards, mobile only */
  border-top: 1px solid #f6f6ee;
  border-bottom: 1px solid #f6f6ee;
  /* --- heading -------------------------------------------------------- */
  /* --- the card ------------------------------------------------------- */
  /* Nothing inside the board may carry the theme's default block gap: it
     would push the rows apart and break the grid into floating strips.
     :where() keeps this at zero specificity so the margins set on the
     captions and milestones below still win. */
  /* The months share whatever the task column leaves. No min-width and no
     overflow: the grid simply gets tighter, it never scrolls or clips. */
  /* --- header: the month names ---------------------------------------- */
  /* --- task rows ------------------------------------------------------ */
  /* --- the bar canvas ------------------------------------------------- */
  /* Three rows: a gap, the bar itself, then whatever hangs below it
     (a caption, or the stacked milestones). */
  /* flush with the month lines, as the design draws them */
  /* The caption carries the same --start-N / --span-N classes as its bar,
     so it lands centred underneath without any extra placement rules. */
  /* --- bar styles ------------------------------------------------------
     'style' => 'plant' | 'survey' | 'care' in the pattern. Add a style by
     adding a colour above, a --bar rule here and a --legend-item rule below. */
  /* no caption under it, so it sits in the middle of its 120px row */
  /* --- placement — 1-indexed month columns -----------------------------
     A milestone's --col-N is the month it closes: the diamond sits on the
     line at the END of that month (30 มิถุนายน on the มิ.ย./ก.ค. line) and
     its caption reads to the right, so the box itself starts in month N+1.
     The last month has no N+1, which is why it is capped. */
  /* --- milestones ------------------------------------------------------
     --row-N is the milestone's line within its task row, not the task row
     itself: two milestones in the same row stack one under the other. */
  /* --- legend + note --------------------------------------------------- */
  /* legend 300 on the left, note 860 on the right, the rest between them */
}
.t4a-gantt .t4a-gantt__title {
  margin: 0;
  color: #111;
  font-size: clamp(1.5rem, 2.78vw, 2.5rem);
  line-height: 1.3;
}
.t4a-gantt .t4a-gantt__lead {
  margin: 10px 0 0;
  color: #111;
  font-size: clamp(0.9375rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-gantt .t4a-gantt__lead strong {
  font-weight: 600;
}
.t4a-gantt .t4a-gantt__card {
  margin-top: clamp(1.25rem, 2.08vw, 1.875rem);
  border-radius: 20px;
  background: var(--t4a-gantt-card);
  overflow: hidden;
}
.t4a-gantt .t4a-gantt__card :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-gantt .t4a-gantt__head,
.t4a-gantt .t4a-gantt__row {
  display: grid;
  grid-template-columns: var(--t4a-gantt-task-w) repeat(12, minmax(0, 1fr));
}
.t4a-gantt .t4a-gantt__head {
  height: 44px;
}
.t4a-gantt .t4a-gantt__head-label {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0 0 12px;
  padding-left: 20px;
  border-right: 1px solid var(--t4a-gantt-line);
  color: var(--t4a-gantt-muted);
  font-size: 0.875rem;
  font-weight: 700;
}
.t4a-gantt .t4a-gantt__months {
  grid-column: 2/-1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  height: 44px;
}
.t4a-gantt .t4a-gantt__month {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  border: 1px solid var(--t4a-gantt-line);
  color: var(--t4a-gantt-ink);
}
.t4a-gantt .t4a-gantt__row {
  min-height: 120px;
  border-bottom: 1px solid var(--t4a-gantt-ink);
}
.t4a-gantt .t4a-gantt__row:last-child {
  border-bottom: 0;
}
.t4a-gantt .t4a-gantt__task {
  grid-column: 1;
  padding: 20px clamp(12px, 1.39vw, 20px);
  border-right: 1px solid var(--t4a-gantt-line);
}
.t4a-gantt .t4a-gantt__task-title {
  display: flex;
  gap: 8px;
  margin: 0;
  color: var(--t4a-gantt-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.t4a-gantt .t4a-gantt__task-num {
  flex: none;
  color: var(--t4a-gantt-muted);
  font-size: 0.875rem;
  font-weight: 700;
}
.t4a-gantt .t4a-gantt__task-note {
  margin: 6px 0 0;
  color: var(--t4a-gantt-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.t4a-gantt .t4a-gantt__canvas {
  grid-column: 2/-1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 23px 44px auto;
  align-content: start;
  /* one line per month, drawn as a background so it keeps up with the
     flexible column width */
  background-image: linear-gradient(to right, var(--t4a-gantt-line) 0 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.t4a-gantt .t4a-gantt__bar {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 8px;
}
.t4a-gantt .t4a-gantt__bar-label {
  margin: 0;
  color: var(--t4a-gantt-plant);
  font-size: 0.875rem;
  font-weight: 700;
}
.t4a-gantt .t4a-gantt__bar-caption {
  grid-row: 3;
  margin: 8px 0 0;
  color: var(--t4a-gantt-caption);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.t4a-gantt .t4a-gantt__bar--plant {
  background: var(--t4a-gantt-plant);
}
.t4a-gantt .t4a-gantt__bar--survey {
  background: var(--t4a-gantt-survey);
}
.t4a-gantt .t4a-gantt__bar--care {
  margin-top: 15px;
  background: var(--t4a-gantt-care);
  border: 1px dashed var(--t4a-gantt-care-line);
}
.t4a-gantt .t4a-gantt__bar--start-1 {
  grid-column-start: 1;
}
.t4a-gantt .t4a-gantt__bar--span-1 {
  grid-column-end: span 1;
}
.t4a-gantt .t4a-gantt__milestone--col-1 {
  grid-column: 2;
}
.t4a-gantt .t4a-gantt__bar--start-2 {
  grid-column-start: 2;
}
.t4a-gantt .t4a-gantt__bar--span-2 {
  grid-column-end: span 2;
}
.t4a-gantt .t4a-gantt__milestone--col-2 {
  grid-column: 3;
}
.t4a-gantt .t4a-gantt__bar--start-3 {
  grid-column-start: 3;
}
.t4a-gantt .t4a-gantt__bar--span-3 {
  grid-column-end: span 3;
}
.t4a-gantt .t4a-gantt__milestone--col-3 {
  grid-column: 4;
}
.t4a-gantt .t4a-gantt__bar--start-4 {
  grid-column-start: 4;
}
.t4a-gantt .t4a-gantt__bar--span-4 {
  grid-column-end: span 4;
}
.t4a-gantt .t4a-gantt__milestone--col-4 {
  grid-column: 5;
}
.t4a-gantt .t4a-gantt__bar--start-5 {
  grid-column-start: 5;
}
.t4a-gantt .t4a-gantt__bar--span-5 {
  grid-column-end: span 5;
}
.t4a-gantt .t4a-gantt__milestone--col-5 {
  grid-column: 6;
}
.t4a-gantt .t4a-gantt__bar--start-6 {
  grid-column-start: 6;
}
.t4a-gantt .t4a-gantt__bar--span-6 {
  grid-column-end: span 6;
}
.t4a-gantt .t4a-gantt__milestone--col-6 {
  grid-column: 7;
}
.t4a-gantt .t4a-gantt__bar--start-7 {
  grid-column-start: 7;
}
.t4a-gantt .t4a-gantt__bar--span-7 {
  grid-column-end: span 7;
}
.t4a-gantt .t4a-gantt__milestone--col-7 {
  grid-column: 8;
}
.t4a-gantt .t4a-gantt__bar--start-8 {
  grid-column-start: 8;
}
.t4a-gantt .t4a-gantt__bar--span-8 {
  grid-column-end: span 8;
}
.t4a-gantt .t4a-gantt__milestone--col-8 {
  grid-column: 9;
}
.t4a-gantt .t4a-gantt__bar--start-9 {
  grid-column-start: 9;
}
.t4a-gantt .t4a-gantt__bar--span-9 {
  grid-column-end: span 9;
}
.t4a-gantt .t4a-gantt__milestone--col-9 {
  grid-column: 10;
}
.t4a-gantt .t4a-gantt__bar--start-10 {
  grid-column-start: 10;
}
.t4a-gantt .t4a-gantt__bar--span-10 {
  grid-column-end: span 10;
}
.t4a-gantt .t4a-gantt__milestone--col-10 {
  grid-column: 11;
}
.t4a-gantt .t4a-gantt__bar--start-11 {
  grid-column-start: 11;
}
.t4a-gantt .t4a-gantt__bar--span-11 {
  grid-column-end: span 11;
}
.t4a-gantt .t4a-gantt__milestone--col-11 {
  grid-column: 12;
}
.t4a-gantt .t4a-gantt__bar--start-12 {
  grid-column-start: 12;
}
.t4a-gantt .t4a-gantt__bar--span-12 {
  grid-column-end: span 12;
}
.t4a-gantt .t4a-gantt__milestone--col-12 {
  grid-column: 12;
}
.t4a-gantt .t4a-gantt__milestone {
  position: relative;
  justify-self: start;
  width: max-content;
  /* the 16px diamond turned 45° is ~23px wide, centred on the line, plus
     the design's 12px gap before the date */
  padding-left: 23px;
  text-align: left;
  /* the rotated diamond marker, centred on the month line */
}
.t4a-gantt .t4a-gantt__milestone--row-1 {
  grid-row: 2;
  align-self: start;
}
.t4a-gantt .t4a-gantt__milestone--row-2 {
  grid-row: 3;
  margin-top: 3px;
}
.t4a-gantt .t4a-gantt__milestone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: var(--t4a-gantt-accent);
  transform: rotate(45deg);
}
.t4a-gantt .t4a-gantt__milestone-date {
  margin: 0;
  color: var(--t4a-gantt-accent);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}
.t4a-gantt .t4a-gantt__milestone-text {
  margin: 2px 0 0;
  color: var(--t4a-gantt-muted);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.t4a-gantt .t4a-gantt__footer {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(1rem, 2.22vw, 2rem);
  margin-top: clamp(1.25rem, 2.08vw, 1.875rem);
}
.t4a-gantt .t4a-gantt__legend {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.t4a-gantt .t4a-gantt__legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--t4a-gantt-ink);
  font-size: 0.875rem;
  font-weight: 700;
  /* the swatch — same colours as the bars they stand for */
}
.t4a-gantt .t4a-gantt__legend-item::before {
  content: "";
  flex: none;
  width: 28px;
  height: 14px;
  border-radius: 3px;
}
.t4a-gantt .t4a-gantt__legend-item--plant::before {
  background: var(--t4a-gantt-plant);
}
.t4a-gantt .t4a-gantt__legend-item--survey::before {
  background: var(--t4a-gantt-survey);
}
.t4a-gantt .t4a-gantt__legend-item--care::before {
  background: var(--t4a-gantt-care);
  border: 1px dashed var(--t4a-gantt-care-line);
}
.t4a-gantt .t4a-gantt__legend-item--milestone::before {
  width: 12px;
  height: 12px;
  margin-inline: 8px;
  border-radius: 0;
  background: var(--t4a-gantt-accent);
  transform: rotate(45deg);
}
.t4a-gantt .t4a-gantt__note {
  flex: 0 1 860px;
  padding: 20px 24px;
  border-left: 4px solid var(--t4a-gantt-accent);
  background: var(--t4a-gantt-note-bg);
}
.t4a-gantt .t4a-gantt__note-head {
  margin: 0;
  color: var(--t4a-gantt-accent);
  font-size: 0.875rem;
  font-weight: 700;
}
.t4a-gantt .t4a-gantt__note-body {
  margin: 10px 0 0;
  color: var(--t4a-gantt-ink);
  font-size: 0.875rem;
  line-height: 1.5;
}
.t4a-gantt .t4a-gantt__note-body a {
  color: var(--t4a-gantt-plant);
}

/* -------------------------------------------------------------------------
 * Mobile (987:3675) — same markup, stacked.
 *
 * Every rule here comes after its desktop counterpart at the same
 * specificity, so it simply wins; nothing needs !important or repeated
 * class names.
 * ------------------------------------------------------------------------- */
@media (max-width: 999px) {
  .t4a-gantt {
    --t4a-gantt-card: #fff;
    --t4a-gantt-milestone-bg: #fff8f2;
    --t4a-gantt-note-bg: #faf6ed;
    --t4a-gantt-mobile-ink: #4a5e47;
    --t4a-gantt-mobile-muted: #5c6b57;
    /* the month strip each task's bar sits in */
    --t4a-gantt-track-h: 40px;
    /* the task column is gone — every part spans the full width */
    /* Quarters, a rule, months, a rule, then the "กิจกรรม" label. The band
       sticks to the top of the screen while the tasks scroll past, so you
       can always tell which month a bar sits in — the negative inline
       margins let it cover the card's full width. */
    /* one stacked block per task */
    /* the 40px month strip: 4px above a 20px bar, caption under it */
    /* taller and centred in the strip, as the design draws it */
    /* A caption no longer fits under its bar, so it spans the strip and
       hugs the side the bar sits on. */
    /* Each milestone becomes a card below the strip, leaving its marker
       behind on the strip at the line that closes its month. */
  }
  .t4a-gantt .t4a-gantt__lead {
    margin-top: 12px;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .t4a-gantt .t4a-gantt__card {
    margin-top: 24px;
    padding: var(--t4a-gantt-pad);
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
    /* `overflow: hidden` would turn the card into a scrollport and
       kill the sticky header below; the padding already keeps the
       rows clear of the rounded corners. */
    overflow: visible;
  }
  .t4a-gantt .t4a-gantt__head,
  .t4a-gantt .t4a-gantt__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .t4a-gantt .t4a-gantt__head {
    position: sticky;
    top: 0;
    z-index: 2;
    height: auto;
    margin: 0 calc(-1 * var(--t4a-gantt-pad));
    /* 8px under "กิจกรรม" so rows scrolling beneath the stuck band
       never touch the label; the first row gives the same 8 back */
    padding: 8px var(--t4a-gantt-pad);
    background: var(--t4a-gantt-card);
  }
  .t4a-gantt .t4a-gantt__head + .t4a-gantt__row {
    padding-top: 12px;
  }
  .t4a-gantt .t4a-gantt__months {
    grid-column: 1/-1;
    grid-row: auto;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--t4a-gantt-line);
  }
  .t4a-gantt .t4a-gantt__month {
    border-width: 0;
    color: var(--t4a-gantt-mobile-ink);
    font-size: 0.625rem;
    font-weight: 600;
  }
  .t4a-gantt .t4a-gantt__head-label {
    grid-column: 1/-1;
    grid-row: 2;
    align-self: start;
    margin: 20px 0 0;
    padding-left: 0;
    border-right: 0;
    color: var(--t4a-gantt-mobile-ink);
    font-size: 0.6875rem;
  }
  .t4a-gantt .t4a-gantt__row {
    min-height: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--t4a-gantt-line);
  }
  .t4a-gantt .t4a-gantt__task {
    grid-column: 1/-1;
    padding: 0 0 8px;
    border-right: 0;
  }
  .t4a-gantt .t4a-gantt__task-title {
    gap: 6px;
    color: #1c2e1a;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .t4a-gantt .t4a-gantt__task-num {
    color: var(--t4a-gantt-mobile-ink);
  }
  .t4a-gantt .t4a-gantt__task-note {
    margin-top: 8px;
    color: var(--t4a-gantt-mobile-ink);
    font-size: 0.75rem;
    line-height: 1.4;
  }
  .t4a-gantt .t4a-gantt__canvas {
    grid-column: 1/-1;
    grid-template-rows: 4px 20px auto;
    min-height: var(--t4a-gantt-track-h);
    /* the grid lines stop at the strip instead of running on behind
       the milestone cards below it */
    background-size: calc(100% / 12) var(--t4a-gantt-track-h);
    background-repeat: repeat-x;
  }
  .t4a-gantt .t4a-gantt__bar {
    height: 20px;
    border-radius: 4px;
  }
  .t4a-gantt .t4a-gantt__bar--care {
    height: 24px;
    margin-top: 4px;
    border-radius: 6px;
  }
  .t4a-gantt .t4a-gantt__bar-label {
    color: var(--t4a-gantt-mobile-ink);
    font-size: 0.6875rem;
  }
  .t4a-gantt .t4a-gantt__bar-caption {
    grid-column: 1/-1;
    margin-top: 2px;
    font-size: 0.625rem;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-1 {
    /* bars starting before mid-year read left, the rest right */
    text-align: left;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-2 {
    /* bars starting before mid-year read left, the rest right */
    text-align: left;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-3 {
    /* bars starting before mid-year read left, the rest right */
    text-align: left;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-4 {
    /* bars starting before mid-year read left, the rest right */
    text-align: left;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-5 {
    /* bars starting before mid-year read left, the rest right */
    text-align: left;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-6 {
    /* bars starting before mid-year read left, the rest right */
    text-align: right;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-7 {
    /* bars starting before mid-year read left, the rest right */
    text-align: right;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-8 {
    /* bars starting before mid-year read left, the rest right */
    text-align: right;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-9 {
    /* bars starting before mid-year read left, the rest right */
    text-align: right;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-10 {
    /* bars starting before mid-year read left, the rest right */
    text-align: right;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-11 {
    /* bars starting before mid-year read left, the rest right */
    text-align: right;
  }
  .t4a-gantt .t4a-gantt__bar-caption.t4a-gantt__bar--start-12 {
    /* bars starting before mid-year read left, the rest right */
    text-align: right;
  }
  .t4a-gantt .t4a-gantt__milestone {
    position: static;
    grid-column: 1/-1;
    justify-self: stretch;
    width: auto;
    padding: 12px 16px 12px 41px;
    border-radius: 8px;
    background: var(--t4a-gantt-milestone-bg);
    text-align: left;
    /* the first card starts 12px under the 40px strip (4 + 20 + 28) */
    /* the bullet inside the card (static position, so it follows the
       card's own padding) */
    /* the marker left on the month strip — the card is static now, so
       this resolves against .t4a-gantt__canvas */
  }
  .t4a-gantt .t4a-gantt__milestone--row-1 {
    grid-row: 3;
    align-self: auto;
    margin-top: 28px;
  }
  .t4a-gantt .t4a-gantt__milestone--row-2 {
    grid-row: 4;
    margin-top: 12px;
  }
  .t4a-gantt .t4a-gantt__milestone::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    margin-left: -21px;
    background: var(--t4a-gantt-accent);
    transform: rotate(45deg);
  }
  .t4a-gantt .t4a-gantt__milestone::after {
    top: 15.5px;
    width: 9px;
    height: 9px;
    margin-top: 0;
    margin-left: -4.5px;
  }
  .t4a-gantt .t4a-gantt__milestone--col-1::after {
    left: calc(100% / 12 * 1);
  }
  .t4a-gantt .t4a-gantt__milestone--col-2::after {
    left: calc(100% / 12 * 2);
  }
  .t4a-gantt .t4a-gantt__milestone--col-3::after {
    left: calc(100% / 12 * 3);
  }
  .t4a-gantt .t4a-gantt__milestone--col-4::after {
    left: calc(100% / 12 * 4);
  }
  .t4a-gantt .t4a-gantt__milestone--col-5::after {
    left: calc(100% / 12 * 5);
  }
  .t4a-gantt .t4a-gantt__milestone--col-6::after {
    left: calc(100% / 12 * 6);
  }
  .t4a-gantt .t4a-gantt__milestone--col-7::after {
    left: calc(100% / 12 * 7);
  }
  .t4a-gantt .t4a-gantt__milestone--col-8::after {
    left: calc(100% / 12 * 8);
  }
  .t4a-gantt .t4a-gantt__milestone--col-9::after {
    left: calc(100% / 12 * 9);
  }
  .t4a-gantt .t4a-gantt__milestone--col-10::after {
    left: calc(100% / 12 * 10);
  }
  .t4a-gantt .t4a-gantt__milestone--col-11::after {
    left: calc(100% / 12 * 11);
  }
  .t4a-gantt .t4a-gantt__milestone--col-12::after {
    left: calc(100% / 12 * 12);
  }
  .t4a-gantt .t4a-gantt__milestone-date {
    font-size: 0.875rem;
  }
  .t4a-gantt .t4a-gantt__milestone-text {
    color: var(--t4a-gantt-mobile-muted);
    font-size: 0.75rem;
    font-weight: 400;
    white-space: normal;
  }
  .t4a-gantt .t4a-gantt__footer {
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
  }
  .t4a-gantt .t4a-gantt__legend {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }
  .t4a-gantt .t4a-gantt__legend-item {
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
  }
  .t4a-gantt .t4a-gantt__legend-item::before {
    width: 16px;
    height: 16px;
    border-radius: 4px;
  }
  .t4a-gantt .t4a-gantt__legend-item--milestone::before {
    width: 9px;
    height: 9px;
    margin-inline: 3.5px;
    border-radius: 0;
  }
  .t4a-gantt .t4a-gantt__note {
    flex: none;
    padding: 16px;
    border-left: 0;
    border-radius: 12px;
  }
  .t4a-gantt .t4a-gantt__note-head {
    font-size: 0.8125rem;
  }
  .t4a-gantt .t4a-gantt__note-body {
    margin-top: 8px;
    color: var(--t4a-gantt-mobile-muted);
    font-size: 0.75rem;
  }
  .t4a-gantt .t4a-gantt__note-body a {
    color: var(--t4a-gantt-ink);
    text-decoration: underline;
  }
}
/* =========================================================================
 * "พื้นที่และคนปลูกต้นไม้" — people and places
 * Design: desktop 712:4972 · mobile 712:5481
 *
 * WHERE TO CHANGE WHAT
 *   wording, photos, how many steps → patterns/howto-places.php (or the
 *                                     page editor, for wording and photos)
 *   colours and sizes               → the custom properties below
 *
 * A banner photo fades into the section's dark green, then three numbered
 * steps alternate a tilted polaroid with its copy. The connector line
 * between steps is drawn with pseudo-elements — there is no markup for it,
 * so adding a step in the pattern is enough.
 * ========================================================================= */
/* Below this width every step stacks photo-over-text (712:5481). */
.t4a-places {
  --t4a-places-ink: #162511;
  --t4a-places-badge-bg: #4b5340;
  --t4a-places-badge-text: #e0eadc;
  --t4a-places-line: #4b5340;
  --t4a-places-gap: 50px; /* between a polaroid and its copy */
  --t4a-places-stub: 40px; /* the connector line between steps */
  --t4a-places-stub-gap: 24px;
  /* the banner's own copy sits on the photo, so the two must not be
     pushed apart by the theme's default block gap */
  /* --- banner ---------------------------------------------------------- */
  /* The photo runs edge to edge behind the section padding and fades out
     downwards, so the copy lands on solid dark green. */
  /* --- steps ----------------------------------------------------------- */
  /* the gap a step leaves for the connector line dropping into it */
  /* photo on the right instead ('flip' => true in the pattern) */
  /* The connector line: one below every badge, and one below every step's
     row except the last. Adding a step in the pattern needs no CSS change. */
  /* --- polaroid -------------------------------------------------------- */
  /* 353x415 card with a 305 square photo inset 24px on three sides, a 2.6px
     radius and a soft shadow — the same treatment as the About polaroids. */
  /* a flipped step leans the other way (712:5006) */
  /* --- closing call to action ------------------------------------------ */
}
.t4a-places :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-places .t4a-places__banner {
  position: relative;
  /* !important is unavoidable here: WordPress's constrained-layout rule
     sets `margin-left/right: auto !important` on every direct child, and
     this banner has to escape the section's side padding. */
  max-width: none !important;
  margin-inline: calc(-1 * clamp(1rem, 5.56vw, 5rem)) !important;
  padding: clamp(11rem, 36.1vw, 32.5rem) clamp(1rem, 5.56vw, 5rem) clamp(2rem, 4.17vw, 3.75rem);
  background-repeat: no-repeat;
}
.t4a-places .t4a-places__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 37, 17, 0) 0%, var(--t4a-places-ink) 76%);
  pointer-events: none;
}
.t4a-places .t4a-places__banner > * {
  position: relative;
}
.t4a-places .t4a-places__eyebrow {
  margin: 0;
  font-family: "UID LETTER", cursive;
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  line-height: 1.2;
}
.t4a-places .t4a-places__title {
  margin: 15px 0 0;
  font-size: clamp(1.375rem, 2.22vw, 2rem);
  line-height: 1.3;
}
.t4a-places .t4a-places__lead {
  margin: 15px 0 0;
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-places .t4a-places__steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(2.5rem, 4.17vw, 3.75rem);
}
.t4a-places .t4a-places__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.t4a-places .t4a-places__step + .t4a-places__step {
  margin-top: calc(var(--t4a-places-stub) + var(--t4a-places-stub-gap));
}
.t4a-places .t4a-places__badge {
  position: relative;
  min-width: 61px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--t4a-places-badge-bg);
  color: var(--t4a-places-badge-text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.t4a-places .t4a-places__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--t4a-places-gap);
  /* clears the badge's own gap plus the connector line below it */
  margin-top: calc(var(--t4a-places-stub-gap) * 2 + var(--t4a-places-stub));
}
.t4a-places .t4a-places__step--flip .t4a-places__row {
  flex-direction: row-reverse;
}
.t4a-places .t4a-places__badge::after,
.t4a-places .t4a-places__step:not(:last-child) .t4a-places__row::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + var(--t4a-places-stub-gap));
  width: 1px;
  height: var(--t4a-places-stub);
  background: var(--t4a-places-line);
}
.t4a-places .t4a-places__polaroid {
  flex: none;
  width: clamp(240px, 24.5vw, 353px);
  margin: 0;
  padding: clamp(16px, 1.65vw, 24px) clamp(16px, 1.65vw, 24px) clamp(58px, 5.97vw, 86px);
  border-radius: 2.6px;
  background: #fff;
  box-shadow: 0 5.3px 15.9px rgba(0, 0, 0, 0.15);
  transform: rotate(3.35deg);
}
.t4a-places .t4a-places__polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.t4a-places .t4a-places__step--flip .t4a-places__polaroid {
  transform: rotate(-3.95deg);
}
.t4a-places .t4a-places__copy {
  flex: 0 1 531px;
}
.t4a-places .t4a-places__step-title {
  margin: 0;
  font-family: "UID LETTER", cursive;
  font-size: clamp(1.375rem, 2.22vw, 2rem);
  font-weight: 400;
  line-height: 1.3;
}
.t4a-places .t4a-places__step-text {
  margin: 30px 0 0;
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-places .t4a-places__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--t4a-places-gap);
  margin-top: clamp(2.5rem, 6.25vw, 5.625rem);
}
.t4a-places .t4a-places__cta-copy {
  margin: 0;
  font-size: clamp(1.125rem, 1.94vw, 1.75rem);
  line-height: 1.3;
}
.t4a-places .t4a-places__cta-copy strong {
  font-weight: 700;
}
.t4a-places .t4a-places__cta-button {
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Mobile (712:5481) — one column: polaroid above its copy, CTA stacked.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .t4a-places {
    --t4a-places-gap: 24px;
    /* row-reverse would put the photo below the copy — every step reads
       photo first on a phone */
    /* the design gives the polaroid most of the column on a phone */
  }
  .t4a-places .t4a-places__banner {
    padding-top: clamp(9rem, 60vw, 18rem);
  }
  .t4a-places .t4a-places__row,
  .t4a-places .t4a-places__step--flip .t4a-places__row {
    flex-direction: column;
  }
  .t4a-places .t4a-places__polaroid {
    width: min(78%, 300px);
  }
  .t4a-places .t4a-places__copy {
    flex: 1 1 auto;
    width: 100%;
  }
  .t4a-places .t4a-places__step-text {
    margin-top: 16px;
  }
  .t4a-places .t4a-places__cta {
    flex-direction: column;
    gap: 24px;
  }
}
/* =========================================================================
 * "รู้จักระบบติดตามต้นไม้" — the tracking system (808:27231)
 *
 * WHERE TO CHANGE WHAT
 *   wording, the screenshot, which data points → patterns/howto-track.php
 *                                                (or the page editor)
 *   colours and sizes                          → the custom properties below
 *
 * A phone mockup next to the six kinds of data a donor can follow. The phone
 * bezel is drawn here rather than baked into the image, so the client can
 * drop in any screenshot and it still looks like a phone. The data points are
 * one flat list that flows into two columns — adding one needs no CSS.
 * ========================================================================= */
/* Below this the phone moves above the list and the list becomes one column. */
.t4a-track {
  --t4a-track-chip: rgba(255, 255, 255, 0.07);
  --t4a-track-pill: rgba(255, 255, 255, 0.2);
  --t4a-track-muted: rgba(255, 255, 255, 0.8);
  --t4a-track-bezel: #14210f;
  --t4a-track-card: #1c3d1a; /* data point cards, mobile only */
  --t4a-track-card-line: rgba(255, 255, 255, 0.1);
  --t4a-track-gap: 30px;
  /* --- heading --------------------------------------------------------- */
  /* --- phone + data points --------------------------------------------- */
  /* The bezel: a dark rounded frame with the speaker pill on top. Drawn in
     CSS so the screenshot inside stays an ordinary, swappable image. */
  /* One flat list in the markup; two balanced columns on a wide screen. */
}
.t4a-track :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-track .t4a-track__eyebrow {
  width: fit-content;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--t4a-track-pill);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.t4a-track .t4a-track__script {
  margin: 15px 0 0;
  font-family: "UID LETTER", cursive;
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  line-height: 1.2;
}
.t4a-track .t4a-track__title {
  margin: 15px 0 0;
  font-size: clamp(1.25rem, 2.22vw, 2rem);
  line-height: 1.3;
}
.t4a-track .t4a-track__lead {
  max-width: 963px;
  margin: 15px auto 0;
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-track .t4a-track__subhead {
  margin: 15px 0 0;
  font-size: clamp(1.125rem, 1.67vw, 1.5rem);
  font-weight: 500;
  line-height: 1.4;
}
.t4a-track .t4a-track__note {
  margin: 12px 0 0;
  color: var(--t4a-track-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.t4a-track .t4a-track__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4.17vw, 3.75rem);
  margin-top: 50px;
}
.t4a-track .t4a-track__phone {
  position: relative;
  flex: none;
  width: clamp(200px, 17.9vw, 258px);
  padding: 11px;
  border-radius: 42px;
  background: var(--t4a-track-bezel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.t4a-track .t4a-track__phone::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 34%;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 100px;
  background: var(--t4a-track-bezel);
}
.t4a-track .t4a-track__screen {
  margin: 0;
  overflow: hidden;
  border-radius: 32px;
  background: #f8f8f6;
}
.t4a-track .t4a-track__screen img {
  display: block;
  width: 100%;
  height: auto;
  /* the design shows the top of a much taller screenshot */
  aspect-ratio: 228/495;
  object-fit: cover;
  object-position: top center;
}
.t4a-track .t4a-track__features {
  flex: 0 1 856px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--t4a-track-gap);
}
.t4a-track .t4a-track__feature-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.t4a-track .t4a-track__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 12px;
  background: var(--t4a-track-chip);
}
.t4a-track .t4a-track__icon img {
  width: 23px;
  height: 23px;
}
.t4a-track .t4a-track__feature-title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}
.t4a-track .t4a-track__feature-text {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Mobile (873:897) — the phone sits above the data points, and each data
 * point becomes its own bordered card with the icon centred above its title.
 * The type scale is a step down from desktop throughout.
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .t4a-track {
    /* each data point is a card of its own */
    /* icon above the title rather than beside it */
  }
  .t4a-track .t4a-track__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
  }
  .t4a-track .t4a-track__script {
    margin-top: 12px;
    font-size: 1.5rem;
  }
  .t4a-track .t4a-track__title {
    margin-top: 10px;
    font-size: 1.125rem;
    line-height: 1.4;
  }
  .t4a-track .t4a-track__lead {
    margin-top: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .t4a-track .t4a-track__subhead {
    margin-top: 32px;
    font-size: 1.125rem;
    line-height: 1.2;
  }
  .t4a-track .t4a-track__note {
    font-size: 0.75rem;
  }
  .t4a-track .t4a-track__body {
    flex-direction: column;
    gap: 40px;
    margin-top: 32px;
  }
  .t4a-track .t4a-track__phone {
    width: min(70%, 262px);
  }
  .t4a-track .t4a-track__features {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .t4a-track .t4a-track__feature {
    padding: 16px;
    border: 1px solid var(--t4a-track-card-line);
    border-radius: 16px;
    background: var(--t4a-track-card);
    text-align: center;
  }
  .t4a-track .t4a-track__feature-head {
    flex-direction: column;
    gap: 12px;
  }
  .t4a-track .t4a-track__feature-text {
    margin-top: 10px;
  }
}
/* =========================================================================
 * "เชื่อมโยงผู้คนทั้งใกล้ป่าและไกลป่า" — who the project connects
 * Design: desktop 712:5076 · mobile 873:960
 *
 * WHERE TO CHANGE WHAT
 *   wording, photos, how many groups → patterns/howto-partners.php
 *                                      (or the page editor)
 *   colours and sizes                → the custom properties below
 *
 * Three polaroids side by side on a wide screen, stacked on a phone. The
 * white frame and the tilt are CSS so the client can swap any photo in.
 * ========================================================================= */
/* Below this the three groups stack into one column (873:960). */
.t4a-partners {
  --t4a-partners-ink: #111;
  --t4a-partners-body: #505a53;
  --t4a-partners-frame: #fffefa;
  --t4a-partners-gap: 40px;
  /* --- heading --------------------------------------------------------- */
  /* --- the three groups ------------------------------------------------ */
  /*
   * Scoped to __groups on purpose. The footer logo strip is a different
   * section that happens to carry the same .t4a-partners class, with its own
   * .t4a-partners__group inside. This block sits later in the stylesheet, so
   * an unscoped rule here won that cascade and forced the strip's three
   * columns to equal 400px thirds — which pushed the seven-logo group onto a
   * line of its own and left the three groups at different heights.
   */
  /* Polaroid: a 300px card with the photo inset 10.5px on three sides and a
     42px foot, per the design. Lengths, not percentages — a percentage
     padding collapses the image inside .wp-block-image. */
  /* the tilt each group gets, cycled from the pattern */
  /* Reserves two lines and centres within them, so a one-line title still
     leaves its body copy level with the columns beside it (712:5090). */
}
.t4a-partners :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-partners .t4a-partners__eyebrow {
  margin: 0;
  color: var(--t4a-partners-ink);
  font-size: clamp(0.875rem, 1.39vw, 1.25rem);
  line-height: 1.4;
}
.t4a-partners .t4a-partners__title {
  /* the headline is one line here; the break in the markup is for the
     phone layout, where the design splits it (873:965) */
  margin: 10px 0 0;
  color: var(--t4a-partners-ink);
  font-family: "UID LETTER", cursive;
  font-size: clamp(1.5rem, 2.78vw, 2.5rem);
  font-weight: 400;
  line-height: 1.18;
}
.t4a-partners .t4a-partners__title br {
  display: none;
}
.t4a-partners .t4a-partners__lead {
  max-width: 798px;
  margin: clamp(1rem, 2.78vw, 2.5rem) auto 0;
  color: var(--t4a-partners-ink);
  font-size: clamp(0.875rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-partners .t4a-partners__lead strong {
  font-weight: 600;
}
.t4a-partners .t4a-partners__groups {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--t4a-partners-gap);
  margin-top: clamp(2rem, 4.17vw, 3.75rem);
}
.t4a-partners .t4a-partners__groups > .t4a-partners__group {
  flex: 0 1 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.t4a-partners .t4a-partners__photo {
  width: clamp(240px, 20.83vw, 300px);
  margin: 0;
  padding: clamp(8px, 0.73vw, 10.5px) clamp(8px, 0.73vw, 10.5px) clamp(34px, 2.93vw, 42px);
  border-radius: 3.5px;
  background: var(--t4a-partners-frame);
  filter: drop-shadow(3.5px 7px 8px rgba(0, 0, 0, 0.22));
}
.t4a-partners .t4a-partners__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 279/267;
  object-fit: cover;
  border-radius: 1.8px;
}
.t4a-partners .t4a-partners__photo--a {
  transform: rotate(-0.5deg);
}
.t4a-partners .t4a-partners__photo--b {
  transform: rotate(0.61deg);
}
.t4a-partners .t4a-partners__photo--c {
  transform: rotate(-1.5deg);
}
.t4a-partners .t4a-partners__group-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8em;
  margin: 24px 0 0;
  color: var(--t4a-partners-ink);
  font-size: clamp(1.125rem, 1.67vw, 1.5rem);
  line-height: 1.4;
}
.t4a-partners .t4a-partners__group-text {
  margin: 10px 0 0;
  color: var(--t4a-partners-body);
  font-size: clamp(0.875rem, 1.11vw, 1rem);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Mobile (873:960) — one column, with more air between the groups.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .t4a-partners {
    /* stacked, so there are no neighbouring columns to line up with */
  }
  .t4a-partners .t4a-partners__title br {
    display: block;
  }
  .t4a-partners .t4a-partners__lead {
    line-height: 1.4;
  }
  .t4a-partners .t4a-partners__groups {
    flex-direction: column;
    gap: 70px;
    margin-top: 40px;
  }
  .t4a-partners .t4a-partners__groups > .t4a-partners__group {
    flex: 1 1 auto;
    width: 100%;
  }
  .t4a-partners .t4a-partners__photo {
    width: min(72%, 250px);
  }
  .t4a-partners .t4a-partners__group-title {
    min-height: 0;
    margin-top: 12px;
    font-size: 1.25rem;
    font-weight: 600;
  }
  .t4a-partners .t4a-partners__group-text {
    margin-top: 12px;
    line-height: 1.5;
  }
}
/* =========================================================================
 * Full-bleed sections sit flush against each other
 *
 * Every section pattern on this site is an `alignfull` band that carries its
 * own padding, so the theme's default 20px block gap between them shows up as
 * a stripe of page background. Zeroing it here covers sections added later —
 * and reusable blocks such as the shared CTA, which cannot carry a margin
 * attribute of their own.
 * ========================================================================= */
.entry-content > .alignfull + .alignfull,
.editor-styles-wrapper .alignfull + .alignfull {
  margin-block-start: 0;
}

/* =========================================================================
 * Impact page — opening band (712:5679)
 *
 * WHERE TO CHANGE WHAT
 *   wording, photo, which figures → patterns/impact-hero.php (or the editor)
 *   colours and sizes             → the custom properties below
 *
 * A photo that fades into dark green, then the headline figures in rows.
 * The hairline between figures is drawn from their position in the row, so a
 * row of two and a row of three both come out right with no extra markup.
 * ========================================================================= */
.t4a-impact-hero {
  --t4a-impact-ink: #162511;
  --t4a-impact-label: #a1b29e;
  --t4a-impact-rule: rgba(255, 255, 255, 0.2);
  --t4a-impact-wash: rgba(83, 139, 64, 0.8);
  position: relative;
  /* the copy starts 300px down at the design width, leaving the photo
     clear above it */
  padding-top: clamp(8rem, 20.83vw, 18.75rem);
  background-repeat: no-repeat;
  /* the green wash at the very top and the long fade into the section
     colour below it, both straight from the design */
  /* --- heading --------------------------------------------------------- */
  /* --- the headline figures -------------------------------------------- */
  /* the hairline that separates one figure from the next */
}
.t4a-impact-hero :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-impact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Percentages, not pixels: the design's 187px green wash and its
     161→822px fade, expressed against the band's own height so they
     stay in the same place as the copy reflows. */
  background: linear-gradient(180deg, var(--t4a-impact-wash) 0%, rgba(83, 139, 64, 0) 19%), linear-gradient(180deg, rgba(22, 37, 17, 0) 16%, var(--t4a-impact-ink) 78%);
  pointer-events: none;
}
.t4a-impact-hero > * {
  position: relative;
}
.t4a-impact-hero .t4a-impact-hero__eyebrow {
  margin: 0;
  font-family: "UID LETTER", cursive;
  font-size: clamp(2rem, 3.33vw, 3rem);
  line-height: 1.2;
}
.t4a-impact-hero .t4a-impact-hero__title {
  margin: 16px 0 0;
  font-size: clamp(1.375rem, 2.78vw, 2.5rem);
  line-height: 1.3;
}
.t4a-impact-hero .t4a-impact-hero__note {
  margin: 16px 0 0;
  font-size: clamp(0.875rem, 1.11vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
}
.t4a-impact-hero .t4a-impact-hero__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.t4a-impact-hero .t4a-impact-hero__row:first-of-type {
  margin-top: clamp(1.5rem, 2.78vw, 2.5rem);
}
.t4a-impact-hero .t4a-impact-hero__stat {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 8px;
}
.t4a-impact-hero .t4a-impact-hero__stat + .t4a-impact-hero__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 48px;
  margin-top: -24px;
  background: var(--t4a-impact-rule);
}
.t4a-impact-hero .t4a-impact-hero__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: clamp(1.75rem, 3.33vw, 3rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.t4a-impact-hero .t4a-impact-hero__unit {
  font-size: clamp(0.875rem, 1.67vw, 1.5rem);
  font-weight: 500;
}
.t4a-impact-hero .t4a-impact-hero__label {
  margin: 8px 0 0;
  color: var(--t4a-impact-label);
  font-size: clamp(0.8125rem, 1.25vw, 1.125rem);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
 * Impact hero — mobile (881:8237): the photo is only a 249px band at the top
 * (at its own 3:2 ratio, full width) fading into the base colour, and the
 * figures stack one per line with a short rule between every pair.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .t4a-impact-hero {
    --t4a-impact-photo-h: 66.4vw;
    padding-top: 154px;
    padding-bottom: 50px !important;
    /* the section's photo is a block attribute set inline (`cover`,
       which blew it up to the whole band's height) */
    background-size: 100% auto !important;
    /* the editor's block gap would open the list up between the rows */
    /* 20px either side of each rule */
    /* the rule runs across between figures instead of down between
       columns — including between the last of one row and the first of
       the next, which on a phone read as one list */
  }
  .t4a-impact-hero::before {
    background: linear-gradient(180deg, rgba(22, 37, 17, 0) 0, var(--t4a-impact-ink) var(--t4a-impact-photo-h));
  }
  .t4a-impact-hero .t4a-impact-hero__eyebrow {
    font-size: 2rem;
    line-height: 1.3;
  }
  .t4a-impact-hero .t4a-impact-hero__title {
    margin-top: 12px;
    font-size: 1.125rem;
    line-height: 1.45;
  }
  .t4a-impact-hero .t4a-impact-hero__note {
    margin-top: 12px;
    font-size: 0.75rem;
    line-height: 1.45;
  }
  .t4a-impact-hero .t4a-impact-hero__row {
    flex-direction: column;
  }
  .t4a-impact-hero .t4a-impact-hero__row:first-of-type {
    margin-top: 24px;
  }
  .t4a-impact-hero .t4a-impact-hero__row + .t4a-impact-hero__row {
    margin-top: 0;
  }
  .t4a-impact-hero .t4a-impact-hero__stat {
    width: 100%;
    padding: 20px 0;
  }
  .t4a-impact-hero .t4a-impact-hero__row:first-of-type .t4a-impact-hero__stat:first-child {
    padding-top: 0;
  }
  .t4a-impact-hero .t4a-impact-hero__row:last-of-type .t4a-impact-hero__stat:last-child {
    padding-bottom: 0;
  }
  .t4a-impact-hero .t4a-impact-hero__stat + .t4a-impact-hero__stat::before,
  .t4a-impact-hero .t4a-impact-hero__row + .t4a-impact-hero__row .t4a-impact-hero__stat:first-child::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 48px;
    height: 1px;
    margin: 0 0 0 -24px;
    background: var(--t4a-impact-rule);
  }
  .t4a-impact-hero .t4a-impact-hero__value {
    gap: 6px;
    font-size: 2rem;
    font-weight: 700;
  }
  .t4a-impact-hero .t4a-impact-hero__unit {
    font-size: 0.875rem;
    font-weight: 700;
  }
  .t4a-impact-hero .t4a-impact-hero__label {
    font-size: 0.875rem;
    font-weight: 600;
  }
}
/* =========================================================================
 * Impact page — result panels (712:5722 / 712:5757 / 712:5832)
 *
 * WHERE TO CHANGE WHAT
 *   wording, photos, which figures → patterns/impact-panels.php (or the editor)
 *   colours and sizes              → the custom properties below
 *
 * Each band is half photo, half figures, alternating sides. The figures are
 * plain rows in the markup: a row of one fills the width, a row of two splits
 * it, so adding a figure never needs a CSS change.
 * ========================================================================= */
.t4a-impact-panel {
  --t4a-panel-bg: #284d26;
  --t4a-panel-photo-bg: #d7eeb2;
  --t4a-panel-value: #f3ca61;
  --t4a-panel-label: #fafaf5;
  --t4a-panel-pad: clamp(1.5rem, 5.56vw, 5rem);
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 720px;
  /* --- photo half ------------------------------------------------------ */
  /* The small print is a sibling of the two halves rather than a child of
     the photo, so it can float over the photo here and drop below the
     figures on a phone without any change to the markup. */
  /* --- figures half ---------------------------------------------------- */
}
.t4a-impact-panel :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-impact-panel .t4a-impact-panel__media {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--t4a-panel-pad);
  background-repeat: no-repeat;
  /* the two washes the design lays over the photo so the white title
     stays readable whatever the picture is */
}
.t4a-impact-panel .t4a-impact-panel__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 8.6%, rgba(0, 0, 0, 0) 30.3%), linear-gradient(180deg, rgba(71, 102, 56, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}
.t4a-impact-panel .t4a-impact-panel__media > * {
  position: relative;
}
.t4a-impact-panel .t4a-impact-panel__tag {
  width: fit-content;
  margin: 0;
  padding: 6px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 100px;
  background: #fff;
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.4;
}
.t4a-impact-panel .t4a-impact-panel__title {
  max-width: 420px;
  margin: 16px 0 0;
  font-size: clamp(1.375rem, 2.78vw, 2.5rem);
  line-height: 1.3;
}
.t4a-impact-panel .t4a-impact-panel__note {
  position: absolute;
  bottom: clamp(1rem, 2.22vw, 2rem);
  left: var(--t4a-panel-pad);
  width: calc(50% - var(--t4a-panel-pad) * 2);
  z-index: 1;
}
.t4a-impact-panel .t4a-impact-panel__note-title {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
}
.t4a-impact-panel .t4a-impact-panel__note-list {
  margin: 0;
  padding-left: 1.25em;
  font-size: 0.75rem;
  line-height: 1.6;
}
.t4a-impact-panel .t4a-impact-panel__note-list li {
  margin-bottom: 0.25rem;
}
.t4a-impact-panel .t4a-impact-panel__note-list li:last-child {
  margin-bottom: 0;
}
.t4a-impact-panel .t4a-impact-panel__figures {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5.56vw, 5rem);
  padding: var(--t4a-panel-pad);
  background: var(--t4a-panel-bg);
}
.t4a-impact-panel .t4a-impact-panel__row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.t4a-impact-panel .t4a-impact-panel__figure {
  flex: 1 1 0;
  min-width: 0;
}
.t4a-impact-panel .t4a-impact-panel__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--t4a-panel-value);
  font-size: clamp(1.75rem, 3.33vw, 3rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.t4a-impact-panel .t4a-impact-panel__unit {
  font-size: clamp(0.875rem, 1.67vw, 1.5rem);
  font-weight: 500;
  white-space: nowrap;
}
.t4a-impact-panel .t4a-impact-panel__label {
  margin: 16px 0 0;
  color: var(--t4a-panel-label);
  font-size: clamp(0.875rem, 1.25vw, 1.125rem);
  line-height: 1.4;
}
.t4a-impact-panel .t4a-impact-panel__sub {
  margin: 4px 0 0;
  color: var(--t4a-panel-label);
  font-size: clamp(0.75rem, 0.97vw, 0.875rem);
  line-height: 1.5;
  opacity: 0.85;
}

/* photo on the right instead ('flip' => true in the pattern) */
.t4a-impact-panel--flip {
  flex-direction: row-reverse;
  /* ...so the small print follows it to the right half */
}
.t4a-impact-panel--flip .t4a-impact-panel__note {
  left: auto;
  right: var(--t4a-panel-pad);
}

/* -------------------------------------------------------------------------
 * Impact panels — mobile (712:6052): photo on top, figures below it.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .t4a-impact-panel,
  .t4a-impact-panel--flip {
    flex-direction: column;
    min-height: 0;
  }
  /* (881:8237) the photo fades into the dark base colour at its foot and
     the figures carry on, gold on that same dark ground, with no band of
     the desktop green between them */
  .t4a-impact-panel {
    --t4a-panel-bg: #162511;
    --t4a-panel-label: #fff;
    /* the section's desktop green is set inline */
    background: var(--t4a-panel-bg) !important;
    /* The small print sits straight under the title, still over the dark
       foot of the photo, as the design has it — it follows the photo in
       the markup, so it only needs to stop floating. */
    /* a row of one (the farmer count) spreads across both columns */
  }
  .t4a-impact-panel .t4a-impact-panel__media {
    justify-content: flex-end;
    min-height: 390px;
    padding: 120px 20px 24px;
  }
  .t4a-impact-panel .t4a-impact-panel__media::before {
    background: linear-gradient(180deg, rgba(22, 37, 17, 0) calc(100% - 134px), var(--t4a-panel-bg) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.6) 8.6%, rgba(0, 0, 0, 0) 30.3%), linear-gradient(180deg, rgba(71, 102, 56, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
  }
  .t4a-impact-panel .t4a-impact-panel__tag {
    font-size: 0.875rem;
    font-weight: 600;
  }
  .t4a-impact-panel .t4a-impact-panel__title {
    font-size: 1.25rem;
    line-height: 1.3;
  }
  .t4a-impact-panel .t4a-impact-panel__note {
    position: static;
    width: auto;
    max-width: 316px;
    margin: 0 auto;
    padding: 0 0 8px;
  }
  .t4a-impact-panel .t4a-impact-panel__note .t4a-impact-panel__note-title,
  .t4a-impact-panel .t4a-impact-panel__note .t4a-impact-panel__note-list {
    font-size: 0.625rem;
  }
  .t4a-impact-panel .t4a-impact-panel__figures {
    gap: 40px;
    padding: 4px 20px 60px;
  }
  .t4a-impact-panel .t4a-impact-panel__row {
    justify-content: center;
    gap: 0;
  }
  .t4a-impact-panel .t4a-impact-panel__figure {
    flex: 0 1 150px;
  }
  .t4a-impact-panel .t4a-impact-panel__value {
    font-size: 2rem;
    font-weight: 700;
  }
  .t4a-impact-panel .t4a-impact-panel__unit {
    font-size: 0.75rem;
    font-weight: 700;
  }
  .t4a-impact-panel .t4a-impact-panel__label {
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .t4a-impact-panel .t4a-impact-panel__sub {
    font-size: 0.6875rem;
    line-height: 1.6;
    opacity: 1;
  }
  .t4a-impact-panel .t4a-impact-panel__row > .t4a-impact-panel__figure:only-child {
    flex-basis: 300px;
  }
}
/* the two new button icons used by the reports section */
.t4a-btn-icon--download .wp-block-button__link::before {
  background-image: url("../img/impact/icon-download.svg");
}

.t4a-btn-icon--map .wp-block-button__link::before {
  background-image: url("../img/impact/icon-map.svg");
}

/* =========================================================================
 * Impact page — "สำรวจผลลัพธ์ จังหวัดน่าน" band (881:5669 / 881:8443)
 *
 * A landscape that darkens towards the bottom, with the eyebrow, headline,
 * copy and the gold button centred on it. Everything is editable in place.
 * ========================================================================= */
.t4a-impact-nan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 704px;
  padding-block: clamp(3rem, 8vw, 6rem);
  background-repeat: no-repeat;
  /* the fade the design lays over the photo so the copy stays readable */
}
.t4a-impact-nan :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-impact-nan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 17, 33, 0) 0%, #1f2410 100%);
  pointer-events: none;
}
.t4a-impact-nan > * {
  position: relative;
}
.t4a-impact-nan .t4a-impact-nan__eyebrow {
  width: fit-content;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.t4a-impact-nan .t4a-impact-nan__title {
  margin: 15px 0 0;
  font-family: "UID LETTER", cursive;
  font-size: clamp(2rem, 2.78vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
}
.t4a-impact-nan .t4a-impact-nan__lead {
  margin: 15px 0 0;
  font-size: clamp(0.9375rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-impact-nan .t4a-impact-nan__actions {
  margin-top: 40px;
}

/* =========================================================================
 * Impact page — "ติดตามผลลัพธ์อย่างโปร่งใส" (712:5851)
 *
 * WHERE TO CHANGE WHAT
 *   wording, images, how many cards → patterns/impact-reports.php
 *   colours and sizes               → the custom properties below
 *
 * Cards are equal columns that stack on a phone; each one holds a preview, a
 * title, a line of copy and a gold button.
 * ========================================================================= */
.t4a-impact-reports {
  --t4a-report-ink: #111827;
  --t4a-report-body: #4b5563;
  --t4a-report-line: #e5e7eb;
  --t4a-report-frame: #ebeae6;
  /* --- the preview at the top of a card -------------------------------- */
  /* the report cover sits inside a mount; the map bleeds to the edges */
  /* the map preview fills its box and darkens towards the bottom */
  /* --- card copy ------------------------------------------------------- */
  /* pinned to the foot so both cards' buttons line up */
}
.t4a-impact-reports :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-impact-reports .t4a-impact-reports__eyebrow {
  width: fit-content;
  margin: 0 auto;
  padding: 4px 12px;
  border-radius: 100px;
  background: #e5e8e0;
  color: #284d26;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.t4a-impact-reports .t4a-impact-reports__title {
  margin: 20px 0 0;
  color: var(--t4a-report-ink);
  font-size: clamp(1.5rem, 2.78vw, 2.5rem);
  line-height: 1.3;
}
.t4a-impact-reports .t4a-impact-reports__grid {
  display: flex;
  align-items: stretch;
  gap: 32px;
  margin-top: clamp(2rem, 3.89vw, 3.5rem);
}
.t4a-impact-reports .t4a-impact-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.78vw, 2.5rem);
  border: 1px solid var(--t4a-report-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.03);
}
.t4a-impact-reports .t4a-impact-card__preview {
  position: relative;
  height: 320px;
  overflow: hidden;
  border-radius: 16px;
}
.t4a-impact-reports .t4a-impact-card__preview--framed {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--t4a-report-frame);
}
.t4a-impact-reports .t4a-impact-card__image {
  margin: 0;
}
.t4a-impact-reports .t4a-impact-card__image img {
  display: block;
  width: 100%;
  height: auto;
}
.t4a-impact-reports .t4a-impact-card__preview--framed .t4a-impact-card__image img {
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.13);
}
.t4a-impact-reports .t4a-impact-card__preview:not(.t4a-impact-card__preview--framed) .t4a-impact-card__image,
.t4a-impact-reports .t4a-impact-card__preview:not(.t4a-impact-card__preview--framed) .t4a-impact-card__image img {
  height: 100%;
}
.t4a-impact-reports .t4a-impact-card__preview:not(.t4a-impact-card__preview--framed) .t4a-impact-card__image img {
  width: 100%;
  object-fit: cover;
}
.t4a-impact-reports .t4a-impact-card__preview:not(.t4a-impact-card__preview--framed)::after {
  content: "";
  position: absolute;
  inset: 47% 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(8, 20, 11, 0.8) 100%);
  pointer-events: none;
}
.t4a-impact-reports .t4a-impact-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  margin: 0;
  padding: 6px 12px;
  border-radius: 6px;
  background: #2b5e22;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}
.t4a-impact-reports .t4a-impact-card__title {
  margin: 24px 0 0;
  color: var(--t4a-report-ink);
  font-size: clamp(1.25rem, 1.67vw, 1.5rem);
  line-height: 1.4;
}
.t4a-impact-reports .t4a-impact-card__text {
  margin: 12px 0 0;
  color: var(--t4a-report-body);
  font-size: 1rem;
  line-height: 1.6;
}
.t4a-impact-reports .t4a-impact-card__actions {
  margin-top: auto;
  padding-top: 24px;
}

/* -------------------------------------------------------------------------
 * Impact — Nan band and report cards on mobile (881:8443).
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .t4a-impact-nan {
    min-height: 0;
    padding: 110px 20px 80px;
  }
  .t4a-impact-nan::before {
    background: linear-gradient(180deg, rgba(22, 37, 17, 0.25) 0%, #162511 100%);
  }
  .t4a-impact-nan .t4a-impact-nan__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
  }
  .t4a-impact-nan .t4a-impact-nan__title {
    font-size: 2.5rem;
  }
  .t4a-impact-nan .t4a-impact-nan__lead {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .t4a-impact-nan .t4a-impact-nan__actions {
    margin-top: 40px;
  }
  .t4a-impact-reports {
    padding: 48px 16px !important;
    /* 295 × 173.5 on the 375 frame */
    /* the report's button is the design's smaller one (48px, 15px bold);
       the map's keeps the full size */
  }
  .t4a-impact-reports .t4a-impact-reports__eyebrow {
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 600;
  }
  .t4a-impact-reports .t4a-impact-reports__title {
    margin-top: 12px;
    color: #284d26;
    font-size: 1.375rem;
    font-weight: 700 !important;
    line-height: 30px;
  }
  .t4a-impact-reports .t4a-impact-reports__grid {
    flex-direction: column;
    gap: 32px;
    margin-top: 32px;
  }
  .t4a-impact-reports .t4a-impact-card {
    padding: 24px;
    border-radius: 20px;
  }
  .t4a-impact-reports .t4a-impact-card__preview {
    height: auto;
    aspect-ratio: 295/173.5;
    border-radius: 8.7px;
  }
  .t4a-impact-reports .t4a-impact-card__preview--framed {
    padding: 17px 29px;
  }
  .t4a-impact-reports .t4a-impact-card__preview--framed .t4a-impact-card__image img {
    border-radius: 4px;
  }
  .t4a-impact-reports .t4a-impact-card__title {
    margin-top: 16px;
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 600 !important;
    line-height: 1.1;
  }
  .t4a-impact-reports .t4a-impact-card__text {
    margin-top: 16px;
    color: #737373;
    font-size: 0.875rem;
    line-height: 18px;
  }
  .t4a-impact-reports .t4a-impact-card__actions {
    padding-top: 16px;
  }
  .t4a-impact-reports .t4a-btn-icon--download .wp-block-button__link {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 0.9375rem;
    font-weight: 700;
  }
  /* The page's closing call to action (987:2447): one 16px line of copy
     across the full width — the side padding kept it to three lines. The
     block is shared, so this is the same on every page that uses it. */
  .t4a-cta .t4a-cta__body {
    padding: 0;
    font-size: 1rem;
  }
}
/* =========================================================================
 * Nan page — opening band and "ทำไมต้องน่าน ?" (881:5889)
 *
 * WHERE TO CHANGE WHAT
 *   wording, photos, how many cards → patterns/nan-hero.php (or the editor)
 *   colours and sizes               → the custom properties below
 *
 * A photo band with the province name, then four tilted polaroids. The white
 * frame and the tilt are CSS, so the client can swap any photo in.
 * ========================================================================= */
/* Below this the four cards drop to two across, then one. */
.t4a-nan-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 704px;
  padding-block: clamp(6rem, 12vw, 9rem);
  background-repeat: no-repeat;
  /* The design lays one wash over the photo and it runs LEFT TO RIGHT
     (881:5894 — a vertical gradient rotated -90deg), starting 78px down.
     It is deliberately light: the landscape stays bright and readable
     rather than being dimmed behind a scrim. */
}
.t4a-nan-hero :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-nan-hero::before {
  content: "";
  position: absolute;
  inset: 78px 0 0;
  background: linear-gradient(90deg, rgba(22, 37, 17, 0) 0%, rgba(22, 37, 17, 0.8) 100%);
  pointer-events: none;
}
.t4a-nan-hero > * {
  position: relative;
}
.t4a-nan-hero .t4a-nan-hero__eyebrow {
  margin: 0;
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  line-height: 1.4;
}
.t4a-nan-hero .t4a-nan-hero__title {
  margin: 21px 0 0;
  font-family: "UID LETTER", cursive;
  font-size: clamp(2.5rem, 4.44vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
}
.t4a-nan-hero .t4a-nan-hero__lead {
  margin: 21px 0 0;
  font-size: clamp(0.9375rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}

.t4a-why-nan {
  --t4a-nan-ink: #111;
  --t4a-nan-frame: #fffefa;
  /* --- the four cards --------------------------------------------------- */
  /* 240px card with the photo inset 10px on three sides and a 40px foot */
  /* the tilt each card gets, cycled from the pattern */
  /* two lines are reserved so every card's copy starts at the same height */
}
.t4a-why-nan :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-why-nan .t4a-why-nan__title {
  margin: 0;
  color: var(--t4a-nan-ink);
  font-size: clamp(1.5rem, 2.22vw, 2rem);
  line-height: 1.3;
}
.t4a-why-nan .t4a-why-nan__lead {
  margin: 15px 0 0;
  color: var(--t4a-nan-ink);
  font-size: clamp(0.9375rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-why-nan .t4a-why-nan__lead-strong {
  margin: 0;
  color: var(--t4a-nan-ink);
  font-size: clamp(1.0625rem, 1.67vw, 1.5rem);
  line-height: 1.6;
}
.t4a-why-nan .t4a-why-nan__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: clamp(2.5rem, 4.17vw, 3.75rem);
  padding-inline: 20px;
}
.t4a-why-nan .t4a-why-nan__card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.t4a-why-nan .t4a-why-nan__photo {
  width: min(100%, 240px);
  margin: 0;
  padding: clamp(7px, 0.7vw, 10px) clamp(7px, 0.7vw, 10px) clamp(28px, 2.82vw, 40px);
  border-radius: 3.4px;
  background: var(--t4a-nan-frame);
  filter: drop-shadow(3.4px 6.8px 7.6px rgba(0, 0, 0, 0.22));
}
.t4a-why-nan .t4a-why-nan__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 220/256;
  object-fit: cover;
}
.t4a-why-nan .t4a-why-nan__photo--a {
  transform: rotate(-3deg);
}
.t4a-why-nan .t4a-why-nan__photo--b {
  transform: rotate(2deg);
}
.t4a-why-nan .t4a-why-nan__photo--c {
  transform: rotate(-1.5deg);
}
.t4a-why-nan .t4a-why-nan__photo--d {
  transform: rotate(3deg);
}
.t4a-why-nan .t4a-why-nan__card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8em;
  margin: 24px 0 0;
  color: var(--t4a-nan-ink);
  font-size: clamp(1.125rem, 1.67vw, 1.5rem);
  line-height: 1.4;
}
.t4a-why-nan .t4a-why-nan__card-text {
  margin: 8px 0 0;
  color: var(--t4a-nan-ink);
  font-size: 1rem;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Nan hero and cards — narrower screens (881:8556).
 * ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .t4a-why-nan .t4a-why-nan__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }
}
@media (max-width: 860px) {
  /* The phone hero (881:8560) is its own composition, not the desktop one
     squeezed: a short band whose height comes from 110px of padding, a
     tighter type scale, the photo zoomed past the sky, and a wash that runs
     the other way — dark on the LEFT rather than the right. */
  .t4a-nan-hero {
    min-height: 0;
    padding-block: clamp(3.5rem, 29.3vw, 6.875rem);
    /* Anchored to the bottom so the sky falls outside this short band,
       panned left the way the design frames it. !important is required:
       the photo is a block Background attribute (so the client can swap
       it from Styles → Background) and WordPress prints those as an
       inline style, which no stylesheet rule can outrank otherwise. */
    background-size: cover !important;
    background-position: 40% 100% !important;
    /* Under about 560px the band is wider than the photo is tall, so
       `cover` scales to the HEIGHT and leaves no crop to play with —
       the sky comes back and the sides stop reaching the edges. Zooming
       past that point keeps the frame full and the sky out. */
  }
}
@media (max-width: 860px) and (max-width: 560px) {
  .t4a-nan-hero {
    background-size: auto 130% !important;
  }
}
@media (max-width: 860px) {
  .t4a-nan-hero::before {
    inset: 0;
    background: linear-gradient(to left, rgba(22, 37, 17, 0.25) 0%, #162511 177%);
  }
  .t4a-nan-hero .t4a-nan-hero__eyebrow {
    font-size: 0.875rem;
  }
  .t4a-nan-hero .t4a-nan-hero__title {
    margin-top: 0;
    font-size: 1.5rem;
  }
  .t4a-nan-hero .t4a-nan-hero__lead {
    margin-top: 10px;
    font-size: 1.125rem;
    line-height: 1.4;
  }
  .t4a-why-nan {
    /* stacked, so there are no neighbouring cards to line up with */
  }
  .t4a-why-nan .t4a-why-nan__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-inline: 0;
  }
  .t4a-why-nan .t4a-why-nan__card-title {
    min-height: 0;
    margin-top: 16px;
  }
}
/* =========================================================================
 * Nan page — "ผลลัพธ์ต่อสิ่งแวดล้อม" before/after slider (881:5947)
 *
 * WHERE TO CHANGE WHAT
 *   which slides, which artwork → patterns/nan-before-after.php
 *   colours and sizes           → the custom properties below
 *
 * Each slide is a single transparent PNG/WebP exported from Figma, in two
 * crops: a wide one for desktop and a taller one for the phone. The viewport,
 * arrows and dots are added by assets/js/nan-slider.js at runtime — there is
 * no chrome in the markup for the editor to lose. Without JavaScript the
 * slides stay a horizontally scrollable row, which still swipes.
 * ========================================================================= */
.t4a-nan-ba {
  /* --- the slider ------------------------------------------------------ */
  /* Before the script runs (and if it never does) the slides are a plain
     scrollable row, so the section is usable either way. */
  /* one crop per breakpoint — the phone artwork stacks the notes */
}
.t4a-nan-ba :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-nan-ba .t4a-nan-ba__title {
  margin: 0;
  font-family: "UID LETTER", cursive;
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  line-height: 1.2;
}
.t4a-nan-ba .t4a-nan-ba__subtitle {
  margin: 15px 0 0;
  font-size: clamp(1.125rem, 1.67vw, 1.5rem);
  line-height: 1.3;
}
.t4a-nan-ba .t4a-nan-ba__slider {
  margin-top: clamp(1.5rem, 2.78vw, 2.5rem);
}
.t4a-nan-ba .t4a-nan-ba__viewport,
.t4a-nan-ba .t4a-nan-ba__slider:not(.is-enhanced) {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.t4a-nan-ba .t4a-nan-ba__viewport::-webkit-scrollbar,
.t4a-nan-ba .t4a-nan-ba__slider:not(.is-enhanced)::-webkit-scrollbar {
  display: none;
}
.t4a-nan-ba .t4a-nan-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.t4a-nan-ba .t4a-nan-slide__art {
  margin: 0;
}
.t4a-nan-ba .t4a-nan-slide__art img {
  display: block;
  width: 100%;
  height: auto;
}
.t4a-nan-ba .t4a-nan-slide__art--narrow {
  display: none;
}

/* -------------------------------------------------------------------------
 * Slider chrome — shared
 *
 * assets/js/nan-slider.js builds these elements for every slider it finds, so
 * they are styled at the top level rather than inside one section. Each
 * section then adjusts colour and size from its own scope.
 * ------------------------------------------------------------------------- */
.t4a-nan-ba__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.t4a-nan-ba__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: #fff;
  color: #1c241b;
  cursor: pointer;
}
.t4a-nan-ba__arrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.t4a-nan-ba__arrow--prev::before {
  transform: rotate(-135deg) translate(-1px, -1px);
}
.t4a-nan-ba__arrow--next::before {
  transform: rotate(45deg) translate(-1px, -1px);
}

.t4a-nan-ba__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.t4a-nan-ba__dot {
  flex: none;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
.t4a-nan-ba__dot.is-current {
  background: #fff;
}

/* -------------------------------------------------------------------------
 * Before/after slider — the phone crop takes over.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .t4a-nan-ba .t4a-nan-slide__art--wide {
    display: none;
  }
  .t4a-nan-ba .t4a-nan-slide__art--narrow {
    display: block;
    max-width: 420px;
    margin-inline: auto;
  }
}
/* =========================================================================
 * Page title
 *
 * The title block a page shows when it is NOT on the page-no-title template
 * (the photo-hero pages set their own headline inside the hero instead).
 * Same preset the rest of the site's headings use, with the fallback stack in
 * case the Global Styles font list ever drops the preset.
 * ========================================================================= */
.wp-block-post-title {
  color: #242d27;
  font-family: var(--wp--preset--font-family--ibm-plex-sans-thai, "IBM Plex Sans Thai", sans-serif);
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}

/* smaller again on a phone, same 120% ratio */
@media (max-width: 781px) {
  .wp-block-post-title {
    font-size: 38px;
  }
}
/* =========================================================================
 * Nan page — "แผนที่ตำแหน่งการปลูกต้นไม้" (desktop 987:3921 / mobile 881:8625)
 *
 * WHERE TO CHANGE WHAT
 *   which maps, the copy, the button → patterns/nan-map.php (or the editor)
 *   colours and sizes                → the custom properties below
 *
 * Desktop: copy + button on the left, the map slider on the right with its
 * arrows and dots centred under the picture. Mobile: one centred column —
 * copy, slider, then the button last, reordered from the same markup.
 * One slide per map; the slide mechanics are shared with the before/after
 * slider (.t4a-nan-slide + assets/js/nan-slider.js), and nothing here counts
 * the slides, so adding one in the editor needs no CSS.
 * ========================================================================= */
.t4a-nan-map {
  --t4a-map-ink: #111;
  --t4a-map-muted: #78716c;
  --t4a-map-ratio: 780 / 439;
  /* --- left column: title, lead, button -------------------------------- */
  /* the block's own "justify centre" is for the phone column */
  /* --- right column: the slides ---------------------------------------- */
  /* --- arrows + dots, mounted under the slides by nan-slider.js --------- */
}
.t4a-nan-map :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-nan-map .t4a-nan-map__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.t4a-nan-map .t4a-nan-map__head {
  display: flex;
  flex: 0 1 475px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}
.t4a-nan-map .t4a-nan-map__title {
  margin: 0;
  color: var(--t4a-map-ink);
  font-size: clamp(1.5rem, 2.78vw, 2.5rem);
  line-height: 1.3;
}
.t4a-nan-map .t4a-nan-map__lead {
  margin: 0;
  color: var(--t4a-map-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.t4a-nan-map .t4a-nan-map__actions {
  justify-content: flex-start;
}
.t4a-nan-map .t4a-nan-map__slider {
  flex: 0 1 780px;
  min-width: 0;
}
.t4a-nan-map .t4a-nan-ba__viewport,
.t4a-nan-map .t4a-nan-map__slider:not(.is-enhanced) {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.t4a-nan-map .t4a-nan-ba__viewport::-webkit-scrollbar,
.t4a-nan-map .t4a-nan-map__slider:not(.is-enhanced)::-webkit-scrollbar {
  display: none;
}
.t4a-nan-map .t4a-nan-map__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  overflow: hidden;
  border-radius: 20px;
}
.t4a-nan-map .t4a-nan-map__image {
  margin: 0;
}
.t4a-nan-map .t4a-nan-map__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--t4a-map-ratio);
  object-fit: cover;
}
.t4a-nan-map .t4a-nan-ba__nav {
  margin-top: 20px;
}
.t4a-nan-map .t4a-nan-ba__arrow {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.t4a-nan-map .t4a-nan-ba__dot {
  background: #d6d3d1;
}
.t4a-nan-map .t4a-nan-ba__dot.is-current {
  background: var(--t4a-map-ink);
}

/* -------------------------------------------------------------------------
 * Planting map — narrow screens (881:8625): one centred column. The left
 * column's box steps aside (display: contents) so its title, lead and
 * button can be ordered around the slider, putting the button last.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .t4a-nan-map {
    /* 8px under the title in the design; the row's gap is 24 */
  }
  .t4a-nan-map .t4a-nan-map__row {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .t4a-nan-map .t4a-nan-map__head {
    display: contents;
  }
  .t4a-nan-map .t4a-nan-map__title {
    order: 1;
    font-size: 1.375rem;
    line-height: 1.3;
    text-align: center;
  }
  .t4a-nan-map .t4a-nan-map__lead {
    order: 2;
    margin-top: -16px;
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: center;
  }
  .t4a-nan-map .t4a-nan-map__slider {
    order: 3;
    flex: none;
  }
  .t4a-nan-map .t4a-nan-map__actions {
    order: 4;
    justify-content: center;
  }
  .t4a-nan-map .t4a-nan-map__slide {
    border-radius: 9px;
  }
}
/* =========================================================================
 * "รู้จักคนปลูกต้นไม้" (881:6022)
 *
 * Only the heading lives here — the cards are drawn by the shared
 * trees4all/collection block, which carries its own .t4a-collection styles.
 * ========================================================================= */
.t4a-planters {
  /* --- what the group is, under the people cards (881:6059) ------------- */
  /* --- the three quotes (881:6063) -------------------------------------- */
  /* nan-slider.js moves the cards into a viewport of its own. Until it runs
     (and if it never does) the row itself is the grid, so the section looks
     right either way — but once it has, the row must step aside or the
     viewport would be squeezed into a single column of it. */
  /* pushed to the foot so every card's name sits on the same line */
}
.t4a-planters .t4a-planters__title {
  margin: 0 0 clamp(2rem, 4.17vw, 3.75rem);
  color: #111;
  font-family: "UID LETTER", cursive;
  font-size: clamp(1.5rem, 2.78vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
}
.t4a-planters :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-planters .t4a-planters__about {
  max-width: 928px;
  margin: clamp(2rem, 4.17vw, 3.75rem) auto 0;
  color: #111;
}
.t4a-planters .t4a-planters__about-title {
  margin: 0;
  font-size: clamp(1.125rem, 1.67vw, 1.5rem);
  line-height: 1.4;
}
.t4a-planters .t4a-planters__about-text {
  margin: 20px 0 0;
  font-size: clamp(0.9375rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-planters .t4a-planters__quotes {
  margin-top: clamp(2rem, 4.17vw, 3.75rem);
}
.t4a-planters .t4a-planters__quotes:not(.is-enhanced),
.t4a-planters .t4a-nan-ba__viewport {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.t4a-planters .t4a-quote-card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.02vw, 29px);
  border-radius: 14.5px;
  background: #b2c966;
  /* the quotation mark the design sets above each quote */
}
.t4a-planters .t4a-quote-card::before {
  content: "";
  width: 35px;
  height: 35px;
  background: #fff;
  mask: url("../img/nan/quote-mark.svg") no-repeat center/contain;
  -webkit-mask: url("../img/nan/quote-mark.svg") no-repeat center/contain;
}
.t4a-planters .t4a-quote-card__text {
  margin: 17px 0 0;
  color: #4a4d49;
  font-size: 1rem;
  line-height: 1.6;
}
.t4a-planters .t4a-quote-card__name {
  margin: 0;
  padding-top: 23px;
  margin-top: auto;
  color: #111;
  font-size: 1rem;
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
 * Meet the planters — narrow screens: the quotes drop to one column.
 * ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .t4a-planters .t4a-planters__quotes:not(.is-enhanced),
  .t4a-planters .t4a-nan-ba__viewport {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* -------------------------------------------------------------------------
 * Meet the planters — on a phone the quotes become a swipeable slider.
 * The viewport stops being a grid and starts scrolling; nan-slider.js notices
 * the overflow and reveals the arrows and dots it already built.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
  .t4a-planters {
    /* 20px more air between the cards and the arrows than the shared
       24px, which reads too tight at this width */
  }
  .t4a-planters .t4a-planters__quotes:not(.is-enhanced),
  .t4a-planters .t4a-nan-ba__viewport {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .t4a-planters .t4a-planters__quotes:not(.is-enhanced)::-webkit-scrollbar,
  .t4a-planters .t4a-nan-ba__viewport::-webkit-scrollbar {
    display: none;
  }
  .t4a-planters .t4a-quote-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .t4a-planters .t4a-quote-card__name {
    padding-top: 16px;
  }
  .t4a-planters .t4a-nan-ba__nav {
    margin-top: 44px;
  }
  .t4a-planters .t4a-nan-ba__dot {
    background: rgba(17, 17, 17, 0.2);
  }
  .t4a-planters .t4a-nan-ba__dot.is-current {
    background: #111;
  }
  .t4a-planters .t4a-nan-ba__arrow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  }
}
/* the controls stay out of the way whenever the row fits without scrolling */
.t4a-nan-ba__nav.is-idle {
  display: none;
}

/* =========================================================================
 * Collections — people and product cards
 *
 * Shared by every collection the theme declares (see inc/collections.php).
 * The row becomes a slider only when there are more cards than fit, and
 * assets/js/collection-slider.js adds the arrows and dots then.
 * ========================================================================= */
.t4a-collection {
  --t4a-col-gap: 24px;
  --t4a-col-per-view: 4;
  --t4a-col-ink: #111;
  --t4a-col-meta: #7c8079;
  --t4a-col-frame: #fff;
  position: relative;
  /* The people cards are polaroids (881:6022). Declared AFTER the shared
     rules above: both selectors weigh the same, so source order is what
     decides — put this block first and the square portrait loses to 4/3.
     (881:6022): a square portrait, the name
     and role centred under it, and a slight tilt that alternates down the
     row. Everything else about a collection stays shared with ผลิตภัณฑ์. */
  /* pinned to the foot so every card's button lines up */
  /* --- arrows and dots (built by the script) --------------------------- */
  /* --- ผลิตภัณฑ์ cards — Figma 881:6382 -------------------------------
     The planter cards keep their polaroid look above; these follow the
     products design: a wider card with a rounded photo, a bigger gap and a
     full-width gold button with a cart before the label. */
  /* the design's arrows: bigger, white and borderless */
}
.t4a-collection .t4a-collection__track {
  display: flex;
  /* Centred by default, which is what a short row should look like —
     two products read better in the middle than hugging the left.
     `safe` makes the browser fall back to flex-start the moment the row
     is wider than the track, because a centred overflowing row hides its
     first card with no way to scroll back to it. A slider is switched to
     flex-start outright below, for browsers without `safe`. */
  justify-content: center;
  justify-content: safe center;
  gap: var(--t4a-col-gap);
  /* the track clips what overflows it, so the cards' drop shadow needs
     room at the foot */
  padding-bottom: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.t4a-collection .t4a-collection__track::-webkit-scrollbar {
  display: none;
}
.t4a-collection.is-slider .t4a-collection__track {
  justify-content: flex-start;
}
.t4a-collection .t4a-collection__card {
  flex: 0 0 calc((100% - var(--t4a-col-gap) * (var(--t4a-col-per-view) - 1)) / var(--t4a-col-per-view));
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  padding: 12px 12px 20px;
  border-radius: 4px;
  background: var(--t4a-col-frame);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.t4a-collection .t4a-collection__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.t4a-collection .t4a-collection__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 16px;
}
.t4a-collection .t4a-collection__name {
  margin: 0;
  color: var(--t4a-col-ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
.t4a-collection .t4a-collection__meta {
  margin: 8px 0 0;
  color: var(--t4a-col-meta);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.t4a-collection--planter {
  --t4a-col-per-view: 3;
  /* the tilt cycles, so it keeps working however many people there are */
  /* One card fills the row on a phone, and a tilted card that wide has
     its corners clipped by the track — so it sits straight there. */
}
.t4a-collection--planter .t4a-collection__card {
  padding: 12px 12px 28px;
}
.t4a-collection--planter .t4a-collection__photo img {
  aspect-ratio: 1;
}
.t4a-collection--planter .t4a-collection__body {
  align-items: center;
  padding-top: 20px;
  text-align: center;
}
.t4a-collection--planter .t4a-collection__meta {
  font-size: 0.75rem;
}
.t4a-collection--planter .t4a-collection__card:nth-child(3n+1) {
  transform: rotate(-1.8deg);
}
.t4a-collection--planter .t4a-collection__card:nth-child(3n+2) {
  transform: rotate(1.2deg);
}
.t4a-collection--planter .t4a-collection__card:nth-child(3n+3) {
  transform: rotate(-1.2deg);
}
@media (max-width: 781px) {
  .t4a-collection--planter .t4a-collection__card:nth-child(n) {
    transform: none;
  }
}
.t4a-collection .t4a-collection__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 20px;
  border-radius: 100px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.t4a-collection .t4a-collection__btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.t4a-collection .t4a-collection__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  /* `display: flex` above out-weighs the browser default for [hidden],
     so the script's `nav.hidden = true` needs saying again here or the
     arrows stay on screen with nowhere to go. */
}
.t4a-collection .t4a-collection__nav[hidden] {
  display: none;
}
.t4a-collection .t4a-collection__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #d9dcd6;
  border-radius: 100px;
  background: #fff;
  color: var(--t4a-col-ink);
  cursor: pointer;
}
.t4a-collection .t4a-collection__arrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.t4a-collection .t4a-collection__arrow--prev::before {
  transform: rotate(-135deg) translate(-1px, -1px);
}
.t4a-collection .t4a-collection__arrow--next::before {
  transform: rotate(45deg) translate(-1px, -1px);
}
.t4a-collection .t4a-collection__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.t4a-collection .t4a-collection__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: #cfd4cb;
  cursor: pointer;
}
.t4a-collection .t4a-collection__dot.is-current {
  background: var(--t4a-col-meta);
}
.t4a-collection--product {
  --t4a-col-gap: 30px;
  --t4a-col-meta: #4d5d51;
  /* No veil over the picture: the design mocks one up, but a real product
     should show its own colours, so the photo is left untouched. */
}
.t4a-collection--product .t4a-collection__card {
  /* Width comes from the shared per-row formula, so exactly
     `--t4a-col-per-view` cards fill the track and the slider only
     appears once there are more than that. The ceiling stops a short
     row stretching its cards; it is set above the width four cards
     actually get, so it never clips them. */
  max-width: 320px;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 10px 12px rgba(0, 0, 0, 0.07);
}
.t4a-collection--product .t4a-collection__photo {
  border-radius: 12px;
  overflow: hidden;
}
.t4a-collection--product .t4a-collection__photo img {
  aspect-ratio: 268/240;
}
.t4a-collection--product .t4a-collection__body {
  padding-top: 0;
}
.t4a-collection--product .t4a-collection__name {
  color: #121b16;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}
.t4a-collection--product .t4a-collection__meta {
  margin-top: 10px;
  /* the design's 16px gap before the button, kept as a margin on the
     text so the button itself can still use `margin-top: auto` */
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.t4a-collection--product .t4a-collection__btn {
  gap: 8px;
  box-sizing: border-box;
  min-height: 48px;
  /* Pushed to the foot of the card so every button lines up however
     long the descriptions are. (A fixed margin here would override
     the shared rule's `auto` and let short cards float their button
     halfway up.) */
  margin-top: auto;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08);
  /* the cart the design puts before the label; drawn here so the
     wording stays a plain admin field with no markup in it */
  /* an outlined button carries a 1px border, so it takes a hair less
     padding to finish the same 48px tall as the filled ones */
  /* a sold-out product has nothing to add to a basket */
}
.t4a-collection--product .t4a-collection__btn::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask: url("../img/products/shopping-cart.svg") center/contain no-repeat;
}
.t4a-collection--product .t4a-collection__btn.is-style-outline {
  padding-block: 11px;
}
.t4a-collection--product .t4a-collection__btn.is-disabled {
  box-shadow: none;
}
.t4a-collection--product .t4a-collection__btn.is-disabled::before {
  content: none;
}
.t4a-collection .t4a-collection__arrow {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
}

/* The button styles are the theme's own — reuse them rather than inventing a
   second set, so "รูปแบบปุ่ม" in the admin means the same thing everywhere. */
.t4a-collection__btn.is-style-primary {
  background: #f3ca61;
  color: #252525;
}
.t4a-collection__btn.is-style-secondary {
  background: #284d26;
  color: #fff;
}
.t4a-collection__btn.is-style-tertiary {
  background: #e0eadc;
  color: #284d26;
}
.t4a-collection__btn.is-style-outline {
  border: 1px solid currentColor;
  color: #284d26;
}
.t4a-collection__btn.is-style-text {
  color: #284d26;
}

@media (max-width: 1024px) {
  .t4a-collection {
    --t4a-col-per-view: 2;
  }
}
@media (max-width: 600px) {
  .t4a-collection {
    --t4a-col-per-view: 1;
    --t4a-col-gap: 16px;
    /* one product fills the column on a phone */
  }
  .t4a-collection--product .t4a-collection__card {
    max-width: none;
  }
}
/* The "read them all" button under the supporter stories. */
.t4a-stories .t4a-stories__cta {
  margin-top: clamp(1.75rem, 3.33vw, 3rem);
}

/* the heading half of the products section — the cards come from .t4a-collection */
.t4a-products .t4a-products__title {
  margin: 0;
  color: #111;
  font-family: "UID LETTER", cursive;
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  font-weight: 400;
  /*
   * 1.8, not the 1.2-1.3 the other script headings use. This is the one
   * that wraps to two lines, and UID LETTER hangs its Thai marks a long
   * way off the baseline: drawn to canvas and measured, the ink of the
   * two lines overlapped by 20px at 1.3, which is the sara of
   * "จากการฟื้นฟูธรรมชาติ" sitting inside the line above it. 1.8 is the
   * design's own figure — 881:6386 gives the two lines 144px at 40px —
   * and it leaves only the odd decorative swash crossing over.
   * The other script headings stay on one line, which is why they never
   * showed this.
   */
  line-height: 1.8;
}
.t4a-products .t4a-products__lead {
  max-width: 760px;
  margin: clamp(1rem, 2.22vw, 2rem) auto 0;
  color: #111;
  font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
  line-height: 1.7;
}
.t4a-products .t4a-products__lead strong {
  font-weight: 600;
}
.t4a-products .t4a-collection {
  margin-top: clamp(2rem, 4.17vw, 3.75rem);
}

/* =========================================================================
 * Join Us — opening band and the four ways to take part (881:6248)
 *
 * WHERE TO CHANGE WHAT
 *   wording, photos, how many cards → patterns/join-hero.php (or the editor)
 *   colours and sizes               → the custom properties below
 *
 * A photo that fades into dark green, the headline, then four photo cards
 * that share the row evenly however many there are.
 * ========================================================================= */
/* Below this the four cards go two across, then one. */
.t4a-join-hero {
  --t4a-join-ink: #162511;
  --t4a-join-card-h: 378px;
  /*
   * The photo is a band across the top, not the whole section. The design
   * (881:6250) draws it 822px tall inside a 1369px section on a 1440px
   * frame — the same 57vw band the Impact hero uses. WordPress paints a
   * section background with `cover`, which scaled the photo to the section's
   * full 1325px height instead: 2.27 times taller than the design, and
   * zoomed in by the same amount, so only the middle of the picture showed.
   * Sizing it to the band paints it at the design's scale. The source is
   * 2000x1135 (1.762) against the band's 1.752 at that width, close enough
   * that pinning the width there loses nothing worth measuring — but the
   * mobile band (375:378, near-square) is nowhere near 1.762, and pinning
   * the width the same way there stretched the photo ~78% taller than wide.
   * `auto` on the width keeps the source's own ratio at every band height,
   * cropping the sides instead of distorting them — see background-size below.
   */
  --t4a-join-photo-h: clamp(249px, 57vw, 822px);
  position: relative;
  /*
   * The design opens the copy at y=521 of a 1369px section — 36.2% of the
   * 1440px frame, i.e. the lower third of the photo. 22.9vw started it at
   * y=330, which left the title over the middle of the picture and pushed
   * the cards up inside the photo band instead of sitting below it.
   */
  padding-top: clamp(9rem, 36.2vw, 32.6rem);
  /*
   * Side padding, the same ramp as the donate panel below. The section's own
   * inline padding is 0, which was fine on the 1440 frame (the 1280px column
   * leaves 80px either side) but ran every line and card into the screen
   * edge on anything narrower. At 1440 this is 80px, so the column is still
   * exactly 1280px there; on a phone it is ~20px. !important to beat the
   * inline 0.
   */
  padding-left: clamp(1rem, 5.56vw, 5rem) !important;
  padding-right: clamp(1rem, 5.56vw, 5rem) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  /*
   * One ramp over the photo, clear at the top and solid #162511 by its foot,
   * then that same colour flat the rest of the way down — so the four cards
   * sit on plain #162511. There used to be a green wash over the top of the
   * picture and a ramp that only began at 15%; neither is in the design.
   */
  /* --- the four cards --------------------------------------------------- */
  /* Content sits at the foot of the photo, with a scrim underneath it so
     the white type stays readable whatever picture the client drops in. */
}
.t4a-join-hero :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-join-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(22, 37, 17, 0) 0%, #162511 100%), linear-gradient(#162511, #162511);
  background-size: 100% var(--t4a-join-photo-h), 100% calc(100% - var(--t4a-join-photo-h) + 1px);
  background-position: center top, center bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}
.t4a-join-hero > * {
  position: relative;
}
.t4a-join-hero .t4a-join-hero__eyebrow {
  margin: 0;
  font-family: "UID LETTER", cursive;
  font-size: clamp(2rem, 3.33vw, 3rem);
  line-height: 1.2;
}
.t4a-join-hero .t4a-join-hero__title {
  margin: 16px 0 0;
  font-size: clamp(1.375rem, 2.78vw, 2.5rem);
  line-height: 1.3;
}
.t4a-join-hero .t4a-join-hero__subhead {
  /* 91.5px at 1440 in the design (title foot 675.5 -> subhead top 767). */
  margin: clamp(2rem, 6.35vw, 5.72rem) 0 0;
  font-size: clamp(1.25rem, 2.22vw, 2rem);
  line-height: 1.3;
}
.t4a-join-hero .t4a-join-hero__lead {
  /* Design 881:6265 puts this at x=0, 1169 of the 1280 content width —
     left, not centred under the title above it. The !important is to
     answer WordPress's own constrained-layout rule, which sets
     margin-left/right: auto !important on every child of the section and
     was pulling the shorter line back into the middle. */
  max-width: 1169px;
  margin-block: 10px 0;
  margin-inline: 0 auto !important;
  font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
  line-height: 1.6;
}
.t4a-join-hero .t4a-join-hero__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin-top: 40px;
}
.t4a-join-hero .t4a-join-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--t4a-join-card-h);
  padding: 36px;
  border-radius: 32px;
  overflow: hidden;
  background-repeat: no-repeat;
}
.t4a-join-hero .t4a-join-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 37, 17, 0) 35%, rgba(22, 37, 17, 0.85) 100%);
  pointer-events: none;
}
.t4a-join-hero .t4a-join-card > * {
  position: relative;
}
.t4a-join-hero .t4a-join-card__title {
  margin: 0;
  font-size: clamp(1.125rem, 1.53vw, 1.375rem);
  line-height: 1.4;
}
.t4a-join-hero .t4a-join-card__link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 0.9375rem;
  /* the little arrow after the label */
}
.t4a-join-hero .t4a-join-card__link a {
  color: inherit;
  text-decoration: none;
}
.t4a-join-hero .t4a-join-card__link::after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  mask: url("../img/arrow-right.svg") no-repeat center/contain;
  -webkit-mask: url("../img/arrow-right.svg") no-repeat center/contain;
}

@media (max-width: 1100px) {
  .t4a-join-hero .t4a-join-hero__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .t4a-join-hero {
    --t4a-join-card-h: 240px;
    padding-top: clamp(7rem, 40vw, 12rem);
  }
  .t4a-join-hero .t4a-join-hero__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .t4a-join-hero .t4a-join-card {
    padding: 24px;
    border-radius: 24px;
  }
}
/* Phone width (design 892:1685 and 892:1670): the photo band and the four
   cards both get design-specific mobile sizes rather than the desktop
   values scaled down. The band's clamp() above floors at 249px — below its
   own ~437px pivot (249px / 57vw), `background-size: 100% <height>` was
   forcing that fixed 249px height onto every narrower width too, stretching
   the photo out of its 1.762 aspect ratio. Re-deriving the height from
   viewport width (100vw, capped near the design's 378px at a 375px phone)
   keeps the crop proportional instead of distorted. The four cards drop to
   a 160px band each — the ≤860px card above is sized for the 2-column
   tablet row it replaces, which reads too tall once the row is down to one
   card per line. */
@media (max-width: 480px) {
  .t4a-join-hero {
    --t4a-join-photo-h: clamp(280px, 100.8vw, 380px);
    --t4a-join-card-h: 160px;
  }
  .t4a-join-hero .t4a-join-hero__cards {
    gap: 16px;
  }
  .t4a-join-hero .t4a-join-card {
    padding: 20px;
    border-radius: 16px;
  }
  .t4a-join-hero .t4a-join-card__link {
    font-size: 0.75rem;
  }
}
/* =========================================================================
 * "บริจาคเงินปลูกต้นไม้" panel
 * Design: desktop 881:6295 · mobile 881:8881
 *
 * WHERE TO CHANGE WHAT
 *   wording, the seedling, the four notes → patterns/donate-panel.php
 *                                           (or the page editor)
 *   colours and sizes                     → the custom properties below
 *
 * The seedling is a cut-out that sits on the section's own green. The four
 * handwritten notes around it are painted into the artwork, so there is
 * nothing to position here — only the two crops to swap at the breakpoint.
 * ========================================================================= */
.t4a-donate {
  --t4a-donate-bg: #284d26;
  /* the cut-out runs to the very bottom edge of the band */
  padding-bottom: 0;
  overflow: hidden;
  /* --- the picture and the notes around it ----------------------------- */
  /*
   * The design's annotation group (888:363) is 1000px wide with the seedling
   * 676 of it, so the four notes sit outside the picture. The section's own
   * 900px content size would squeeze that, hence the override.
   */
  /* one crop per breakpoint */
  /*
   * The four handwritten notes. Percentages, so they hold their place
   * against the seedling at any width; the numbers are the design's own
   * coordinates divided by the 1000x408 group.
   */
}
.t4a-donate :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-donate .t4a-donate__title {
  margin: 0;
  font-family: "UID LETTER", cursive;
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  line-height: 1.2;
}
.t4a-donate .t4a-donate__lead {
  /* 15px clears the title's own line-height box (matches the 87-72=15px
     gap between the two text nodes in the Figma frame), but "UID
     LETTER" is a swirly script face whose descenders (the tail on ป,
     for one) draw well past that box in the browser — Figma's flattens
     its own text to a bitmap on export, so the design screenshot never
     shows this. 30px is enough clearance for those tails at every size
     this title renders at (clamp 1.75rem–2.5rem). */
  margin: 30px 0 0;
  font-size: clamp(0.9375rem, 1.67vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
}
.t4a-donate .t4a-donate__lead strong {
  font-weight: 600;
}
.t4a-donate .t4a-donate__actions {
  margin-top: 24px;
}
.t4a-donate .t4a-donate__stage {
  position: relative;
  max-width: none !important;
  width: min(100%, 1008px);
  margin: clamp(1.5rem, 3.33vw, 3rem) auto 0;
  /* the notes are placed against this box, so it has to keep the
     artwork's proportions — 406/1000 in the design */
  aspect-ratio: 1000/406;
}
.t4a-donate .t4a-donate__art--narrow {
  display: none;
}
.t4a-donate .t4a-donate__note {
  position: absolute;
  width: 26%;
  margin: 0;
  transform: translateX(-50%);
  font-family: "UID LETTER", cursive;
  font-size: clamp(0.875rem, 1.67vw, 1.5rem);
  line-height: 1.3;
  white-space: nowrap;
  /* every arrow is the same drawing, turned to point at the seedling */
}
.t4a-donate .t4a-donate__note::after {
  content: "";
  position: absolute;
  width: 1.81em;
  height: 4.3em;
  background: url("../img/donate/note-arrow.svg") no-repeat center/contain;
}
.t4a-donate .t4a-donate__note--tree {
  left: 18.2%;
  top: 0;
}
.t4a-donate .t4a-donate__note--tree::after {
  left: 78%;
  top: 130%;
  transform: rotate(113.77deg);
}
.t4a-donate .t4a-donate__note--farmer {
  left: 81.1%;
  top: 3.7%;
}
.t4a-donate .t4a-donate__note--farmer::after {
  right: 74%;
  top: 118%;
  transform: scaleY(-1) rotate(84.2deg);
}
.t4a-donate .t4a-donate__note--gps {
  left: 12.8%;
  top: 73.3%;
}
.t4a-donate .t4a-donate__note--gps::after {
  left: 74%;
  bottom: 118%;
  transform: rotate(64.96deg);
}
.t4a-donate .t4a-donate__note--report {
  left: 83.6%;
  top: 68.4%;
}
.t4a-donate .t4a-donate__note--report::after {
  right: 78%;
  bottom: 112%;
  transform: scaleY(-1) rotate(115.04deg);
}

/* -------------------------------------------------------------------------
 * Donate panel — mobile (881:8881): the taller crop, notes pulled in tight.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .t4a-donate {
    /*
     * No room to hang notes off the sides of a phone-width picture, so the
     * stage goes back to normal flow and they read as a list under it.
     * The arrows would be pointing at nothing, so they come off.
     */
  }
  .t4a-donate .t4a-donate__art--wide {
    display: none;
  }
  .t4a-donate .t4a-donate__art--narrow {
    display: block;
  }
  .t4a-donate .t4a-donate__lead {
    line-height: 1.5;
  }
  .t4a-donate .t4a-donate__stage {
    aspect-ratio: auto;
  }
  .t4a-donate .t4a-donate__art {
    position: static;
    width: 100%;
  }
  .t4a-donate .t4a-donate__art img {
    height: auto;
  }
  .t4a-donate .t4a-donate__note {
    position: static;
    width: auto;
    transform: none;
    white-space: normal;
    margin-top: 8px;
  }
  .t4a-donate .t4a-donate__note::after {
    content: none;
  }
}
/* =========================================================================
 * Nan page — "ผลลัพธ์ต่อชุมชน" (924:5310)
 *
 * WHERE TO CHANGE WHAT
 *   wording, photos, how many cards → patterns/nan-community.php
 *                                     (or the page editor)
 *   colours and sizes               → the custom properties below
 *
 * A banner photo that fades into the section's dark green, then polaroid
 * cards two to a row. Nothing here counts the cards, so adding one in the
 * editor just works.
 * ========================================================================= */
.t4a-community {
  --t4a-community-ink: #162511;
  --t4a-community-frame: #fff;
  /* The theme's default block gap lands as margin-top on every block after
     the first — inside the card grid that pushed the second card 20px below
     the first. Clear it everywhere in the section and set spacing here. */
  /* --- banner ---------------------------------------------------------- */
  /* runs edge to edge behind the section padding and fades out downwards */
  /* --- the cards -------------------------------------------------------- */
  /* 524x322 card with the photo inset 14px on three sides and a 43px foot */
}
.t4a-community :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-community .t4a-community__banner {
  position: relative;
  max-width: none !important;
  margin-inline: calc(-1 * clamp(1rem, 5.56vw, 5rem)) !important;
  padding: clamp(11rem, 40.3vw, 36.25rem) clamp(1rem, 5.56vw, 5rem) clamp(2.5rem, 4.86vw, 4.375rem);
  background-repeat: no-repeat;
}
.t4a-community .t4a-community__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 37, 17, 0) 23%, var(--t4a-community-ink) 92%);
  pointer-events: none;
}
.t4a-community .t4a-community__banner > * {
  position: relative;
}
.t4a-community .t4a-community__eyebrow {
  margin: 0;
  font-family: "UID LETTER", cursive;
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  line-height: 1.2;
}
.t4a-community .t4a-community__title {
  margin: 15px 0 0;
  font-size: clamp(1.25rem, 2.22vw, 2rem);
  line-height: 1.3;
}
.t4a-community .t4a-community__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5.56vw, 5rem) 40px;
  margin-top: clamp(2.5rem, 4.86vw, 4.375rem);
}
.t4a-community .t4a-community__card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.t4a-community .t4a-community__photo {
  width: 100%;
  max-width: 524px;
  margin: 0;
  padding: clamp(10px, 0.99vw, 14px) clamp(10px, 0.99vw, 14px) clamp(30px, 2.99vw, 43px);
  border-radius: 3.6px;
  background: var(--t4a-community-frame);
  filter: drop-shadow(0 5.4px 7.1px rgba(0, 0, 0, 0.08));
}
.t4a-community .t4a-community__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 495/264;
  object-fit: cover;
}
.t4a-community .t4a-community__card-title {
  margin: 50px 0 0;
  font-size: clamp(1.25rem, 1.94vw, 1.75rem);
  line-height: 1.3;
}
.t4a-community .t4a-community__card-text {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Community results — mobile: one card per row.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .t4a-community .t4a-community__banner {
    padding-top: clamp(9rem, 64vw, 20rem);
  }
  .t4a-community .t4a-community__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .t4a-community .t4a-community__card-title {
    margin-top: 24px;
  }
}
/* =========================================================================
 * Footer
 * Design: desktop 885:597 · mobile 885:719
 *
 * The markup is the footer template part (Appearance → Editor → Patterns →
 * Template parts → Footer); the class hooks it carries — .t4a-footer__main,
 * __brand, __nav, __menu, __actions, __bottom, __legal, __policies, __lang,
 * __social, __copyright — exist so this file can lay it out without
 * depending on the order WordPress happens to nest its groups in.
 * ========================================================================= */
.t4a-footer {
  /* --- the menu / button row ------------------------------------------ */
  /* The three columns arrive from the navigation blocks with percentage
     widths (33% + 33% + 30%) that, once the 48px gaps are added, overflow
     the container and push the buttons past its right edge. Sizing them to
     their own content and packing the row right instead lines the last
     column up with the social icons underneath, as the design has it. */
  /* --- the two pill buttons ------------------------------------------- */
  /* They come from a navigation menu, so they arrive as bare button links;
     these give both the same pill and width, with the first outlined. */
  /* the one with no background of its own is the outlined variant */
  /* The theme turns every filled button inside `footer` accent-5 (yellow) on
     hover, with `!important` and a selector carrying five `:not()` classes.
     The pair here belongs to the dark bar, so it should behave like the
     header's instead: keep the white fill and just press it in. The class is
     repeated to clear that selector's weight. */
  /* the design draws the socials as plain circles, not core's pill shape */
  /* The website link ("Link" in the social icons block) is a globe in the
     design, not core's chain link. Core offers no way to pick that glyph,
     so its svg is swapped for assets/img/footer/icon-globe.svg, drawn in
     the icon colour — the link itself stays editable in the block. */
  /* The current page is marked gold in the footer menus too, same ink as
     the header nav (--t4a-nav-active-ink) — so the footer keeps saying
     where you are, not just the header bar up top. */
}
.t4a-footer .t4a-footer__nav {
  justify-content: flex-end;
  /* 48px from the block layout, widened to give the columns more air */
  gap: 98px;
  /* Both menus carry the block's "justify right" setting, which raggedly
     right-aligns the labels now that the column is only as wide as its
     longest item. The design keeps each column left-aligned. */
}
.t4a-footer .t4a-footer__nav .t4a-footer__menu,
.t4a-footer .t4a-footer__nav .t4a-footer__actions {
  flex: 0 0 auto;
}
.t4a-footer .t4a-footer__nav .t4a-footer__menu,
.t4a-footer .t4a-footer__nav .t4a-footer__menu .wp-block-navigation__container {
  align-items: flex-start;
}
.t4a-footer .t4a-footer__actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 148px;
  min-height: 44px;
  padding: 10px 24px;
  font-size: 15px;
  border-radius: 100px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.t4a-footer .t4a-footer__actions .wp-block-button__link:not(.has-background) {
  border: 1px solid #fff;
}
.t4a-footer .t4a-footer__actions .wp-block-buttons .wp-block-button .wp-block-button__link.has-base-alt-background-color.has-base-alt-background-color:hover, .t4a-footer .t4a-footer__actions .wp-block-buttons .wp-block-button .wp-block-button__link.has-base-alt-background-color.has-base-alt-background-color:focus-visible {
  background-color: var(--wp--preset--color--base-alt) !important;
  color: var(--wp--preset--color--contrast) !important;
  filter: brightness(0.9);
}
.t4a-footer .t4a-footer__social .wp-social-link {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.t4a-footer .t4a-footer__social .wp-social-link a {
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
}
.t4a-footer .t4a-footer__social .wp-social-link-link {
  /* 20px: a touch under the other glyphs' 24px, since the globe is a
     full circle and reads larger than a logo of the same box */
}
.t4a-footer .t4a-footer__social .wp-social-link-link svg {
  display: none;
}
.t4a-footer .t4a-footer__social .wp-social-link-link a::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask: url("../img/footer/icon-globe.svg") no-repeat center/contain;
  -webkit-mask: url("../img/footer/icon-globe.svg") no-repeat center/contain;
}
.t4a-footer .t4a-footer__policies a {
  text-decoration: none;
}
.t4a-footer .t4a-footer__menu .current-menu-item > .wp-block-navigation-item__content {
  color: #f3ca61;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Footer — mobile (885:719)
 *
 * One column throughout: the brand block, then the menu as a single list,
 * the two buttons side by side, and everything below it centred. The design
 * also reorders the last rows — socials, language, policies, copyright —
 * which is why they are placed with `order` rather than moved in the markup.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
  .t4a-footer {
    /* the two link columns read as one list on a phone */
    /* The buttons sit side by side and share the width. Both live in one
       Buttons block that the editor marked `is-vertical`, so the row has
       to be set there rather than on the navigation around it. */
    /* six icons have to share 343px, so they shrink from 56px and sit tight */
    /* language above the policy links, as the design has it */
  }
  .t4a-footer .t4a-footer__main {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .t4a-footer .t4a-footer__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .t4a-footer .t4a-footer__menu {
    gap: 12px !important;
  }
  .t4a-footer .t4a-footer__nav .t4a-footer__menu + .t4a-footer__menu {
    margin-top: -12px;
  }
  .t4a-footer .t4a-footer__actions {
    flex-direction: row !important;
    gap: 12px !important;
  }
  .t4a-footer .t4a-footer__actions .wp-block-buttons {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row !important;
    gap: 12px;
    width: 100%;
  }
  .t4a-footer .t4a-footer__actions .wp-block-button {
    flex: 1 1 0;
    min-width: 0;
  }
  .t4a-footer .t4a-footer__actions .wp-block-button__link {
    width: 100%;
    min-width: 0;
    padding-inline: 12px;
  }
  .t4a-footer .t4a-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .t4a-footer .t4a-footer__legal {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    order: 2;
  }
  .t4a-footer .t4a-footer__social {
    order: 1;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px !important;
  }
  .t4a-footer .t4a-footer__social .wp-social-link {
    width: 48px;
    height: 48px;
  }
  .t4a-footer .t4a-footer__lang {
    order: 1;
  }
  .t4a-footer .t4a-footer__policies {
    order: 2;
    justify-content: center;
  }
  .t4a-footer .t4a-footer__policies a {
    text-decoration: underline;
  }
  .t4a-footer .t4a-footer__copyright {
    justify-content: center;
    text-align: center;
  }
}
/* -------------------------------------------------------------------------
 * Header menu — dropdown + active state
 * Figma 885:889 (dropdown component) / 885:909 (active item)
 *
 * The panel is a translucent rounded card holding one rounded "pill" per
 * item, 4px apart — not a list with divider lines. Every value below comes
 * straight from the component in Figma.
 *
 * The markup is a plain core Navigation block, so everything here is styling
 * only: the client can keep adding, renaming and reordering menu items in
 * Appearance → Editor → Navigation and they pick up these styles for free.
 *
 * `.t4a-nav` is set on the header's main Navigation block (template part
 * "Header"), which keeps these rules away from the footer and language menus.
 *
 * Two things core makes us fight for:
 *  - its own submenu rules are `.wp-block-navigation.has-background .has-child
 *    .wp-block-navigation__submenu-container`, so ours repeat classes to
 *    out-specify them;
 *  - the panel's colour comes from the preset class `has-dark-base-background-color`,
 *    which global styles emit with `!important`, so ours needs it too.
 * ------------------------------------------------------------------------- */
/* Design tokens, in one place so a re-skin is a few lines. */
.t4a-nav {
  --t4a-nav-panel-bg: rgba(33, 75, 46, 0.91);
  --t4a-nav-panel-line: rgba(255, 255, 255, 0.18);
  --t4a-nav-item-bg: #17371f;
  --t4a-nav-active-bg: #315437;
  --t4a-nav-active-ink: #f3ca61;
  /* Distance from the bottom of a menu link to the bottom of the 80px header
     bar: the link is 21px tall, centred in 48px of content with 16px padding
     below it. Using it as the drop offset parks the panel flush under the
     header rather than floating in the page. */
  --t4a-nav-drop: 29px;
}

/* The current page is marked in gold wherever it appears — on the top-level
   item as well, so the header still says where you are once the panel closes. */
.t4a-nav .current-menu-item > .wp-block-navigation-item__content,
.t4a-nav .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--t4a-nav-active-ink);
}

/* The top-level item for the page you are on is also bold and underlined.
   `.wp-block-navigation__container` is the outer list only — submenus are
   `…__submenu-container` — so the pills keep their own treatment (gold fill,
   no rule under the label). Note the list is not a direct child of the block:
   core wraps it in the responsive container. */
.t4a-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content,
.t4a-nav .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content {
  /* Drawn as an underline rather than a border so the item's box keeps the
     same height as its neighbours — a border here made the row taller and
     nudged the whole menu out of line. */
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* The dropdown panel is a desktop affordance; below 782px the Navigation
   block switches to its own full-screen overlay, which we leave alone. */
@media (min-width: 782px) {
  .t4a-nav.wp-block-navigation {
    /* The five links sit 40px apart, as the design spaces them. Without
       this they inherit the header row's blockGap (spacing-50), which
       clamps to 32px and reads noticeably tighter. */
    /* --- the panel ------------------------------------------------- */
    /* The class is repeated to out-specify core's own open-state rule,
       which pins the panel to `width: auto; min-width: 200px`. */
    /* Invisible bridge across the gap, so the pointer can travel from the
       link down into the panel. It only exists while that item is open, so
       it never sits over the page and swallows a stray hover. */
    /* --- one item, a rounded pill ---------------------------------- */
    /* Core gives every nav item `background-color: inherit`, so the square
       <li> picks up the panel's fill and paints behind the rounded <a>.
       At rest both are the same colour and it does not show, but on hover
       the pill lightens and the square corners appear around it. Only the
       <a> should paint. */
    /* A row that opens a deeper level gets the SAME arrow as every other
       row. It used to fall back to core's own caret, which drew a small
       pale chevron in a box — the odd one out in the panel. Core's icon is
       hidden here so only our arrow shows. */
    /* Hover and the current page look the same: lighter pill, gold label,
       solid gold arrow. Only the weight differs — bolding on hover would
       reflow the label under the pointer. A row that leads to the current
       page (ผลลัพธ์ → พื้นที่ → น่าน) is marked the same way. */
    /* the current page is the SemiBold one */
    /* a nested submenu (ผลลัพธ์ → พื้นที่น่าน) opens beside its parent row */
  }
  .t4a-nav.wp-block-navigation .wp-block-navigation__container {
    gap: 40px;
  }
  .t4a-nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    top: calc(100% + var(--t4a-nav-drop));
    left: 0;
    /* 280px is the design width; longer labels widen the panel rather
       than wrapping, up to a sensible ceiling. */
    width: max-content;
    min-width: 280px;
    max-width: 360px;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--t4a-nav-panel-line);
    border-radius: 18px;
    background-color: var(--t4a-nav-panel-bg) !important;
    /* visible, or a nested submenu would be clipped away */
    overflow: visible;
    box-shadow: 0 18px 40px -8px rgba(7, 24, 12, 0.22);
  }
  .t4a-nav.wp-block-navigation > .wp-block-navigation__container > .has-child:hover::after,
  .t4a-nav.wp-block-navigation > .wp-block-navigation__container > .has-child:focus-within::after,
  .t4a-nav.wp-block-navigation > .has-child:hover::after,
  .t4a-nav.wp-block-navigation > .has-child:focus-within::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--t4a-nav-drop);
  }
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
    width: 100%;
    background-color: transparent;
  }
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: var(--t4a-nav-item-bg);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    /* The arrow the design puts at the end of every row. Both states use
       their own exported Figma icon as a mask: the resting one carries
       the design's 72% stroke opacity in its own alpha, the active one
       is solid, so tinting each with a flat colour reproduces both
       exactly. */
  }
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: #fff;
    mask: url("../img/nav/arrow-right.svg") center/contain no-repeat;
  }
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
    display: none;
  }
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content {
    background-color: var(--t4a-nav-active-bg);
    color: var(--t4a-nav-active-ink);
  }
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after,
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::after,
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content::after,
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content::after {
    background-color: var(--t4a-nav-active-ink);
    mask-image: url("../img/nav/arrow-right-active.svg");
  }
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content {
    font-weight: 600;
  }
  .t4a-nav.wp-block-navigation .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    top: -8px;
    left: 100%;
  }
}
/* -------------------------------------------------------------------------
 * Mobile menu drawer — Figma 904:2518
 *
 * Opened by the header's hamburger. The markup is the "Navigation Overlay"
 * template part: site logo + close button, the main menu (#36) and the button
 * menu (#214) — the same two menus the desktop header uses, so the client
 * edits each one in a single place and both layouts follow.
 *
 * Because this is a custom overlay, WordPress tags it `disable-default-overlay`
 * and skips its own "expand every submenu" rule, which leaves the submenus
 * behaving like the desktop dropdown. The rules below lay them back out as
 * inline pills that the chevron opens and closes.
 * ------------------------------------------------------------------------- */
.t4a-drawer {
  --t4a-drawer-bg: #193318;
  --t4a-drawer-line: rgba(255, 255, 255, 0.1);
  --t4a-drawer-item-bg: #17371f;
  --t4a-drawer-active-bg: #315437;
  --t4a-drawer-active-ink: #f3ca61;
  position: relative;
  box-sizing: border-box;
  background-color: var(--t4a-drawer-bg);
  color: #fff;
  overflow-x: hidden;
  /* the soft glow the design bleeds off the top-left corner */
  /* everything else sits above the glow */
  /* --- top row: logo and close ------------------------------------- */
  /* --- the menu ----------------------------------------------------- */
  /* the current page is gold at the top level too */
  /* --- language switcher and the two buttons ------------------------ */
  /* WordPress copies a Navigation block's class onto its <ul> as well, so
     `.wp-block-navigation` picks out the wrapper and not the list. */
}
.t4a-drawer::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: url("../img/nav/drawer-glow.svg") center/contain no-repeat;
  pointer-events: none;
}
.t4a-drawer > * {
  position: relative;
}
.t4a-drawer .t4a-drawer__top {
  padding-block: 12px;
  margin-bottom: 32px;
}
.t4a-drawer .wp-block-navigation-overlay-close,
.t4a-drawer .wp-block-navigation__responsive-container-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  color: #fff;
}
.t4a-drawer .wp-block-navigation-overlay-close svg,
.t4a-drawer .wp-block-navigation__responsive-container-close svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.t4a-drawer .t4a-drawer__nav {
  width: 100%;
  /* one top-level row; `wrap` lets the submenu drop onto its own line */
  /* the chevron, rotated when its section is open */
  /* Core's chevron points up, so the resting state is the flipped one and
     an open section shows it as drawn. */
  /* --- submenu: inline pills, shown only when the row is open ----
     `.has-child >` is in the selector to out-weigh core's own
     `.wp-block-navigation .has-child .…__submenu-container{display:flex}`.
     Hidden only once assets/js/drawer-menu.js has marked the menu as
     enhanced, so without JavaScript every section stays reachable. */
  /* as on desktop: the square <li> must not paint behind the rounded pill */
  /* same pairing as the desktop dropdown: pressed and current look alike,
     and so does a row on the way to the current page */
  /* A pill that opens a deeper level (ผลลัพธ์ → พื้นที่ → น่าน) keeps its
     chevron inside the pill rather than letting it push the pill short,
     and indents the level it opens. */
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__container {
  width: 100%;
  gap: 0;
}
.t4a-drawer .t4a-drawer__nav > .wp-block-navigation__container > .wp-block-navigation-item {
  flex-wrap: wrap;
  width: 100%;
  border-bottom: 1px solid var(--t4a-drawer-line);
}
.t4a-drawer .t4a-drawer__nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  flex: 1;
  padding: 20px 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation-submenu__toggle {
  width: 28px;
  padding: 0 8px 0 0;
  background: none;
  border: 0;
  color: #fff;
  transition: transform 0.2s ease;
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation-submenu__toggle {
  transform: rotate(180deg);
}
.t4a-drawer .t4a-drawer__nav .has-child.is-open > .wp-block-navigation-submenu__toggle {
  transform: rotate(0deg);
}
.t4a-drawer .t4a-drawer__nav.is-enhanced .has-child > .wp-block-navigation__submenu-container {
  display: none;
}
.t4a-drawer .t4a-drawer__nav .has-child > .wp-block-navigation__submenu-container {
  position: static;
  flex-basis: 100%;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
}
.t4a-drawer .t4a-drawer__nav.is-enhanced .has-child.is-open > .wp-block-navigation__submenu-container {
  display: flex;
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
  width: 100%;
  background-color: transparent;
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px 12px 12px 20px;
  border-radius: 12px;
  background-color: var(--t4a-drawer-item-bg) !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 500;
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content {
  background-color: var(--t4a-drawer-active-bg) !important;
  color: var(--t4a-drawer-active-ink) !important;
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content {
  font-weight: 600;
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .has-child {
  position: relative;
  flex-wrap: wrap;
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content {
  flex: 1 1 100%;
  padding-right: 44px;
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-submenu__toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* a 24px target rather than the 6px the bare icon would give */
  width: 24px;
  height: 24px;
  padding: 0;
}
.t4a-drawer .t4a-drawer__nav .wp-block-navigation__submenu-container .has-child > .wp-block-navigation__submenu-container {
  margin: 4px 0 0;
  padding-left: 16px;
}
.t4a-drawer .current-menu-item > .wp-block-navigation-item__content,
.t4a-drawer .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--t4a-drawer-active-ink) !important;
}
.t4a-drawer .wp-block-navigation.t4a-drawer__actions {
  width: 100%;
  gap: 20px;
  padding: 20px 8px 0;
}
.t4a-drawer .t4a-drawer__actions {
  /* The design has no language switcher here, but the header's copy is
     hidden on small screens, so this is the only way to change language
     on a phone. It sits as one compact row above the buttons. */
  /* The buttons carry their padding as an inline style from the block, so
     the drawer's taller tap target has to be marked important. */
}
.t4a-drawer .t4a-drawer__actions ul.wp-block-navigation__container {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.t4a-drawer .t4a-drawer__actions .wp-block-buttons {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: 100%;
}
.t4a-drawer .t4a-drawer__actions .wp-block-button {
  flex: 1;
}
.t4a-drawer .t4a-drawer__actions .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 12px !important;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
}
.t4a-drawer .t4a-drawer__actions .wp-block-button__link:not(.has-background) {
  border: 1.5px solid #fff;
}

/* The header's two CTA buttons move into the drawer on small screens (the
   drawer's own nav, ref 214 in the Navigation Overlay template part, is the
   very same menu), so hiding them here avoids showing that pair twice. The
   language switch stays, though — the design (881:7489, "Topmenu-header")
   keeps it in the collapsed bar itself, snug against the hamburger, not
   tucked behind it. Reordered ahead of .t4a-nav (which carries the hamburger
   button) so it lands on the right side of the logo instead of on the far
   right past the hamburger, and the row's own justify-content is relaxed so
   the auto margin below can push just the [switch, hamburger] pair over
   instead of spreading all three items apart.

   Both blocks arrive with the editor's own selfStretch:fill/fit turned into
   `flex-grow:1` — each was quietly claiming an equal, wide share of the row
   and then right-aligning its own content inside that share, which read as
   a loose spread even once ordered and margined correctly (the boxes really
   were adjacent; only their padded, right-aligned insides looked far apart).
   Pinning both to their natural content width is what actually closes the
   gap. */
@media (max-width: 781px) {
  header.wp-block-group > .wp-block-group {
    justify-content: flex-start;
  }
  header .t4a-header-actions {
    display: flex;
    flex-grow: 0;
    flex-basis: auto;
    width: auto;
    order: 2;
    margin-inline-start: auto !important;
  }
  header .t4a-header-actions .wp-block-buttons {
    display: none;
  }
  header .t4a-nav {
    flex-grow: 0;
    flex-basis: auto;
    width: auto;
    order: 3;
  }
}
/* -------------------------------------------------------------------------
 * กิจกรรมเรียนรู้ — Figma 881:6318
 *
 * Two polaroids on the left, copy + tags + CTA on the right. Every piece of
 * geometry lives here rather than in the markup, so the client can replace a
 * photo, retype a tag or duplicate one in the editor without the layout
 * shifting: the polaroid frame, tilt and overlap are applied to whatever
 * picture the Image block happens to hold, and the tag pills are drawn around
 * plain paragraphs.
 * ------------------------------------------------------------------------- */
.t4a-learn {
  --t4a-learn-ink: #111;
  --t4a-learn-pill-line: #ced6cb;
  --t4a-learn-dot: #649852;
  overflow: hidden;
  /* the section's own blocks stack on their own margins, not the theme gap */
  /* --- the two polaroids -------------------------------------------- */
  /* A fixed-ratio box holds the pair so the tilted, overlapping frames
     cannot drag the row's height around when a photo is swapped. */
  /* --- the copy ------------------------------------------------------ */
  /* --- activity tags -------------------------------------------------- */
  /* The pill and its dot are drawn here, so a duplicated paragraph becomes
     a new tag with no extra markup. */
  /* --- the gold button ------------------------------------------------ */
  /* --- the closing note ----------------------------------------------- */
}
.t4a-learn :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-learn .t4a-learn__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3.61vw, 3.25rem);
}
.t4a-learn .t4a-learn__photos {
  position: relative;
  flex: 0 0 auto;
  width: clamp(17.5rem, 33.6vw, 30.25rem);
  aspect-ratio: 484/656;
}
.t4a-learn .t4a-learn__photo {
  position: absolute;
  margin: 0;
  /*
   * A polaroid's bottom border is the wide one. Equal padding all round
   * made these square cards with a mount, not polaroids: the design
   * (881:6321) leaves 24px at the sides and top of a 346x405 card and
   * 84px underneath. Percentages here resolve against .t4a-learn__photos,
   * so they are the design's numbers over its 484px container.
   */
  padding: 5% 5% 19.4%;
  border-radius: 2.5px;
  background: #fff;
  box-shadow: 0 5px 14.6px rgba(0, 0, 0, 0.15);
}
.t4a-learn .t4a-learn__photo img {
  display: block;
  width: 100%;
  /* square window, whatever shape the replacement picture is */
  aspect-ratio: 1;
  object-fit: cover;
}
.t4a-learn .t4a-learn__photo--top {
  top: 0;
  left: 0;
  width: 71.5%;
  transform: rotate(4.77deg);
}
.t4a-learn .t4a-learn__photo--bottom {
  right: 0;
  bottom: 0;
  width: 66.6%;
  /* the smaller card keeps its own proportions (322x379, foot 78.5) */
  padding: 4.5% 4.5% 18.2%;
  transform: rotate(-6.26deg);
}
.t4a-learn .t4a-learn__text {
  flex: 0 1 562px;
  min-width: 0;
}
.t4a-learn .t4a-learn__title {
  margin: 0;
  color: var(--t4a-learn-ink);
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER", cursive);
  font-size: clamp(2rem, 2.78vw, 2.5rem);
  font-weight: 400;
  line-height: 1.3;
}
.t4a-learn .t4a-learn__lead {
  margin: 30px 0 0;
  color: var(--t4a-learn-ink);
  font-size: clamp(1rem, 1.67vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
}
.t4a-learn .t4a-learn__lead strong {
  font-weight: 600;
}
.t4a-learn .t4a-learn__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.t4a-learn .t4a-learn__tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--t4a-learn-pill-line);
  border-radius: 100px;
  background: #fff;
  color: var(--t4a-learn-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.t4a-learn .t4a-learn__tag::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t4a-learn-dot);
}
.t4a-learn .t4a-learn__cta {
  margin-top: 24px;
}
.t4a-learn .t4a-learn__cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 220px;
  padding: 14px 32px;
  border-radius: 100px;
  font-size: 18px;
  font-weight: 600;
  /* the "people" icon the design puts before the label, as its own
     exported Figma glyph so the label stays plain editable text */
}
.t4a-learn .t4a-learn__cta .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask: url("../img/join/users.svg") center/contain no-repeat;
}
.t4a-learn .t4a-learn__note {
  margin: 24px 0 0;
  color: #000;
  font-size: 18px;
  line-height: 1.6;
}
.t4a-learn .t4a-learn__note a {
  color: inherit;
  text-decoration: underline;
}

/* Narrow tablets: the two columns no longer fit side by side, so the
   polaroids move above the copy. Type stays at its desktop size here. */
@media (max-width: 860px) {
  .t4a-learn .t4a-learn__row {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .t4a-learn .t4a-learn__photos {
    width: min(100%, 26rem);
  }
  .t4a-learn .t4a-learn__text {
    flex: 1 1 auto;
    width: 100%;
  }
  .t4a-learn .t4a-learn__lead br {
    display: none;
  }
}
/* Phones — Figma 892:1756.
   The same pieces, but centred: the photo cluster fills the column, the copy
   is smaller and centred, and the tags run one per row instead of wrapping.
   The button keeps its 220px pill rather than stretching. */
@media (max-width: 600px) {
  .t4a-learn {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    /* the cluster keeps its proportions; only the column width changes */
    /* one tag per row, each hugging its own text */
  }
  .t4a-learn .t4a-learn__row {
    gap: 24px;
  }
  .t4a-learn .t4a-learn__photos {
    width: 100%;
  }
  .t4a-learn .t4a-learn__text {
    text-align: center;
  }
  .t4a-learn .t4a-learn__title {
    font-size: 24px;
    color: #333;
  }
  .t4a-learn .t4a-learn__lead {
    margin-top: 16px;
    color: #333;
    font-size: 16px;
    line-height: 1.5;
  }
  .t4a-learn .t4a-learn__tags {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }
  .t4a-learn .t4a-learn__tag {
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
  }
  .t4a-learn .t4a-learn__tag::before {
    width: 6px;
    height: 6px;
  }
  .t4a-learn .t4a-learn__cta {
    margin-top: 16px;
    justify-content: center;
  }
  .t4a-learn .t4a-learn__cta .wp-block-button__link {
    width: 220px;
    min-width: 0;
  }
  .t4a-learn .t4a-learn__note {
    margin-top: 16px;
    font-size: 14px;
    /* the design lets the link flow on from the sentence here */
  }
  .t4a-learn .t4a-learn__note br {
    display: none;
  }
}
/* -------------------------------------------------------------------------
 * เสนอกิจกรรม — Figma 881:6348 (desktop) / 892:1784 (mobile)
 *
 * A full-bleed group photo that fades into the section's dark green, with the
 * copy, idea tags and button sitting over the faded part. The fade is painted
 * here rather than baked into the picture, so the client can drop in any
 * photo from the editor and the white text still reads over it.
 * ------------------------------------------------------------------------- */
.t4a-suggest {
  --t4a-suggest-bg: #162511;
  --t4a-suggest-pill-bg: rgba(255, 255, 255, 0.1);
  --t4a-suggest-pill-line: #334b2b;
  --t4a-suggest-dot: #649852;
  position: relative;
  overflow: hidden;
  /* --- the photo band ------------------------------------------------ */
  /* --- the copy, lifted onto the faded part of the photo -------------- */
  /* The design starts the text 242px up into an 822px band at 1440px wide;
     the phone layout uses almost the same proportion, so one vw-based pull
     serves both. */
  /* --- idea tags ------------------------------------------------------ */
  /* pill and dot are drawn here, so a duplicated paragraph becomes a tag */
  /* --- the gold button ------------------------------------------------ */
}
.t4a-suggest :where(.wp-block-group) > * {
  margin-block: 0;
}
.t4a-suggest .t4a-suggest__photo {
  position: relative;
  width: 100%;
  /* the fade: a light veil over the whole picture so white text can sit
     anywhere on it, deepening into the section colour at the bottom */
}
.t4a-suggest .t4a-suggest__photo figure,
.t4a-suggest .t4a-suggest__photo img {
  display: block;
  margin: 0;
  width: 100%;
}
.t4a-suggest .t4a-suggest__photo img {
  /* the design's band is 1447 x 822 */
  aspect-ratio: 1447/822;
  object-fit: cover;
  /* the design shows the bottom ~72% of the picture, which is where
     the people are; anchoring to the bottom reproduces that crop and
     keeps a replacement photo's subject in frame too */
  object-position: center bottom;
}
.t4a-suggest .t4a-suggest__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(22, 37, 17, 0.15) 0%, rgba(22, 37, 17, 0.18) 38%, rgba(22, 37, 17, 0.78) 72%, var(--t4a-suggest-bg) 96%);
  pointer-events: none;
}
.t4a-suggest .t4a-suggest__body {
  position: relative;
  z-index: 1;
  margin-top: clamp(-16.8vw, -16.8vw, -3rem);
  padding-inline: clamp(1rem, 4.17vw, 3.75rem);
  text-align: center;
}
.t4a-suggest .t4a-suggest__title {
  margin: 0;
  color: #fff;
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER", cursive);
  font-size: clamp(1.5rem, 2.78vw, 2.5rem);
  font-weight: 400;
  line-height: 1.18;
}
.t4a-suggest .t4a-suggest__lead {
  max-width: 745px;
  margin: 15px auto 0;
  color: #fff;
  font-size: clamp(0.875rem, 1.67vw, 1.5rem);
  font-weight: 400;
  line-height: 1.42;
}
.t4a-suggest .t4a-suggest__lead strong {
  font-weight: 600;
}
.t4a-suggest .t4a-suggest__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}
.t4a-suggest .t4a-suggest__tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px 8px 12px;
  border: 1px solid var(--t4a-suggest-pill-line);
  border-radius: 100px;
  background: var(--t4a-suggest-pill-bg);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.t4a-suggest .t4a-suggest__tag::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t4a-suggest-dot);
}
.t4a-suggest .t4a-suggest__cta {
  margin-top: 40px;
}
.t4a-suggest .t4a-suggest__cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 14px 32px;
  border-radius: 100px;
  font-size: 18px;
  font-weight: 600;
  /* the pencil the design puts before the label, as its own exported
     Figma glyph so the label stays plain editable text */
}
.t4a-suggest .t4a-suggest__cta .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask: url("../img/join/edit-3.svg") center/contain no-repeat;
}

/* Phones — Figma 892:1784. Same composition, smaller type and tighter pills;
   the photo band is shorter so the text rides higher up it. */
@media (max-width: 600px) {
  .t4a-suggest .t4a-suggest__photo img {
    aspect-ratio: 375/216;
  }
  .t4a-suggest .t4a-suggest__body {
    margin-top: -15.2vw;
    padding-inline: 16px;
  }
  .t4a-suggest .t4a-suggest__lead {
    max-width: 325px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
  }
  .t4a-suggest .t4a-suggest__tags {
    gap: 8px;
    margin-top: 25px;
  }
  .t4a-suggest .t4a-suggest__tag {
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
  }
  .t4a-suggest .t4a-suggest__tag::before {
    width: 6px;
    height: 6px;
  }
  .t4a-suggest .t4a-suggest__cta {
    margin-top: 25px;
  }
}
/* -------------------------------------------------------------------------
 * เรื่องราวจากผู้สนับสนุน — Figma 881:6441 (desktop) / 892:1852 (mobile)
 *
 * A Query Loop reading the เรื่องราวจากผู้สนับสนุน category, dressed as the
 * same card the news section uses and driven by the shared collection slider:
 * three across on a desktop, two on a tablet, one on a phone, with the arrows
 * and dots appearing only when there are more posts than fit.
 * ------------------------------------------------------------------------- */
.t4a-stories {
  /* --- the slider ---------------------------------------------------- */
  /* The Query Loop prints the track as a <ul>, so the list styling has to go
     before it can behave like the collection block's track. */
  /* one row of equal-height cards, whatever length the titles run to */
  /* Each post is an <li> the block owns, so the card width is set on the
     list item rather than on a class of ours. */
  /* the shared card already carries its own frame, so only the height needs
     evening out for cards whose titles run to different lengths */
  /* "อ่านบทความ" sits at the foot of every card, however long the title is */
}
.t4a-stories .t4a-stories__title {
  margin: 0;
  color: #111;
  font-family: var(--wp--preset--font-family--uid-letter, "UID LETTER", cursive);
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  font-weight: 400;
  line-height: 1.3;
}
.t4a-stories .t4a-stories__lead {
  max-width: 720px;
  margin: 20px auto 0;
  color: #111;
  font-size: clamp(1rem, 1.67vw, 1.5rem);
  line-height: 1.4;
}
.t4a-stories .t4a-stories__lead strong {
  font-weight: 600;
}
.t4a-stories .t4a-stories__grid {
  --t4a-col-per-view: 3;
  --t4a-col-gap: 40px;
  margin-top: 44px;
}
.t4a-stories .t4a-collection__track {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.t4a-stories .t4a-collection__track {
  align-items: stretch;
}
.t4a-stories .t4a-collection__track > li {
  flex: 0 0 calc((100% - var(--t4a-col-gap) * (var(--t4a-col-per-view) - 1)) / var(--t4a-col-per-view));
  display: flex;
  /* said outright: the Query Loop gives each <li> a margin-block from the
     theme's block gap, and an item with margins does not stretch */
  align-self: stretch;
  margin-block: 0;
  scroll-snap-align: start;
}
.t4a-stories .t4a-collection__track > li > * {
  width: 100%;
}
.t4a-stories .t4a-news__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.t4a-stories .t4a-news__card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.t4a-stories .t4a-arrow-link {
  margin-top: auto;
}

@media (max-width: 1024px) {
  .t4a-stories .t4a-stories__grid {
    --t4a-col-per-view: 2;
    --t4a-col-gap: 24px;
  }
}
@media (max-width: 781px) {
  .t4a-stories .t4a-stories__grid {
    --t4a-col-per-view: 1;
    --t4a-col-gap: 16px;
    margin-top: 28px;
  }
}
/* -------------------------------------------------------------------------
 * ความเคลื่อนไหว page — Figma 906:8946
 *
 * Four Query Loops down the page, alternating cream and pale green, all built
 * from the shared `.t4a-news` card. Only the pieces that differ per section
 * live here.
 * ------------------------------------------------------------------------- */
/* The events band sits on pale green in the design. */
.t4a-events {
  background-color: #e0eadc;
}

/* --- วิดีโอ ---------------------------------------------------------------
 * The same card with the badge and read-more dropped, and a play button drawn
 * over the thumbnail so a Featured image alone is enough — nothing has to be
 * baked into the picture. */
.t4a-videos {
  /* title then date, with the date pinned to the foot so the cards line up */
}
.t4a-videos .wp-block-post-featured-image {
  position: relative;
}
.t4a-videos .wp-block-post-featured-image::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  /* a play triangle, centred in the disc */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  pointer-events: none;
}
.t4a-videos .t4a-news__date {
  margin-top: auto;
  padding-top: 16px;
}
.t4a-videos .t4a-news__card-body {
  display: flex;
  flex-direction: column;
  /* The shared card leaves a gap above the title for the badge row. With
     no badge here that gap is dead space, so it goes — the 20px the card
     already puts between the picture and this body is spacing enough. */
  row-gap: 0;
  padding-top: 0;
}
.t4a-videos .t4a-news__card-body > *:first-child {
  margin-block-start: 0;
}

/* the line an empty category shows instead of a bare heading */
.t4a-news__empty {
  margin: 32px 0 0;
  color: #7c8079;
  font-size: 0.9375rem;
}

/* the blurb under a category's title on /category/… */
.t4a-archive__intro {
  max-width: 760px;
  margin-inline: auto;
  color: #505a53;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
}
.t4a-archive__intro p {
  margin: 0;
}

/* -------------------------------------------------------------------------
 * /news-articles/ listing — Figma 906:4046
 * ------------------------------------------------------------------------- */
.t4a-news-index {
  /* --- the category pills ------------------------------------------- */
}
.t4a-news-index .t4a-news-index__lead {
  max-width: 760px;
  margin: 0 auto;
  color: #505a53;
  font-size: clamp(1rem, 1.39vw, 1.25rem);
  line-height: 1.6;
}
.t4a-news-index .t4a-filter {
  margin-top: 28px;
  gap: 12px;
  /* the ones that are links elsewhere sit as white pills */
  /* the page you are on */
}
.t4a-news-index .t4a-filter .wp-block-button__link {
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 500;
  min-height: 20px;
}
.t4a-news-index .t4a-filter .is-style-outline .wp-block-button__link {
  border: 1px solid #d9dcd6;
  background: #fff;
  color: #242d27;
}
.t4a-news-index .t4a-filter .is-style-outline .wp-block-button__link:hover, .t4a-news-index .t4a-filter .is-style-outline .wp-block-button__link:focus-visible {
  border-color: #284d26;
  background: #fff;
  color: #284d26;
}
.t4a-news-index .t4a-filter .is-current .wp-block-button__link {
  background: #284d26;
  color: #fff;
}
.t4a-news-index .t4a-archive__grid {
  margin-top: clamp(2rem, 4.44vw, 3rem);
}

/* --- Facebook video embeds ([fb-video url="…"]) --------------------------- */
.t4a-fb-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  margin-block: 24px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  /* Reels and other upright clips, left-aligned with the text.
     The wrapper keeps the full content width so WordPress's constrained
     layout still positions it like any paragraph — pinning the wrapper's own
     margin to 0 instead would shove it out to the page edge, away from the
     text. The 9:16 shape moves onto the player inside, which then simply
     starts at the column's left edge. */
}
.t4a-fb-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.t4a-fb-video--portrait {
  aspect-ratio: auto;
  /* No `max-width` here on purpose: WordPress's constrained layout gives
     this wrapper the content width and centres it, which is what puts its
     left edge in line with the paragraphs. Overriding it sent the wrapper
     out to the page's padding edge instead. */
  border-radius: 0;
  background: none;
  overflow: visible;
}
.t4a-fb-video--portrait iframe {
  position: static;
  display: block;
  width: min(420px, 100%);
  height: auto;
  aspect-ratio: 9/16;
  border-radius: 16px;
  background: #000;
}

/* only editors see this, when the shortcode is missing its link */
.t4a-fb-video__notice {
  padding: 16px 20px;
  border: 1px dashed #c0c8bd;
  border-radius: 12px;
  background: #fafaf5;
  color: #505a53;
  font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
 * Single post — Figma 906:5192
 *
 * Article column on the left, a sidebar of related posts and the donate card
 * on the right. Reading time, the share row and the related list come from
 * inc/post-extras.php, because no core block covers them.
 * ------------------------------------------------------------------------- */
.t4a-post {
  --t4a-post-ink: #242d27;
  --t4a-post-muted: #6b756e;
  --t4a-post-line: #e2e6e0;
  /* --- breadcrumb ---------------------------------------------------- */
  /* --- headline and meta --------------------------------------------- */
  /* --- the two columns ------------------------------------------------ */
  /* --- sidebar -------------------------------------------------------- */
}
.t4a-post .t4a-post__crumbs {
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--t4a-post-muted);
  font-size: 0.875rem;
  /* the chevron between the two crumbs */
  /* a post in two categories would otherwise list both here */
}
.t4a-post .t4a-post__crumbs p,
.t4a-post .t4a-post__crumbs .wp-block-post-terms {
  margin: 0;
}
.t4a-post .t4a-post__crumbs a {
  color: inherit;
  text-decoration: none;
}
.t4a-post .t4a-post__crumbs a:hover {
  text-decoration: underline;
}
.t4a-post .t4a-post__crumbs .t4a-post__crumb-term::before {
  content: "›";
  margin-right: 8px;
  color: var(--t4a-post-muted);
}
.t4a-post .t4a-post__crumbs .t4a-post__crumb-term a ~ a,
.t4a-post .t4a-post__crumbs .t4a-post__crumb-term .wp-block-post-terms__separator {
  display: none;
}
.t4a-post .t4a-post__title {
  margin: 0;
  color: var(--t4a-post-ink);
  font-size: clamp(1.75rem, 3.06vw, 2.75rem);
  font-weight: 700;
  line-height: 1.3;
}
.t4a-post .t4a-post__meta {
  align-items: center;
  gap: 16px;
  margin: 20px 0 28px;
  color: var(--t4a-post-muted);
  font-size: 0.9375rem;
}
.t4a-post .t4a-post__meta-left {
  align-items: center;
  gap: 20px;
}
.t4a-post .t4a-post__date,
.t4a-post .t4a-post__readtime {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: inherit;
  font-size: inherit;
  /* small calendar / clock marks, drawn rather than shipped as files */
}
.t4a-post .t4a-post__date::before,
.t4a-post .t4a-post__readtime::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.t4a-post .t4a-post__date::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.t4a-post .t4a-post__readtime::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.t4a-post .t4a-post__cols {
  gap: clamp(2rem, 4.44vw, 4rem);
}
.t4a-post .t4a-post__hero img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.t4a-post .wp-block-post-content {
  margin-top: 32px;
  color: var(--t4a-post-ink);
  font-size: 1.0625rem;
  line-height: 1.85;
  /* the design's pull quote: a green rule down the left, no italics */
}
.t4a-post .wp-block-post-content > * + * {
  margin-top: 1.25em;
}
.t4a-post .wp-block-post-content h2,
.t4a-post .wp-block-post-content h3 {
  margin-top: 1.8em;
  font-weight: 700;
  line-height: 1.4;
}
.t4a-post .wp-block-post-content h2 {
  font-size: 1.5rem;
}
.t4a-post .wp-block-post-content h3 {
  font-size: 1.25rem;
}
.t4a-post .wp-block-post-content img {
  border-radius: 12px;
}
.t4a-post .wp-block-post-content blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 24px;
  border-left: 4px solid #649852;
  font-size: 1.375rem;
  line-height: 1.6;
}
.t4a-post .wp-block-post-content blockquote p {
  margin: 0;
}
.t4a-post .t4a-post__rule {
  margin: 48px 0 24px;
  border: 0;
  border-top: 1px solid var(--t4a-post-line);
}
.t4a-post .t4a-post__side-title {
  margin: 0 0 20px;
  color: var(--t4a-post-ink);
  font-size: 1.125rem;
  font-weight: 700;
}
.t4a-post .t4a-related__item {
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.t4a-post .t4a-related__thumb {
  flex: none;
  margin: 0;
}
.t4a-post .t4a-related__thumb img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}
.t4a-post .t4a-related__text {
  flex: 1;
  min-width: 0;
}
.t4a-post .t4a-related__term {
  margin: 0 0 4px;
  color: var(--t4a-post-muted);
  font-size: 0.75rem;
}
.t4a-post .t4a-related__term a {
  color: inherit;
  text-decoration: none;
}
.t4a-post .t4a-related__term a ~ a,
.t4a-post .t4a-related__term .wp-block-post-terms__separator {
  display: none;
}
.t4a-post .t4a-related__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}
.t4a-post .t4a-related__title a {
  color: var(--t4a-post-ink);
  text-decoration: none;
}
.t4a-post .t4a-related__title a:hover {
  text-decoration: underline;
}
.t4a-post .t4a-post__cta {
  margin-top: 32px;
}
.t4a-post .t4a-post__cta-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.t4a-post .t4a-post__cta-text {
  margin: 12px 0 0;
  color: #3d4a41;
  font-size: 0.875rem;
  line-height: 1.6;
}
.t4a-post .t4a-post__cta-buttons {
  margin-top: 20px;
}

/* --- the share row (used twice: beside the date and under the article) ---- */
.t4a-share {
  display: flex;
  align-items: center;
  gap: 12px;
}

.t4a-share__label {
  color: #6b756e;
  font-size: 0.875rem;
}

.t4a-share__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.t4a-share__btn {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #eef0ec;
  color: #242d27;
  cursor: pointer;
  /* a moment's confirmation after the link is copied */
}
.t4a-share__btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.t4a-share__btn:hover, .t4a-share__btn:focus-visible {
  background-color: #dfe4dc;
}
.t4a-share__btn--facebook::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 9h3V6h-3c-2.2 0-4 1.8-4 4v2H8v3h2v7h3v-7h3l1-3h-4v-2c0-.6.4-1 1-1z'/%3E%3C/svg%3E");
}
.t4a-share__btn--x::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-7 8 8.2 12h-6.4l-5-7.3L5.9 22H2.8l7.5-8.6L2.4 2h6.6l4.5 6.6zm-1.1 18h1.7L7.3 3.8H5.5z'/%3E%3C/svg%3E");
}
.t4a-share__btn--link::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E");
}
.t4a-share__btn.is-copied::after {
  content: "คัดลอกแล้ว";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 6px;
  background: #242d27;
  color: #fff;
  font-size: 0.75rem;
  white-space: nowrap;
}

@media (max-width: 781px) {
  .t4a-post .t4a-post__cols {
    gap: 2.5rem;
  }
  .t4a-post .t4a-post__meta {
    align-items: flex-start;
    gap: 12px;
  }
}
/* --- posts that summarise an article published elsewhere ------------------ */
.t4a-source-note {
  margin-top: 2em;
  color: #6b756e;
  font-size: 0.9375rem;
  font-style: italic;
}

.t4a-source-link {
  margin-top: 1em;
}

/* the "วันที่จัดงาน" line at the top of an event post */
.t4a-event-when {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.5em;
  padding: 6px 16px;
  border-radius: 100px;
  background: #e0eadc;
  color: #284d26;
  font-size: 0.9375rem;
  font-weight: 600;
}
.t4a-event-when::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* -------------------------------------------------------------------------
 * File / download block (core/file)
 *
 * The block's own output is bare: a PDF preview, the raw file name as an
 * underlined link, and a button whose label is empty unless someone types
 * one. This gives it a card, a readable file name and a proper download
 * button — as the block's default, so every file added later looks the same
 * with nothing for the client to set.
 * ------------------------------------------------------------------------- */
.wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  margin-block: 32px;
  padding: 20px 24px;
  border: 1px solid #e2e6e0;
  border-radius: 16px;
  background: #fafaf5;
  /* the PDF preview, when the block is set to show one */
  /* the file name — a line to read, not a raw underlined slug */
  /* the download button */
}
.wp-block-file .wp-block-file__embed {
  flex: 1 1 100%;
  height: clamp(360px, 45vw, 600px) !important;
  margin-bottom: 4px;
  border: 1px solid #e2e6e0;
  border-radius: 12px;
  background: #fff;
}
.wp-block-file a:not(.wp-block-file__button) {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #242d27;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}
.wp-block-file a:not(.wp-block-file__button)::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background-color: #649852;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wp-block-file a:not(.wp-block-file__button):hover, .wp-block-file a:not(.wp-block-file__button):focus-visible {
  text-decoration: underline;
}
.wp-block-file .wp-block-file__button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin-left: 0;
  padding: 12px 28px;
  border-radius: 100px;
  background: #f3ca61;
  color: #252525;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  /* Core leaves the label empty unless someone types one, which renders
     as a bare pill. This gives it words without touching the content —
     type a label in the editor and that wins. */
}
.wp-block-file .wp-block-file__button::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 11l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wp-block-file .wp-block-file__button:empty::after {
  content: "ดาวน์โหลดไฟล์";
}
.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus-visible {
  background: #f7d77f;
  color: #252525;
}

@media (max-width: 600px) {
  .wp-block-file {
    padding: 16px;
  }
  .wp-block-file a:not(.wp-block-file__button) {
    flex: 1 1 100%;
  }
  .wp-block-file .wp-block-file__button {
    flex: 1 1 100%;
  }
}
/* =====================================================================
   BUTTON — "รอเปิดใช้งาน"
   ---------------------------------------------------------------------
   For a button whose destination does not exist yet. The design uses it on
   the Learning activities panel (881:6342): #e2e5df fill, #969c94 label.

   TO OPEN THE BUTTON UP: select it in the editor, switch Styles from
   "รอเปิดใช้งาน" back to "Primary (Gold Pill)", and set the link. Nothing
   here needs touching.

   pointer-events is what actually stops the click. An aria-disabled attribute
   would read better to a screen reader, but core/button does not write one, so
   the editor would flag the block as invalid the moment the client opened the
   page — the label itself has to carry the meaning.
   ===================================================================== */
.wp-block-button.is-style-pending {
  /* the icon variants tint their glyph from the label colour */
}
.wp-block-button.is-style-pending .wp-block-button__link {
  background-color: #e2e5df;
  color: #969c94;
  border-color: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.wp-block-button.is-style-pending .wp-block-button__link::before {
  background-color: currentColor;
}

/* The same held-back wording in running text, e.g. under that button. */
.t4a-pending {
  color: #969c94;
}

/* =====================================================================
   IN-PAGE ANCHORS
   ---------------------------------------------------------------------
   Every section heading carries an HTML anchor (Advanced → HTML anchor in
   the editor), so a menu item can point at /#how-it-works and land on that
   section. Two things make the landing readable:

   1. scroll-margin-top — without it the heading sits flush against the top
      edge of the window, with the section's own background starting at the
      same pixel. The offset clears the header (80px) and leaves a little
      air. The header is position:absolute, not sticky, so it does not cover
      the target once the page has scrolled; the gap is for breathing room,
      and it is the same on phone and desktop because the header is 80px on
      both.

   2. scroll-behavior — a jump between two sections of the same page is
      easier to follow when it glides. Anyone who has asked their OS to cut
      animation still gets the instant jump.
   ===================================================================== */
/* Only scroll-margin-top, never scroll-padding-top on the same jump: the two
   add up and the target lands twice as far down as intended. */
.wp-site-blocks [id] {
  scroll-margin-top: 104px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
/* The "ความสำคัญ" heading sits in its own block above this section, and that
   block exists twice — a desktop copy and a mobile copy that swap with
   display:none — so the anchor cannot live on either one without dying at the
   other width. It goes on the section instead, and the extra offset here pulls
   the heading above it back into view: it stands 115px above the section on
   desktop and 82px on mobile, so the shared 104px would shave the top off it.
   Keyed on the class, not on #importance, so the client can rename the anchor. */
.wp-site-blocks .t4a-about-importance {
  scroll-margin-top: 150px;
}

/*# sourceMappingURL=style.css.map */