/**
 * ECUE — theme styles.
 * =============================================================================
 * Step 1: the page shell. Base elements, containers, the site header, the
 * mobile drawer, the footer, and the shared controls those need.
 *
 * WHY THIS FILE EXISTS IN THIS SHAPE
 * ----------------------------------
 * The design files carried their responsive rules as attribute selectors that
 * matched fragments of inline style values — `[style*="repeat(3"]`,
 * `[style*="200px"]`, and so on. That works in a static artboard and fails in
 * WordPress: the Columns and Cover blocks emit those exact strings, so an
 * editor adding an ordinary three-column block would silently inherit archive
 * row layout. Every rule here targets a real class instead. The breakpoints and
 * the behaviour at each one are unchanged from the approved design.
 *
 * Naming: every class is prefixed `ec-`, block__element--modifier.
 *
 * @package ecue
 */

/* =============================================================================
 * 1. Base
 * ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  letter-spacing: var(--tracking-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text-strong);
  letter-spacing: var(--tracking-heading);
}

h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-h4); }

p {
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--line-hairline);
  transition: var(--transition-control), text-decoration-color var(--dur-fast) var(--ease-standard);
}

a:hover {
  color: var(--text-link-hover);
  text-decoration-color: currentColor;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--solar-300);
  color: var(--ink-900);
}

/* One focus style for the whole site. Never remove it without replacing it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* =============================================================================
 * 2. Layout primitives
 * ========================================================================== */

.ec-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.ec-container--wide { max-width: var(--container-wide); }
.ec-container--text { max-width: var(--container-text); }

/* Screen-reader-only, but focusable when it needs to be. */
.ec-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ec-skip {
  position: absolute;
  top: -100px;
  left: var(--space-5);
  z-index: 100;
  padding: var(--space-4) var(--space-6);
  background: var(--ink-900);
  color: var(--paper);
  font: var(--type-body-sm);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-standard);
}

.ec-skip:focus {
  top: var(--space-5);
  color: var(--paper);
}

/* The signature 6px ember rule. Decorative — always aria-hidden in markup. */
.ec-rule {
  height: 6px;
  width: 200px;
  background: var(--gradient-ember-h);
}

.ec-rule--full { width: 100%; }

/* =============================================================================
 * 3. Controls
 * ========================================================================== */

.ec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-6);
  border: 1px solid var(--ink-900);
  border-radius: var(--radius-control);
  background: var(--ink-900);
  color: var(--paper);
  font: var(--fw-medium) var(--fs-body-sm) / 1 var(--font-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control);
}

.ec-btn:hover {
  background: var(--ember-700);
  border-color: var(--ember-700);
  color: var(--paper);
}

.ec-btn--sm {
  min-height: 34px;
  padding: 0 var(--space-5);
}

.ec-btn--lg {
  min-height: 52px;
  padding: 0 var(--space-7);
  font-size: var(--fs-body);
}

.ec-btn--ghost {
  min-height: 34px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--ink-900);
  border-radius: 0;
  background: none;
  color: var(--text-strong);
}

.ec-btn--ghost:hover {
  background: none;
  border-bottom-color: var(--ember-500);
  color: var(--ember-700);
}

.ec-btn--inverse {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink-900);
}

.ec-btn--inverse:hover {
  background: var(--ember-500);
  border-color: var(--ember-500);
  color: var(--paper);
}

.ec-btn--full {
  width: 100%;
}

.ec-btn .ec-icon {
  flex: none;
}

.ec-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  transition: var(--transition-control);
}

.ec-iconbtn:hover {
  border-color: var(--ink-900);
  color: var(--ember-700);
}

.ec-icon {
  display: block;
}

/* =============================================================================
 * 4. Editorial primitives
 * ========================================================================== */

.ec-eyebrow {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
}

.ec-eyebrow--muted { color: var(--text-muted); }

.ec-eyebrow--inverse {
  color: color-mix(in oklab, var(--paper) 76%, transparent);
}

/* =============================================================================
 * 5. Site header
 * ========================================================================== */

.ec-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-page);
  border-bottom: 1px solid var(--line-hairline);
}

.ec-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--header-height);
}

.ec-header__logo {
  display: flex;
  flex: none;
  text-decoration: none;
}

.ec-header__logo img {
  height: 24px;
  width: auto;
}

.ec-header__nav {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
}

.ec-header__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-4);
}

/* --- primary nav ---------------------------------------------------------- */

.ec-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-nav a {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  font: var(--fw-regular) var(--fs-body-sm) / 1 var(--font-text);
  color: var(--text-body);
  text-decoration: none;
}

.ec-nav a:hover {
  border-bottom-color: var(--ember-500);
  color: var(--text-strong);
}

/* WordPress adds these classes itself; the design's active state is the rule. */
.ec-nav .current-menu-item > a,
.ec-nav .current_page_item > a,
.ec-nav .current-menu-ancestor > a,
.ec-nav .current-post-ancestor > a {
  border-bottom-color: var(--ember-500);
  color: var(--text-strong);
}

/*
 * The VGEM gateway. Any menu item given the CSS class `ec-gateway` under
 * Appearance → Menus gets this treatment, in either language — the theme never
 * hardcodes the destination.
 */
.ec-nav .ec-gateway > a,
.ec-drawer__list .ec-gateway > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--violet-500);
  border-bottom-color: transparent;
}

.ec-nav .ec-gateway > a:hover {
  color: var(--violet-700);
  border-bottom-color: var(--violet-500);
}

/* --- burger --------------------------------------------------------------- */

.ec-header__burger {
  display: none;
}

/* Swap the burger's two glyphs from one open/closed state. */
.ec-header__burger .ec-icon--close { display: none; }
.ec-header__burger[aria-expanded="true"] .ec-icon--open { display: none; }
.ec-header__burger[aria-expanded="true"] .ec-icon--close { display: block; }

/* --- search --------------------------------------------------------------- */

.ec-header__search {
  border-top: 1px solid var(--line-hairline);
  background: var(--surface-page);
  padding-block: var(--space-6);
}

/* --- drawer --------------------------------------------------------------- */

.ec-drawer {
  border-top: 1px solid var(--line-hairline);
  background: var(--surface-page);
  padding: var(--space-6) 0 var(--space-7);
}

.ec-drawer__list {
  display: grid;
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.ec-drawer__list a {
  font: var(--fw-bold) var(--fs-h4) / 1.1 var(--font-display);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  text-decoration: none;
}

.ec-drawer__list a:hover {
  color: var(--ember-700);
}

.ec-drawer__list .ec-gateway > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--violet-500);
}

.ec-drawer__foot {
  display: grid;
  gap: var(--space-5);
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-6);
}

/* =============================================================================
 * 6. Search form
 * ========================================================================== */

.ec-searchform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
}

.ec-field {
  display: grid;
  gap: var(--space-3);
}

.ec-label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.ec-input {
  width: 100%;
  min-height: 44px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--text-strong);
  font: var(--type-body);
}

.ec-input::placeholder {
  color: var(--text-muted);
}

.ec-input:focus {
  border-color: var(--ink-900);
}

/* =============================================================================
 * 7. Main & page hero
 * ========================================================================== */

.ec-main {
  display: block;
}

/*
 * The hero at the top of a standard page — Tư vấn, Về ECUE and anything else
 * written in Gutenberg. Title on the left, the page's excerpt on the right.
 * Both come from the page itself, so nothing here needs a custom field.
 */
.ec-pagehero {
  padding-block: var(--space-10) var(--space-9);
}

.ec-pagehero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: end;
}

.ec-pagehero__lead {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

.ec-pagehero__title {
  font: var(--fw-bold) var(--fs-display-2) / var(--lh-display) var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  max-width: 17ch;
  text-wrap: balance;
}

.ec-pagehero__intro {
  padding-bottom: var(--space-4);
}

.ec-pagehero__intro p {
  font: var(--type-body-lg);
  color: var(--text-strong);
  max-width: 48ch;
}

/* =============================================================================
 * 8. Site footer
 * ========================================================================== */

.ec-footer {
  background: var(--ink-900);
  color: color-mix(in oklab, var(--paper) 78%, transparent);
}

.ec-footer__inner {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-10) var(--space-7);
}

.ec-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.ec-footer__brand {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  justify-items: start;
}

.ec-footer__brand img {
  height: 28px;
  width: auto;
}

.ec-footer__blurb {
  font: var(--type-body-sm);
  max-width: 32ch;
}

.ec-footer__contact {
  display: grid;
  gap: var(--space-2);
  font: var(--type-body-sm);
  font-style: normal;
}

.ec-footer a {
  color: inherit;
  text-decoration: none;
  text-decoration-color: transparent;
}

.ec-footer a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.ec-footer__col {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.ec-footer__coltitle {
  margin: 0;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper);
}

.ec-footer__list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-footer__list a {
  font: var(--type-body-sm);
}

.ec-footer__hr {
  height: 1px;
  background: var(--line-inverse);
}

.ec-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  font: var(--type-caption);
}

.ec-footer__spacer {
  flex: 1;
}

/*
 * The bottom line's menu. wp_nav_menu always returns a list, so it needs
 * flattening — without this it stacks as a bulleted block under the copyright.
 */
.ec-footer__legallist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =============================================================================
 * 9. Responsive
 * =============================================================================
 * Three steps, matching the approved design: gutters at 1100, tablet at 900,
 * mobile at 600. Type scales by redefining the --fs-* tokens, so every
 * component follows without a query of its own.
 * ========================================================================== */

@media (max-width: 1100px) {
  .ec-container {
    padding-inline: var(--space-7);
  }
}

@media (max-width: 900px) {
  :root {
    --fs-display-1: 60px;
    --fs-display-2: 44px;
    --fs-h1: 34px;
    --fs-h2: 28px;
    --fs-h3: 23px;
    --fs-h4: 19px;
    --fs-body-lg: 18px;
    --section-y: 64px;
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: none;
  }

  /* The desktop nav gives way to the drawer. */
  .ec-header__nav {
    display: none;
  }

  .ec-header__burger {
    display: inline-flex;
  }

  .ec-header__bar {
    gap: var(--space-6);
  }

  /*
   * The drawer carries its own contact button and language switcher, so the
   * bar keeps just the burger.
   */
  .ec-header__cta,
  .ec-header__searchtoggle,
  .ec-header__tools > .ec-langs {
    display: none;
  }

  .ec-header__logo {
    margin-inline-end: auto;
  }

  /* Footer keeps two columns rather than collapsing all the way. */
  .ec-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-7);
  }

  /* Asymmetric page hero becomes one column. */
  .ec-pagehero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .ec-pagehero {
    padding-block: var(--space-9) var(--space-8);
  }
}

@media (max-width: 600px) {
  :root {
    --fs-display-1: 40px;
    --fs-display-2: 32px;
    --fs-h1: 28px;
    --fs-h2: 23px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --fs-body-lg: 17px;
    --section-y: 48px;
  }

  .ec-container {
    padding-inline: var(--space-5);
  }

  .ec-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .ec-footer__inner {
    padding-block: var(--space-9) var(--space-7);
  }

  .ec-searchform {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -----------------------------------------------------------------------------
 * No-JS fallback. The drawer is hidden by the `hidden` attribute, which JS
 * toggles. Without JS the attribute would never come off, so the nav is put
 * back in flow instead and the burger removed.
 * -------------------------------------------------------------------------- */

.no-js .ec-header__burger {
  display: none;
}

@media (max-width: 900px) {
  .no-js .ec-header__nav {
    display: block;
    flex-basis: 100%;
    padding-bottom: var(--space-5);
  }

  .no-js .ec-header__bar {
    flex-wrap: wrap;
    padding-block: var(--space-5);
  }

  .no-js .ec-nav {
    flex-wrap: wrap;
    gap: var(--space-5);
  }
}

/* =============================================================================
 * 10. Sections — the shared vertical rhythm
 * ========================================================================== */

.ec-section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-hairline);
}

.ec-section--flush {
  padding-block: 0 var(--section-y);
  border-top: 0;
}

.ec-section--top {
  border-top: 0;
  padding-block: var(--space-10) var(--space-7);
}

.ec-section--sunken {
  background: var(--surface-sunken);
}

.ec-section__foot {
  display: flex;
  justify-content: center;
  padding-top: var(--space-9);
}

/* --- section heading ------------------------------------------------------ */

.ec-sectionhead {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.ec-sectionhead__lead {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.ec-sectionhead__title {
  font: var(--type-h2);
  letter-spacing: var(--tracking-heading);
  max-width: 24ch;
}

.ec-sectionhead__intro {
  font: var(--type-body-lg);
  color: var(--text-muted);
  max-width: 56ch;
}

.ec-eyebrow--link {
  text-decoration: none;
}

.ec-eyebrow--link:hover {
  color: var(--ember-500);
}

/* =============================================================================
 * 11. Media frames
 * =============================================================================
 * One frame, any ratio, set per use with --ec-ratio. The image crops to fill
 * rather than distorting, which is what lets the existing library of mixed crops
 * sit in the design's strict grid.
 *
 * There is no placeholder state on purpose: with no image, nothing renders and
 * the surrounding grid closes up. See ecue_media_frame().
 * ========================================================================== */

.ec-frame {
  margin: 0;
  min-width: 0;
}

.ec-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ec-ratio, 4 / 3);
  object-fit: cover;
  background: var(--surface-quiet);
  border-radius: var(--radius-media);
}

.ec-frame__caption {
  margin-top: var(--space-4);
  font: var(--type-caption);
  color: var(--text-muted);
}

/* =============================================================================
 * 12. Home page hero
 * =============================================================================
 * Rendered by front-page.php from three page fields: the "Home page headline"
 * meta box, the excerpt, and the featured image. Any of them may be missing —
 * the band closes up rather than leaving a hole.
 * ========================================================================== */

.ec-hero {
  position: relative;
  display: grid;
  align-items: end;
  background: var(--ink-900);
}

.ec-hero--image {
  min-height: 680px;
}

.ec-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Lightest at the top so the photograph still reads, heaviest at the foot
 * where the headline sits.
 */
.ec-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--ink-900) 52%, transparent) 0%,
    color-mix(in oklab, var(--ink-900) 70%, transparent) 44%,
    color-mix(in oklab, var(--ink-900) 94%, transparent) 100%
  );
}

.ec-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: end;
  width: 100%;
  padding-block: var(--space-12) var(--space-10);
}

/* Without a photograph the hero is a plain ink band and needs far less air. */
.ec-hero:not(.ec-hero--image) .ec-hero__inner {
  padding-block: var(--space-10);
}

.ec-hero__lead {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

.ec-hero__title {
  font: var(--fw-bold) var(--fs-display-1) / var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--paper);
  max-width: 18ch;
  text-wrap: balance;
}

.ec-hero__body {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  padding-bottom: var(--space-3);
}

.ec-hero__text {
  font: var(--type-body-lg);
  color: color-mix(in oklab, var(--paper) 86%, transparent);
  max-width: 44ch;
}

/* =============================================================================
 * 13. Công việc tiêu biểu — the work rows
 * ========================================================================== */

.ec-works {
  border-bottom: 1px solid var(--line-hairline);
}

.ec-work__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) 84px;
  gap: var(--space-8);
  align-items: start;
  border-top: 1px solid var(--line-hairline);
  padding-block: var(--space-9);
  color: inherit;
  text-decoration: none;
}

a.ec-work__inner:hover {
  color: inherit;
}

a.ec-work__inner:hover .ec-work__title {
  color: var(--ember-700);
}

.ec-work__body {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.ec-work__title {
  font: var(--type-h2);
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  max-width: 26ch;
  transition: var(--transition-control);
}

.ec-work__desc {
  font: var(--type-body-lg);
  color: var(--text-muted);
  max-width: 52ch;
}

.ec-work__year {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  text-align: right;
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
 * 14. Initiatives band
 * ========================================================================== */

.ec-initiatives {
  padding-bottom: 0;
}

.ec-initiatives__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.ec-initiative {
  display: grid;
  gap: var(--space-6);
  align-content: start;
  justify-items: start;
  min-height: 440px;
  padding: var(--space-10) var(--space-8);
  color: var(--paper);
}

.ec-initiative--vgem { background: var(--violet-500); }
.ec-initiative--forest { background: var(--forest-700); }

.ec-initiative__logo {
  height: 44px;
  width: auto;
}

.ec-initiative__wordmark {
  font: var(--fw-bold) var(--fs-h2) / 1.06 var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--paper);
  max-width: 14ch;
}

.ec-initiative__text {
  font: var(--type-body-lg);
  color: color-mix(in oklab, var(--paper) 86%, transparent);
  max-width: 38ch;
}

.ec-rule--solar {
  background: var(--solar-500);
  width: 170px;
}

/* =============================================================================
 * 15. About band
 * ========================================================================== */

.ec-about {
  background: var(--surface-sunken);
}

.ec-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--space-9);
  align-items: start;
}

.ec-about__lead {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.ec-about__title {
  font: var(--fw-bold) var(--fs-display-2) / var(--lh-display) var(--font-display);
  letter-spacing: var(--tracking-display);
  max-width: 14ch;
}

.ec-about__body {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

.ec-about__text {
  font: var(--type-body-lg);
  color: var(--text-strong);
  max-width: 56ch;
}

/* =============================================================================
 * 16. Góc nhìn — lead article and cards
 * ========================================================================== */

.ec-lead {
  display: grid;
  gap: var(--space-7);
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-7);
  color: inherit;
  text-decoration: none;
}

.ec-lead:hover { color: inherit; }
.ec-lead:hover .ec-lead__title { color: var(--ember-700); }

.ec-lead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
}

.ec-lead__head {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.ec-lead__title {
  font: var(--fw-semibold) var(--fs-display-2) / 1.18 var(--font-editorial);
  letter-spacing: -0.01em;
  color: var(--text-strong);
  max-width: 22ch;
  text-wrap: balance;
  transition: var(--transition-control);
}

.ec-lead__body {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  padding-top: var(--space-4);
}

.ec-lead__excerpt {
  font: var(--type-body-lg);
  color: var(--text-muted);
  max-width: 46ch;
}

.ec-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.ec-card__link {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  color: inherit;
  text-decoration: none;
}

.ec-card__link:hover { color: inherit; }
.ec-card__link:hover .ec-card__title { color: var(--ember-700); }

.ec-card__date {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

.ec-card__title {
  font: var(--fw-semibold) var(--fs-h3) / 1.2 var(--font-editorial);
  color: var(--text-strong);
  max-width: 24ch;
  transition: var(--transition-control);
}

.ec-card__excerpt {
  font: var(--type-body);
  color: var(--text-muted);
}

/* =============================================================================
 * 17. Archive rows
 * ========================================================================== */

.ec-listinghead {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: end;
}

.ec-listinghead__lead {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.ec-listinghead__title {
  font: var(--fw-bold) var(--fs-display-2) / var(--lh-display) var(--font-display);
  letter-spacing: var(--tracking-display);
  max-width: 17ch;
}

.ec-listinghead__note,
.ec-pagehero__note {
  font: var(--type-body);
  color: var(--text-muted);
  max-width: 46ch;
}

.ec-pagehero__search,
.ec-listinghead__search {
  padding-bottom: var(--space-3);
}

.ec-rows {
  border-bottom: 1px solid var(--line-hairline);
}

.ec-row__link {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 150px;
  gap: var(--space-7);
  align-items: start;
  border-top: 1px solid var(--line-hairline);
  padding-block: var(--space-6);
  color: inherit;
  text-decoration: none;
}

.ec-row__link:hover { color: inherit; }
.ec-row__link:hover .ec-row__title { color: var(--ember-700); }

.ec-row__body {
  display: grid;
  gap: var(--space-4);
}

.ec-row__title {
  font: var(--fw-semibold) var(--fs-h3) / 1.2 var(--font-editorial);
  color: var(--text-strong);
  max-width: 34ch;
  transition: var(--transition-control);
}

.ec-row__excerpt {
  font: var(--type-body);
  color: var(--text-muted);
  max-width: 64ch;
}

.ec-row__meta {
  display: grid;
  gap: var(--space-3);
  justify-items: end;
  text-align: right;
}

.ec-row__date {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/*
 * A row whose post has no featured image loses the thumbnail column rather than
 * showing an empty box. Three of the existing posts are in this state.
 */
.ec-row__link:not(:has(.ec-frame)) {
  grid-template-columns: minmax(0, 1fr) 150px;
}

/* --- years ---------------------------------------------------------------- */

.ec-years {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-5);
  margin-top: var(--space-7);
}

.ec-years__link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.ec-years__link:hover {
  border-bottom-color: var(--ember-500);
  color: var(--text-strong);
}

.ec-years__count {
  color: var(--text-muted);
}

.ec-years__heading {
  font: var(--fw-bold) var(--fs-h2) / 1 var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  padding-block: var(--space-8) var(--space-5);
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
 * 18. Pagination
 * ========================================================================== */

.ec-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: center;
  padding-top: var(--space-9);
}

.ec-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--line-hairline);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-body);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.ec-pagination .page-numbers:hover {
  border-color: var(--ink-900);
  color: var(--text-strong);
}

.ec-pagination .page-numbers.current {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--paper);
}

.ec-pagination .page-numbers.dots {
  border-color: transparent;
}

.ec-pagination .prev,
.ec-pagination .next {
  border: 0;
  border-bottom: 2px solid currentColor;
  height: auto;
  padding-bottom: 2px;
  color: var(--text-strong);
}

/* =============================================================================
 * 19. Article
 * ========================================================================== */

.ec-article__head {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  padding-top: var(--space-9);
}

.ec-article__title {
  font: var(--fw-semibold) var(--fs-display-2) / 1.18 var(--font-editorial);
  letter-spacing: -0.01em;
  color: var(--text-strong);
  text-wrap: balance;
}

.ec-article__standfirst {
  font: var(--fw-regular) var(--fs-h4) / 1.5 var(--font-text);
  color: var(--text-muted);
}

.ec-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-5);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.ec-byline__author {
  color: var(--text-strong);
}

.ec-article__lead {
  padding-top: var(--space-9);
}

.ec-article__foot {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-6);
  padding-bottom: var(--section-y);
}

.ec-article__bio {
  font: var(--type-body);
  color: var(--text-body);
}

/* The article body already has the prose padding; do not double it. */
.ec-article__body {
  padding-bottom: var(--space-8);
}

/* =============================================================================
 * 20. Empty states
 * ========================================================================== */

.ec-empty {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-8);
}

.ec-empty__text {
  font: var(--type-body-lg);
  color: var(--text-muted);
  max-width: 52ch;
}

/* =============================================================================
 * 21. Pattern sections
 * =============================================================================
 * The classes the shipped block patterns use. They are plain CSS hooks on core
 * blocks — if this theme is ever swapped out the content stays valid HTML and
 * simply loses its styling, which is the whole reason patterns were chosen over
 * custom blocks.
 * ========================================================================== */

/*
 * A full-width band with its own centred container. Used by every pattern, so
 * a pattern never has to know about page gutters.
 */
.ec-band {
  padding: var(--section-y) var(--space-8);
}

.ec-band > * {
  max-width: var(--container-max);
  margin-inline: auto;
}

.ec-band > * + * {
  margin-block-start: var(--space-5);
}

.ec-band--ruled {
  border-top: 1px solid var(--line-hairline);
}

.ec-band .ec-eyebrow {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* The numerals down a numbered list. */
.ec-band .ec-num {
  font: var(--fw-bold) var(--fs-h3) / 1 var(--font-display);
  letter-spacing: var(--tracking-display);
}

/* The serif one-liner under a section heading. */
.ec-band .ec-lede {
  color: var(--text-strong);
  line-height: 1.35;
  max-width: 30ch;
}

.ec-band .ec-morelink a {
  font: var(--fw-medium) var(--fs-body-sm) / 1 var(--font-text);
  color: var(--text-strong);
  text-decoration: none;
  border-bottom: 2px solid var(--ink-900);
  padding-bottom: 2px;
}

.ec-band .ec-morelink a:hover {
  border-bottom-color: var(--ember-500);
  color: var(--ember-700);
}

/* A numbered or two-column row, separated by hairlines. */
.ec-band .ec-numrow {
  border-top: 1px solid var(--line-hairline);
  padding-top: var(--space-7);
  margin-block-start: var(--space-7);
  gap: var(--space-8);
  align-items: baseline;
}

/* The four process steps, each under its own ember rule. */
.ec-band .ec-steps {
  gap: var(--space-8);
  margin-block-start: var(--space-8);
}

.ec-band .ec-step {
  border-top: var(--border-rule) solid var(--ember-500);
  padding-top: var(--space-5);
}

/* The three "Ba hướng công việc" cards, each under a heavy ink rule. */
.ec-band .ec-slabs {
  gap: var(--space-8);
  margin-block-start: var(--space-8);
}

.ec-band .ec-slab {
  border-top: var(--border-slab) solid var(--ink-900);
  padding-top: var(--space-6);
}

/* The contact section: the WPForms block drops into the right-hand column. */
.ec-band .ec-contact {
  gap: var(--space-9);
  margin-block-start: var(--space-7);
}

.ec-band .ec-formslot {
  border-top: var(--border-slab) solid var(--ink-900);
  padding-top: var(--space-7);
}

/*
 * WPForms Lite, restyled to match. The plugin's own stylesheet is left alone;
 * these rules sit on top of it, scoped to the slot the pattern creates, so
 * nothing here can affect a form used anywhere else.
 */
.ec-formslot .wpforms-field-label {
  font: var(--type-label) !important;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted) !important;
}

.ec-formslot input[type="text"],
.ec-formslot input[type="email"],
.ec-formslot input[type="tel"],
.ec-formslot textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-4) var(--space-5) !important;
  border: 1px solid var(--line-hairline) !important;
  border-radius: var(--radius-field) !important;
  background: var(--surface-raised);
  color: var(--text-strong);
  font: var(--type-body) !important;
}

.ec-formslot textarea {
  min-height: 130px;
}

.ec-formslot button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--space-7) !important;
  border: 1px solid var(--ink-900) !important;
  border-radius: var(--radius-control) !important;
  background: var(--ink-900) !important;
  color: var(--paper) !important;
  font: var(--fw-medium) var(--fs-body) / 1 var(--font-text) !important;
  cursor: pointer;
}

.ec-formslot button[type="submit"]:hover {
  background: var(--ember-700) !important;
  border-color: var(--ember-700) !important;
}

/*
 * A content area made of section bands rather than running text: the bands
 * carry their own vertical space, so the prose padding would double it.
 *
 * Note this does NOT switch off the reading measure. A plain paragraph added to
 * the homepage still sets at 660px like everywhere else — only .ec-band breaks
 * out, via the rule in prose.css.
 */
.ec-prose--sections {
  padding-block: 0;
}

/* =============================================================================
 * 23. Language switcher
 * =============================================================================
 * VI / EN, sitting in the header tools beside the search button. Restrained on
 * purpose: it is navigation furniture, not a feature.
 *
 * The current language is a <span>, not a link — there is nowhere for it to go,
 * and a link to the page you are already on is noise for keyboard and
 * screen-reader users alike.
 * ========================================================================== */

.ec-langs__list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A hairline between the two codes, rather than a slash character. */
.ec-langs__item + .ec-langs__item {
  border-inline-start: 1px solid var(--line-hairline);
  padding-inline-start: var(--space-3);
}

.ec-langs__link {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

a.ec-langs__link:hover {
  color: var(--text-strong);
  border-bottom-color: var(--ember-500);
}

.ec-langs__link.is-current {
  color: var(--text-strong);
  border-bottom-color: var(--ink-900);
}

/*
 * A language with no translation of this page still links — to that language's
 * home page, which is where Polylang sends it. The lighter weight is the only
 * hint; the <title> and the visually hidden text carry the explanation.
 */
.ec-langs__link.is-untranslated {
  color: var(--text-muted);
  opacity: 0.75;
}

/* In the drawer it sits above the contact button, on its own line. */
.ec-langs--drawer {
  padding-bottom: var(--space-2);
}

.ec-langs--drawer .ec-langs__list {
  gap: var(--space-4);
}

.ec-langs--drawer .ec-langs__item + .ec-langs__item {
  padding-inline-start: var(--space-4);
}

.ec-langs--drawer .ec-langs__link {
  font-size: var(--fs-body-sm);
}

/* =============================================================================
 * 22. Responsive — step 2 components
 * =============================================================================
 * Same three steps as the shell. The type scale is already handled by the
 * --fs-* tokens, so these rules only change what the grids do.
 * ========================================================================== */

@media (max-width: 900px) {

  /* Asymmetric two-column splits collapse. */
  .ec-hero__inner,
  .ec-about__inner,
  .ec-lead__inner,
  .ec-listinghead {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }

  .ec-hero--image {
    min-height: 560px;
  }

  .ec-hero__inner {
    padding-block: var(--space-10) var(--space-9);
  }

  /* Three across becomes two. */
  .ec-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }

  /* Work row: the year label rises above the image. */
  .ec-work__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-block: var(--space-8);
  }

  .ec-work__year {
    order: -1;
    text-align: left;
    padding-top: 0;
  }

  /* Archive row: narrower thumbnail, meta on one line under the text. */
  .ec-row__link,
  .ec-row__link:not(:has(.ec-frame)) {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--space-6);
  }

  .ec-row__meta {
    grid-column: 2;
    display: flex;
    gap: var(--space-5);
    justify-items: start;
    text-align: left;
  }

  .ec-row__link:not(:has(.ec-frame)) .ec-row__meta {
    grid-column: 1;
  }

  .ec-initiative {
    min-height: 0;
    padding: var(--space-9) var(--space-7);
  }

  .ec-band {
    padding-inline: var(--space-7);
  }

  /* Core columns stack themselves below 782px; force it a little earlier so
     the numbered rows and the four steps break at the same point as the rest
     of the page rather than 120px later. */
  .ec-band .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap;
  }

  .ec-band .ec-steps > .wp-block-column,
  .ec-band .ec-slabs > .wp-block-column {
    flex-basis: calc(50% - var(--space-8)) !important;
  }
}

@media (max-width: 600px) {

  .ec-hero--image {
    min-height: 480px;
  }

  .ec-hero__inner {
    padding-block: var(--space-9) var(--space-8);
  }

  .ec-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  /* The archive thumbnail is dropped rather than shrunk to a stamp. */
  .ec-row__link,
  .ec-row__link:not(:has(.ec-frame)) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .ec-row__media {
    display: none;
  }

  .ec-row__meta {
    grid-column: 1;
  }

  .ec-lead__media .ec-frame__img {
    aspect-ratio: 4 / 3;
  }

  .ec-band {
    padding-inline: var(--space-5);
  }

  .ec-band .ec-steps > .wp-block-column,
  .ec-band .ec-slabs > .wp-block-column,
  .ec-band .ec-numrow > .wp-block-column,
  .ec-band .ec-contact > .wp-block-column {
    flex-basis: 100% !important;
  }

  .ec-band .ec-numrow {
    gap: var(--space-4);
  }

  .ec-pagination {
    gap: var(--space-4);
  }
}