/* Public pages of www.pakima.edu.vn (home, /courses, course pages, /about, /contact, policies).
   Loaded after app.css, uses its tokens, buttons, .chapter and .cover-type. Mobile first (360px phone),
   min-width queries widen it. Pages are generated by tools/build_public_pages.py. No inline style anywhere. */

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--card); color: var(--maroon-700); padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 700; }
.skip-link:focus { top: 8px; }

/* ---------- Header ----------
   Below 960 px: the logo and a menu button (Tú, UAT 11/11/2026); the button's aria-expanded (src/js/public-nav.js)
   shows the menu panel in the flow under the bar, so a closed menu covers nothing. The panel lists the student
   button first, full width, then the links. From 960 px the panel is the header row: links, then the student button. */
.pubbar { background: var(--maroon-700); color: var(--cream-text); position: relative; z-index: 20; }
.pubbar__inner {
  max-width: 1200px; margin: 0 auto; padding: 8px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px;
}
.pubbar__logo { display: block; padding: 8px 0; }
.pubbar__logo img { height: 26px; width: auto; }
.pubbar__toggle {
  display: grid; place-items: center; width: 48px; height: 48px; margin-right: -10px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--cream-text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pubbar__toggle svg { display: block; }
.pubbar__toggle .ic-close, .pubbar__toggle[aria-expanded="true"] .ic-menu { display: none; }
.pubbar__toggle[aria-expanded="true"] .ic-close { display: block; }
.pubbar__toggle:focus-visible { outline: 3px solid var(--gold-400); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .pubbar__toggle:hover { background: rgba(255,255,255,.1); } }
.pubbar__menu { display: none; flex-basis: 100%; padding: 8px 0 14px; }
.pubbar__toggle[aria-expanded="true"] + .pubbar__menu { display: block; }
.pubbar a.pubbar__student { background: var(--cream-text); color: var(--maroon-700); }
.pubbar a.pubbar__student:hover { background: var(--gold-200); color: var(--maroon-900); }
.pubbar__menu .pubbar__student { display: flex; width: 100%; min-height: 48px; font-size: 17px; }
.pubnav { display: flex; flex-direction: column; margin: 8px -10px 0; }
.pubnav > a {
  display: flex; align-items: center; min-height: 48px; padding: 0 10px;
  color: var(--cream-text); text-decoration: none; font-weight: 600; font-size: 17px; border-radius: var(--radius-sm);
}
/* The divider is its own straight line over the text's width: a border-top on the rounded link curved down at both
   ends (UAT 11/11/2026, the panel at 390 px). */
.pubnav > a + a { position: relative; }
.pubnav > a + a::before { content: ""; position: absolute; top: 0; left: 10px; right: 10px; border-top: 1px solid rgba(251,243,239,.15); }
.pubnav > a:hover { background: rgba(255,255,255,.1); color: var(--cream-text); }

/* ---------- Shared blocks ---------- */
.pubmain { display: block; }
.kicker { font-size: 13px; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--gold-700); font-weight: 700; margin: 0 0 6px; }
.kicker--light { color: var(--gold-200); }
.pubpage { max-width: 1120px; margin: 0 auto; padding: 24px 16px 56px; }
.pubpage--narrow { max-width: 760px; }
.pubpage__lead { font-size: 18px; color: var(--ink-soft); }
.pubpage__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Home: hero ---------- */
.hero { background: radial-gradient(120% 120% at 85% 0%, var(--maroon-600), var(--maroon-900)); color: var(--cream-text); }
.hero__inner { max-width: 960px; margin: 0 auto; padding: 40px 16px 44px; text-align: center; }
.hero h1 { color: var(--cream-text); font-size: 32px; margin-bottom: 14px; }
.hero__lead { max-width: 58ch; margin: 0 auto 26px; font-size: 17px; color: var(--maroon-100); }
.hero__student {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 20px; border: 1.5px solid var(--glass-border); border-radius: var(--radius); background: var(--glass-bg);
}
.hero__student p { margin: 0; font-weight: 600; }

/* ---------- Home: bands ---------- */
.band { padding: 40px 0; background: var(--canvas); }
.band--soft { background: var(--paper); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.band + .band--soft, .band--soft + .band { border-top: 0; }
.band__inner { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.band__title { text-align: center; color: var(--maroon-700); font-size: 26px; margin-bottom: 22px; }
.band__more { text-align: center; margin: 22px 0 0; font-weight: 600; }

/* ---------- Course cards ---------- */
.pub-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.pub-card { background: var(--card); border: 2px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sticker); display: flex; flex-direction: column; }
.pub-card__cover { display: block; position: relative; aspect-ratio: 125 / 88; background: var(--maroon-800); overflow: hidden; }
.pub-card__cover > img { width: 100%; height: 100%; object-fit: cover; }
.pub-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pub-card__title { font-size: 21px; margin: 0; }
.pub-card__title a { color: var(--ink); text-decoration: none; }
.pub-card__title a:hover { color: var(--maroon-700); }
.pub-card__by { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.pub-card__blurb { margin: 0; font-size: 15.5px; color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.pub-card__go { margin-top: auto; align-self: flex-start; }
.pub-feature { max-width: 960px; margin: 0 auto; }
.pub-feature .pub-card__blurb { -webkit-line-clamp: unset; line-clamp: none; display: block; }

/* ---------- Topics, roles, reviews ---------- */
.topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.topic { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.topic img { width: 100%; height: auto; aspect-ratio: 500 / 280; object-fit: cover; }
.topic__name { display: block; padding: 10px 12px 12px; font-weight: 600; color: var(--maroon-700); }
.roles { list-style: none; margin: 0; padding: 18px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.roles li { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--gold-600); }
.reviews { display: grid; gap: 18px; grid-template-columns: 1fr; max-width: 960px; margin: 0 auto; }
.review { margin: 0; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sticker); padding: 22px 20px; text-align: center; }
.review__photo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; border: 3px solid var(--gold-300); }
.review figcaption { margin-bottom: 10px; }
.review__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--maroon-700); }
.review__role { display: block; font-size: 15px; color: var(--ink-soft); }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; font-size: 17px; }
.review blockquote p::before { content: "“"; }
.review blockquote p::after { content: "”"; }

/* ---------- Course page ---------- */
.crumbs { font-size: 15px; color: var(--ink-soft); margin-bottom: 16px; }
.course-hero { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 28px; }
.course-hero__img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 2px solid var(--line); box-shadow: var(--shadow-sticker); }
.course-hero__body h1 { font-size: 30px; }
.course-hero__actions { display: grid; gap: 12px; margin-top: 18px; max-width: 440px; }
.course-section { max-width: 820px; margin: 0 0 32px; }
.course-section h2 { color: var(--maroon-700); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: "✓"; position: absolute; left: 4px; top: 0; color: var(--yes-600); font-weight: 700; }
.outline-list { list-style: none; margin: 0; padding: 0 16px 14px 16px; display: grid; gap: 6px; font-size: 16px; }
.instructor__row { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
.instructor__photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold-300); }
.instructor__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 6px; }

/* ---------- About (/about): editorial profile ----------
   Tú, UAT 11/11/2026: the old layout was "not very premium or professional"; chosen from three prototypes.
   Masthead (kicker, headline, lead), then the profile: a 4:5 portrait with an offset gold hairline frame, name and
   standfirst, the "Tôi đã:" list as a quiet sidebar with hairlines, the story with a drop cap, the closing statement,
   Giang's signature (src/img/signature-ttg-maroon.png = the design-system ink signature recoloured maroon) and the
   two actions. Below 960 px everything stacks in source order, which is the order of the original text; from 960 px
   a 12-column grid puts the portrait and the list on the left, the reading text on the right. Gold appears only on
   the kicker rules and the portrait frame. Everything is scoped under .about-ed. */
.about-ed { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.about-ed__kicker { display: flex; align-items: center; gap: 10px; }
.about-ed__kicker::before { content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px; background: var(--gold-400); }
.about-ed__mast { padding: 40px 0 36px; border-bottom: 1px solid var(--line-strong); }
.about-ed__title {
  margin: 0 0 20px; font-size: clamp(36px, 5vw, 62px); line-height: 1.08; letter-spacing: var(--tracking-display);
  color: var(--maroon-700); text-wrap: balance;
}
.public .about-ed__lead { margin: 0; max-width: 40rem; font-size: 17px; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }
.about-ed__profile { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding: 40px 0 64px; }
.about-ed__portrait { position: relative; isolation: isolate; margin: 0 12px 12px 0; }
.about-ed__portrait::before {
  content: ""; position: absolute; inset: 12px -12px -12px 12px; z-index: -1;
  border: 1.5px solid var(--gold-400); border-radius: var(--radius-lg);
}
.about-ed__portrait img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radius-lg); background: var(--maroon-100);
  /* The photo's top right is blown-out white; the shadow keeps its edge visible on cream. */
  box-shadow: 0 0 0 1px rgba(122, 18, 50, .06), 0 28px 56px -30px rgba(51, 22, 31, .45);
}
.about-ed__head .kicker { margin-bottom: 4px; }
.about-ed__name {
  margin: 0 0 16px; font-size: clamp(40px, 4.4vw, 56px); line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--ink);
}
.about-ed__standfirst { margin: 0; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.55; font-weight: 500; color: var(--maroon-800); }
.about-ed__creds { border-top: 2px solid var(--maroon-700); padding-top: 14px; }
.about-ed__creds-label { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--maroon-700); }
.about-ed__creds ul { list-style: none; margin: 0; padding: 0; }
.about-ed__creds li { padding: 14px 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.about-ed__creds li + li { border-top: 1px solid var(--line-strong); }
.about-ed__creds strong { font-weight: 600; color: var(--ink); } /* each credential's own first words, so the list scans */
.about-ed__keep { white-space: nowrap; } /* a programme name, a figure or an age group never breaks across lines */
.about-ed__story p { margin: 0 0 1.1em; font-size: var(--text-base); line-height: var(--leading-body); }
.public .about-ed__story p { text-wrap: pretty; }
.public .about-ed__story .about-ed__closing { text-wrap: balance; } /* two sentences, one per line (a <br>), no orphan */
.about-ed__story .about-ed__closing {
  position: relative; margin: 32px 0 0; padding-top: 24px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 1.9vw, 24px); line-height: 1.45; color: var(--maroon-800);
}
.about-ed__closing::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 2px; background: var(--maroon-700); }
.about-ed__sign { display: block; width: 200px; height: auto; margin: 18px 0 0; }
.about-ed__actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 36px; }
.about-ed__actions .btn { flex: 1 1 100%; }
@media (min-width: 480px) { .about-ed__actions .btn { flex: 0 0 auto; } }
@media (min-width: 960px) {
  .about-ed { padding: 0 32px; }
  .about-ed__mast {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding: 88px 0 64px;
  }
  .about-ed__mast .kicker { grid-column: 1 / -1; }
  .about-ed__title { grid-column: 1 / 7; margin: 0; }
  .public .about-ed__lead { grid-column: 7 / 13; max-width: none; font-size: 18px; }
  /* The portrait spans rows 1-2 and the story rows 2-3, so neither column opens an empty gap whichever is taller. */
  .about-ed__profile {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "pt pt pt pt pt . hd hd hd hd hd hd"
      "pt pt pt pt pt . st st st st st st"
      "cr cr cr cr cr . st st st st st st";
    column-gap: 24px; row-gap: 40px; align-items: start; padding: 80px 0 104px;
  }
  .about-ed__portrait { grid-area: pt; margin: 0 18px 18px 0; }
  .about-ed__portrait::before { inset: 18px -18px -18px 18px; }
  .about-ed__head { grid-area: hd; }
  .about-ed__name { margin-bottom: 20px; }
  .about-ed__creds { grid-area: cr; margin: 16px 18px 0 0; }
  .about-ed__story { grid-area: st; }
  .about-ed__sign { width: 220px; margin-left: -10px; } /* the T's swash lines up optically with the text; on a phone it would cut into the 16 px gutter */
  /* Drop cap on the wide column only: on a phone a 3-line cap takes a third of each line. */
  @supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .about-ed__dropcap::first-letter {
      -webkit-initial-letter: 3; initial-letter: 3;
      font-family: var(--font-display); font-weight: 800; color: var(--maroon-700); margin-right: 3px;
    }
  }
}

/* ---------- Contact ---------- */
/* Tú, UAT round 2 (12/11/2026): the three channels are the main thing on /contact, so they are larger here than
   anywhere else. Round 3 (21:19 12/11): "prominent doesn't mean putting the icon in a container, this looks way less
   premium". So the body row is the brand glyphs alone, no tile, border, fill or shadow (tests/e2e/public.spec.js
   "bare glyphs"): 52 px on a phone, 60 px from 640 px, on the left edge of the heading and intro so the row reads as
   the next line of that text block, with wide gaps and a short lift on hover or keyboard focus. Each link is the
   glyph plus 8 px of padding, a 68 to 76 px tap target with no visible box; the list's -8 px margin puts the first
   glyph, not its padding, on the text edge. The envelope fills less of its square than the Zalo and Messenger marks,
   so it is drawn 4 px larger to look the same size. Space: 40 px (48 px from 640 px) from the intro to the glyphs,
   about 64 px from the glyphs to the next heading (on a device that hovers, the tooltip room components.css reserves
   is that space).
   The name is the tooltip (components.css). The footer keeps its small icons (Tú 11/11/2026). */
.cicons--hero { justify-content: flex-start; align-items: center; gap: 20px; margin: 32px 0 56px -8px; }
.cicons--hero .cicon { width: auto; height: auto; padding: 8px; border-radius: 16px; }
.cicons--hero .cicon > img { width: 52px; height: 52px; transition: transform .2s cubic-bezier(.2, 0, 0, 1); }
.cicons--hero .cicon--email > img { width: 56px; height: 56px; }
/* zalo.png: 80.5% squircle in a transparent margin (components.css). Drawn 8 px larger with the slot kept; 1 px more
   on the left so the painted squircle, not the transparent box, sits on the text edge (public.spec.js measures it). */
.cicons--hero .cicon--zalo > img { width: 60px; height: 60px; margin: -4px -3px -4px -5px; }
.cicons--hero .cicon:hover > img, .cicons--hero .cicon:focus-visible > img { transform: translateY(-4px); }
@media (min-width: 640px) {
  .cicons--hero { gap: 32px; margin-top: 40px; }
  .cicons--hero .cicon > img { width: 60px; height: 60px; }
  .cicons--hero .cicon--email > img { width: 64px; height: 64px; }
  .cicons--hero .cicon--zalo > img { width: 68px; height: 68px; margin: -4px -3px -4px -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cicons--hero .cicon > img { transition: none; }
  .cicons--hero .cicon:hover > img, .cicons--hero .cicon:focus-visible > img { transform: none; }
}
.help-list { margin: 0 0 32px; display: grid; gap: 12px; }
.help-list > div { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.help-list dt { font-weight: 700; margin-bottom: 4px; }
.help-list dd { margin: 0; color: var(--ink-soft); }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 24px 16px 56px; }
.legal h1 { font-size: 30px; }
.legal h2 { font-size: 21px; margin-top: 1.6em; color: var(--maroon-700); }
.legal ul { padding-left: 22px; margin: 0 0 1em; }
.legal li + li { margin-top: 8px; }
.legal__kicker { font-size: 13px; letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--gold-700); font-weight: 700; margin: 0 0 6px; }
.legal__facts { list-style: none; padding: 14px 16px !important; background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); }
.legal__facts li + li { margin-top: 4px; }
.legal a, .pubpage a:not(.btn) { overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.pubfoot { background: var(--maroon-800); color: var(--maroon-100); margin-top: 0; }
.pubfoot__inner { max-width: 1120px; margin: 0 auto; padding: 36px 16px 20px; display: grid; gap: 26px; grid-template-columns: 1fr; }
.pubfoot h2 { font-size: 17px; color: var(--gold-200); margin-bottom: 10px; letter-spacing: 0; }
.pubfoot p { margin: 0 0 6px; font-size: 15px; }
.pubfoot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pubfoot a { color: var(--cream-text); text-decoration-color: rgba(251,243,239,.35); }
.pubfoot a:hover { text-decoration-color: var(--gold-400); }
.pubfoot ul a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; }
.pubfoot .cicons { display: flex; gap: 4px; margin-left: -8px; } /* the 44 px square holds a 28 px glyph, so the glyph lines up with the text above */
.pubfoot .cicons a { display: grid; min-height: 44px; }
.pubfoot__reach [role="group"] + [role="group"] { margin-top: 24px; }
@media (hover: hover) and (pointer: fine) {
  /* The icon rows reserve room below for their tooltips (components.css), which already spaces these blocks. */
  .pubfoot__reach [role="group"] + [role="group"] { margin-top: 0; }
  .pubfoot .cicons { padding-bottom: 58px; } /* .pubfoot ul sets padding: 0 */
  .cicons--hero { margin-bottom: 0; }
}

/* ---------- Short text (Tú's rule, UAT 11/11/2026) ----------
   A block of 1 to 3 sentences that fits in 3 lines shows one sentence per line (a <br> in the source) and wraps
   balanced; long prose keeps text-wrap: pretty. Checked by tests/e2e/text-layout.spec.js. */
.public p, .public li, .public dd, .public figcaption { text-wrap: balance; }
.pub-card__blurb, .course-hero .pubpage__lead, .instructor__row p { text-wrap: pretty; }

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  .pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instructor__row { grid-template-columns: 112px 1fr; }
  .hero h1 { font-size: 40px; }
  .pub-feature .pub-card { flex-direction: row; }
  .pub-feature .pub-card__cover { flex: 0 0 46%; align-self: center; }
}
@media (min-width: 960px) {
  .pubbar { position: sticky; top: 0; }
  .pubbar__inner { flex-wrap: nowrap; padding: 6px 16px; }
  .pubbar__toggle { display: none; }
  .pubbar__menu, .pubbar__toggle[aria-expanded="true"] + .pubbar__menu { display: flex; flex: 1 1 auto; align-items: center; padding: 0; }
  .pubbar__menu .pubbar__student { order: 2; width: auto; min-height: 44px; margin-left: auto; font-size: 16px; }
  .pubnav { flex-direction: row; align-items: center; gap: 0 4px; margin: 0 0 0 16px; }
  .pubnav > a { display: inline-flex; min-height: 44px; font-size: 16px; }
  .pubnav > a + a::before { content: none; }
  .pub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course-hero { grid-template-columns: 1.1fr 1fr; align-items: start; gap: 32px; }
  .pubfoot__inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .pubfoot__inner:not(:has(> .pubfoot__company)) { grid-template-columns: 1fr 1fr; } /* /contact: no company block */
  .hero__inner { padding: 64px 16px 68px; }
  .hero h1 { font-size: 48px; }
}