/* ============================================================
   HALO DESIGN ACADEMY — stylesheet
   ------------------------------------------------------------
   How this file is organised (for easy editing):
     1. FONTS & TOKENS      — @font-face, :root variables (colors, spacing)
     2. BASE                — element resets, typography
     3. SHARED COMPONENTS   — used on EVERY page: buttons, badges, header,
                              footer, hero/trial form, cards, grids, bands,
                              CTA banner, FAQ, etc. Edit here to change a
                              component everywhere at once.
     4. PAGE: HOME          — sections unique to index.html (hiring partners,
                              tools we teach)
     5. PAGE: BLOG POST     — sections unique to the blog article page
     6. PAGE: COURSE DETAILS — sections unique to the course page
   Each block is marked with a banner comment like the ones below.
   ============================================================ */

/* ===== FONTS & TOKENS ===== */
@font-face {
  font-family: Outfit;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/outfit-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: Outfit;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/outfit-latinext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+20A0-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --orange: #f19f00;
  --teal: #128c7e;
  --blue: #0369a1;
  --magenta: #be185d;
  --ink: #000;
  --body: #666;
  --line: #e5e5e5;
  --surface: #f7f7f7;
  --badge-blue-bg: #cde1ec;
  --badge-pink-bg: #f2d1df;
  --badge-mint-bg: #d0e8e5;
  --badge-cream-bg: #fceccc;
  --amber-text: #96590a;
  --orange-text: #9a4a00;  /* WCAG-AA compliant deep orange for text (bright #f19f00 fails contrast) */
  --maxw: 1200px;
  --gutter: 20px;
  --radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Outfit, system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: #fff;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { margin: 0; }

h1 { font-weight: 700; font-size: clamp(32px, 5vw, 48px); line-height: 1.1; color: var(--ink); }
h2 { font-weight: 700; font-size: clamp(26px, 3.5vw, 36px); line-height: 1.2; color: var(--ink); }
h3 { font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); }
p  { font-size: 15px; color: var(--body); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(40px, 6vw, 72px); }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--body);
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   SHARED COMPONENTS  (used on every page — edit here to change globally)
   ============================================================ */

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:8px; border:1px solid transparent; cursor:pointer;
  line-height:1; white-space:nowrap; transition:opacity .15s ease; }
.btn:hover { opacity:.88; }
.btn svg { width:18px; height:18px; flex:0 0 auto; }
.btn img { width:18px; height:18px; flex:0 0 auto; }
.btn--dark { background:var(--ink); color:#fff; }
.btn--teal { background:#0e7468; color:#fff; }
.btn--outline { background:#fff; color:var(--ink); border-color:var(--line); }
.btn--link { padding:0; color:var(--ink); font-weight:700; font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; background:none; border:0;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:6px; }
.btn--link svg { display:none; }
.btn--link::after { content:"+"; display:inline-block; margin-left:9px; font-size:16px; font-weight:600;
  text-decoration:none; vertical-align:-1px; }
.course-card .btn--link { color:var(--amber-text); }

/* ---- badges ---- */
.badge-row { display:flex; flex-wrap:wrap; gap:10px; }
.badge { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:12px;
  padding:6px 12px; border-radius:999px; }
.badge svg { width:14px; height:14px; }
.badge img { width:16px; height:16px; object-fit:contain; }
.badge--blue  { background:var(--badge-blue-bg);  color:#024d70; }
.badge--pink  { background:var(--badge-pink-bg);  color:#9d144c; }
.badge--mint  { background:var(--badge-mint-bg);  color:#0a5d52; }
.badge--cream { background:var(--badge-cream-bg); color:var(--orange-text); }

/* ---- top bar ---- */
.topbar { background:var(--ink); color:#fff; font-size:12px; }
.topbar__inner { display:flex; align-items:center; gap:20px; min-height:38px; }
.topbar__contact { display:flex; gap:20px; }
.topbar__contact a { display:inline-flex; align-items:center; gap:6px; }
.topbar__contact svg { width:14px; height:14px; }
.topbar__contact img { width:14px; height:14px; }
.topbar__promo { margin-left:auto; color:#cfcfcf; }
.topbar__cta { padding:6px 14px; font-size:12px; margin-left:8px; }

/* ---- navbar ---- */
.nav { position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); }
.nav__inner { display:flex; align-items:center; gap:24px; min-height:64px; }
.nav__logo { flex:0 0 auto; display:inline-flex; }
.nav__logo img { width:22px; height:26px; }
.nav__menu { display:flex; align-items:center; gap:24px; margin-left:auto; }
.nav__list { list-style:none; display:flex; gap:22px; margin:0; padding:0; }
.nav__item > a { display:inline-flex; align-items:center; gap:4px; font-weight:400; font-size:14px; color:var(--ink); }
.nav__item > a svg { width:14px; height:14px; }
.nav__item > a img { width:14px; height:14px; }
.nav__item--has { position:relative; }
.nav__drop { position:absolute; top:100%; left:0; min-width:200px; background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:8px; list-style:none; margin:6px 0 0;
  box-shadow:0 10px 30px rgba(0,0,0,.08); opacity:0; visibility:hidden; transform:translateY(4px);
  transition:.15s ease; }
.nav__item--has:hover .nav__drop,
.nav__item--has:focus-within .nav__drop { opacity:1; visibility:visible; transform:none; }
.nav__drop a { display:block; padding:8px 10px; border-radius:6px; font-size:14px; }
.nav__drop a:hover { background:var(--surface); }
.nav__burger { display:none; cursor:pointer; align-items:center; }
.nav__burger svg { width:26px; height:26px; }

@media (max-width:900px) {
  .topbar__promo, .topbar__cta { display:none; }
  .nav__burger { display:inline-flex; margin-left:auto; }
  /* full-screen overlay menu: fixed to viewport, own scroll, sits under the
     sticky nav bar (z 50) so the logo + burger stay tappable to close it */
  .nav__menu { display:none; position:fixed; inset:0; z-index:40;
    flex-direction:column; align-items:stretch; gap:0; background:#fff;
    padding:76px var(--gutter) 32px; margin:0;
    overflow-y:auto; overscroll-behavior:contain; }
  .nav__toggle:checked ~ .nav__menu { display:flex; }
  /* lock the page behind the open menu so it can't scroll */
  html:has(.nav__toggle:checked), body:has(.nav__toggle:checked) { overflow:hidden; }
  /* keep the logo + burger above the overlay so the burger stays tappable to close */
  .nav__logo, .nav__burger { position:relative; z-index:41; }
  .nav__burger { width:26px; height:26px; justify-content:center; }
  /* swap the hamburger for an X while the menu is open */
  .nav__toggle:checked ~ .nav__burger svg { display:none; }
  .nav__toggle:checked ~ .nav__burger::before,
  .nav__toggle:checked ~ .nav__burger::after {
    content:""; position:absolute; top:50%; left:50%;
    width:24px; height:2px; background:var(--ink); border-radius:2px; }
  .nav__toggle:checked ~ .nav__burger::before { transform:translate(-50%,-50%) rotate(45deg); }
  .nav__toggle:checked ~ .nav__burger::after  { transform:translate(-50%,-50%) rotate(-45deg); }
  .nav__list { flex-direction:column; gap:0; }
  .nav__item > a { padding:12px 0; }
  .nav__drop { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; padding:0 0 8px 14px; margin:0; }
  .nav__cta { margin-top:12px; }
}

/* ---- footer ---- */
.footer { background:var(--ink); color:#cfcfcf; font-size:14px; }
.footer a:hover { color:#fff; }
.footer__logo { width:26px; height:31px; display:inline-block; background:#fff;
  -webkit-mask:url(/assets/img/logo/halo-logo.png) center/contain no-repeat;
  mask:url(/assets/img/logo/halo-logo.png) center/contain no-repeat; }
.footer__top { display:grid; gap:32px; grid-template-columns:1.4fr repeat(3,1fr); padding-block:48px; }
.footer__brand-phone { color:#fff; font-size:24px; font-weight:700; margin:16px 0 12px; }
.footer__addr { font-size:14px; line-height:1.7; font-style:normal; }
.footer__addr a { color:#cfcfcf; }
.footer__social { display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }
.footer__social a { color:#cfcfcf; }
.footer__social svg { width:18px; height:18px; }
.footer__col h3 { color:#fff; font-size:18px; margin-bottom:16px; }
.footer__col ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer__serve { border-top:1px solid rgba(255,255,255,.14); padding-block:28px; }
.footer__serve-title { color:#fff; font-size:20px; font-weight:700; margin-bottom:16px; }
.footer__locations { display:flex; flex-wrap:wrap; row-gap:10px; font-size:14px; color:#cfcfcf; }
.footer__locations span { display:inline-flex; align-items:center; }
.footer__locations span:not(:last-child)::after { content:"|"; margin:0 14px; color:#5a5a5a; }
.footer__legal { border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between;
  gap:16px; padding-block:18px; font-size:13px; flex-wrap:wrap; }
.footer__legal-links { display:flex; gap:24px; }
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__top{ grid-template-columns:1fr; } .footer__legal{ flex-direction:column; } }

/* ---- hero + trial form ---- */
.hero { padding-block:clamp(48px,6vw,80px) 64px; }
.hero__grid { display:grid; grid-template-columns:1fr 380px; gap:clamp(48px,8vw,124px); align-items:center; }
.hero h1 { font-size:clamp(34px,4.2vw,54px); }
.crumb { font-size:13px; color:var(--body); margin-bottom:18px; }
.crumb a { color:var(--body); }
.crumb img { display:inline-block; width:11px; height:11px; vertical-align:middle; margin:0 6px; opacity:.7; }
.hero__lead { max-width:52ch; margin:16px 0 22px; }
.hero__actions { display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.hero__info { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:28px; align-items:start; }
.hero__info-icon { width:24px; height:24px; display:block; margin-bottom:10px; }
.hero__info-label { font-size:15px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.hero__info p { font-size:13px; line-height:1.6; }
.hero__img { margin-top:36px; }
.hero__img img { width:100%; border-radius:var(--radius); aspect-ratio:16/6; object-fit:cover; }

.trialcard { position:sticky; top:84px; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.05); }
.trialcard__title { font-size:18px; line-height:1.3; color:var(--ink); font-weight:700; margin-bottom:16px; }
.trialcard form { display:grid; gap:12px; }
.trialcard label { display:grid; gap:6px; font-size:12px; font-weight:600; color:var(--ink); }
.trialcard input, .trialcard select, .input-date { border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; font-size:14px; font-weight:400; background:#fff; }
.trialcard select { appearance:none; -webkit-appearance:none;
  background-image:url(../img/icons/chevron-down.png);
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 12px;
  padding-right:38px; }
/* native date field: calendar icon always visible + the whole field opens the
   picker in one click (the picker indicator is stretched over the full field).
   Keyed off .input-date as well as the trial card, so a date field copied onto
   a new page keeps its icon and full-field click target outside .trialcard. */
.trialcard input[type="date"], .input-date { appearance:none; -webkit-appearance:none; position:relative; cursor:pointer;
  color:var(--body); padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px 18px; }
.trialcard input[type="date"]::-webkit-calendar-picker-indicator,
.input-date::-webkit-calendar-picker-indicator { position:absolute; inset:0;
  width:auto; height:auto; margin:0; padding:0; opacity:0; cursor:pointer; }
.trialcard input[type="date"]::-webkit-inner-spin-button,
.input-date::-webkit-inner-spin-button { display:none; }
/* placeholder-style labels sit inside the fields */
.trialcard input::placeholder { color:var(--body); opacity:1; }
.trialcard fieldset { border:0; margin:0; padding:0; display:grid; gap:8px; }
.trialcard legend { font-size:12px; font-weight:600; color:var(--ink); padding:0; margin-bottom:2px; }
.trialcard__radios { display:flex; gap:16px; flex-wrap:wrap; }
.trialcard .radio { display:flex; align-items:center; gap:8px; font-weight:400; }
.trialcard__submit { width:100%; justify-content:center; margin-top:4px; }

/* ---- section head + grids ---- */
.section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:28px; }
.section-head p { margin-top:8px; max-width:60ch; }
.section-head .btn--link { margin-top:8px; flex:0 0 auto; }
.section-head__wrap { max-width:560px; }
/* "view all" link: sits top-right on desktop, drops below the cards on mobile */
.section--linked > .container { position:relative; }
.section--linked .section-link { position:absolute; top:4px; right:var(--gutter); margin:0; }
@media (max-width:640px){
  /* "view all / see all / read all" links drop below the cards, centred */
  .section--linked .section-link { position:static; display:block; width:fit-content; margin:26px auto 0; }
}
.grid { display:grid; gap:24px; }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }

/* ---- cards ---- */
.card { border:1px solid var(--line); border-radius:16px; padding:30px; background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.05); }
.course-card { display:flex; flex-direction:column; }
.course-card__icon { color:var(--body); }
.course-card__icon svg { width:46px; height:46px; }
.course-card__icon img { height:46px; width:auto; }
.course-card__num { color:var(--ink); font-weight:700; font-size:15px; margin-top:72px; }
.course-card h3 { margin:2px 0 12px; }
.course-card p { font-size:14px; margin-bottom:28px; }
.course-card .btn--link { margin-top:auto; color:var(--orange-text); }

.testimonial-card > img:first-child { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; }
.testimonial-card__name { font-weight:700; color:var(--ink); margin-top:12px; }
.testimonial-card__role { font-size:13px; }
.testimonial-card__quote-icon { width:26px; height:auto; margin:14px 0 6px; }
.testimonial-card__quote { font-size:13px; margin:0 0 10px; }
.testimonial-card__logo { height:26px; width:auto; margin-top:12px; }

.blog-card img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px; }
.blog-card__meta { font-size:12px; color:var(--body); margin:12px 0 6px; display:flex; align-items:center; gap:8px; }
.blog-card__sep { display:inline-block; width:22px; height:1px; background:var(--orange); flex:0 0 auto; }
.blog-card h3 { font-size:16px; }

/* ============================================================
   PAGE: BLOG POST  (blog/<post>/index.html) — article-body layout
   ============================================================ */
/* no align-items:start — the aside must stretch to the row height or the
   sticky course card below has no scroll range to stick within */
.blog-post__grid { display:grid; grid-template-columns:1fr 340px; gap:56px; }
.blog-post__main > p { margin:16px 0; }
.blog-post__feature { display:grid; grid-template-columns:300px 1fr; gap:32px; align-items:start; margin:32px 0; }
.blog-post__feature p { margin:0 0 14px; }
.blog-post__sq { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; }
.blog-post__imgs { margin:28px 0; }
.blog-post__imgs figure { margin:0; }
.blog-post__imgs img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; }
.blog-post__imgs figcaption { font-size:14px; color:var(--body); margin-top:12px; }
.blog-post__freebie { text-align:center; margin:40px 0 4px; }
.blog-post__freebie .btn { min-width:300px; padding:17px 40px; font-size:15px; justify-content:center; }
.blog-post__aside .course-card { position:sticky; top:90px; }

/* about the author (no card — photo left, heading + linkedin + bio right) */
.author { display:grid; grid-template-columns:176px 1fr; gap:28px; align-items:start; }
.author__photo img { width:176px; height:176px; border-radius:12px; object-fit:cover; display:block; }
.author__head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.author__head h3 { font-size:22px; }
.author__linkedin { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border:1.5px solid #0a66c2; border-radius:6px; color:#0a66c2; }
.author__linkedin svg { width:16px; height:16px; }
.author__body p { font-size:14px; line-height:1.7; color:var(--body); }
/* author block sits at the end of the article column — same spacing the
   blog-post-details page gives it via .pp-block */
.blog-post__main .author { margin-top:52px; }
.postnav { display:flex; justify-content:space-between; gap:16px; margin-top:32px; font-size:14px; }
@media (max-width:640px){
  .author{ grid-template-columns:1fr; gap:18px; }
  .blog-post__freebie .btn{ min-width:0; width:100%; }
}
@media (max-width:900px){
  .blog-post__grid { grid-template-columns:1fr; gap:32px; }
  .blog-post__feature { grid-template-columns:1fr; gap:20px; }
  .blog-post__aside .course-card { position:static; }
}

.project-card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.project-card__title { font-weight:700; color:var(--ink); margin-top:10px; }
.project-card__cat { font-size:13px; }

.logo-wall { display:flex; flex-wrap:wrap; align-items:center; gap:28px 40px; }
.logo-wall img { height:34px; width:auto; opacity:.85; }

/* ============================================================
   PAGE: HOME  (index.html) — sections unique to the home page
   ============================================================ */

/* ---- hiring partners: heading left, logo grid right ---- */
.partners { display:grid; grid-template-columns:1fr 1.7fr; gap:48px; align-items:center; }
.partners__head h2 { margin-bottom:20px; }
.partners__logos { gap:28px 48px; }
.partners__logos img { height:32px; width:auto; opacity:1; }

/* ---- tools we teach: heading left, chip grid right ---- */
.tools { display:grid; grid-template-columns:1fr 1.7fr; gap:48px; align-items:center; }
.tools__head p { margin-top:12px; max-width:44ch; }
.tools__chips { display:flex; flex-wrap:wrap; gap:14px; }
.tool-chip { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line);
  border-radius:999px; padding:9px 18px; font-size:14px; font-weight:600; color:var(--ink); background:#fff; }
.tool-chip svg { width:18px; height:18px; flex:0 0 auto; }

@media (max-width:900px){
  .partners, .tools { grid-template-columns:1fr; gap:28px; }
}

/* ---- bands ---- */
.stats-band { background:var(--ink); color:#fff; }
.stats-band__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding-block:clamp(56px,7vw,96px); }
.stats-band__num { font-size:clamp(72px,9vw,132px); font-weight:700; line-height:1; letter-spacing:-.02em; color:#fff; }
.stats-band__label { font-size:20px; font-weight:700; margin-top:14px; color:#fff; }
.stats-band__note { font-size:14px; color:#bdbdbd; margin-top:12px; max-width:34ch; }

.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.feature-grid--2 { grid-template-columns:repeat(2,1fr); }
.feature-grid__item svg { width:26px; height:26px; color:var(--ink); }
.feature-grid__icon { width:26px; height:26px; }
.feature-grid__item h3 { font-size:16px; margin:10px 0 6px; }
.feature-grid__item p { font-size:14px; }

.cream-band { background:var(--badge-cream-bg); border-radius:var(--radius); padding:26px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.cream-band h3 { font-size:18px; }

.cta-banner { display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:stretch; }
.cta-banner__media { position:relative; min-height:280px; border-radius:16px; overflow:hidden; }
.cta-banner__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* dark overlay dims the whole photo so the white heading stays legible */
.cta-banner__media::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.32)); }
.cta-banner__media h2 { position:absolute; z-index:1; left:40px; right:40px; bottom:36px; color:#fff; font-size:clamp(28px,3vw,40px); }
.cta-banner__panel { background:var(--ink); color:#fff; padding:32px; border-radius:16px; min-height:280px;
  display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.cta-banner__arrow { align-self:flex-end; }
.cta-banner__arrow svg { width:26px; height:26px; }
.cta-banner__cta { font-size:18px; font-weight:600; color:#fff; }

/* ---- faq list (always expanded — no collapse/toggle) ---- */
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.faq { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; padding:18px 0 6px; font-weight:600; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  cursor:default; pointer-events:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq p { padding:0 0 18px; font-size:14px; }

/* ---- pagination ---- */
.pager { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:36px; }
.pager a, .pager span { min-width:34px; height:34px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:7px; border:1px solid var(--line); font-size:14px; font-weight:600; }
.pager .is-active { background:var(--orange); color:#000; border-color:var(--orange); }

/* ---- upcoming batches rows (course detail) ---- */
.batch-row { display:grid; grid-template-columns:repeat(4,1fr) auto; gap:16px; align-items:center; }
@media (max-width:720px){
  .batch-row { grid-template-columns:1fr; }
  .batch-row .btn { justify-self:start; }
}

/* ---- usp list (all courses) ---- */
/* wider left column + larger gap so title and copy breathe on desktop */
.usp__row { display:grid; grid-template-columns:1fr 2.6fr; gap:72px; align-items:start;
  padding:22px 0; border-bottom:1px solid var(--line); }
.usp__row h3 { font-size:18px; }
.usp__row p { font-size:14px; }

/* ---- static charts (course details) ---- */
.chart { width:100%; max-width:340px; height:auto; }

/* ---- responsive collapses ---- */
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .trialcard{ position:static; }
  .hero__info{ grid-template-columns:1fr 1fr; }
  .grid--3,.grid--4,.feature-grid,.feature-grid--2,.cta-banner,.faq-grid,.stats-band__grid{ grid-template-columns:1fr; }
  .grid--4{ grid-template-columns:1fr 1fr; }
  .cta-banner__media{ min-height:220px; }
  .cta-banner__media h2{ left:24px; right:24px; bottom:24px; }
}
@media (max-width:640px){
  .grid--2,.grid--4{ grid-template-columns:1fr; }
  .usp__row{ grid-template-columns:1fr; gap:6px; }
  .section-head{ flex-direction:column; align-items:start; }
  /* section-head "see all / explore more" links centre on phones */
  .section-head .btn--link{ align-self:center; }
  /* hero buttons stack full-width on phones */
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; justify-content:center; }

  /* more breathing room between stacked testimonial + blog cards */
  .grid:has(.testimonial-card),
  .grid:has(.blog-card){ gap:40px; }

  /* CTA panel keeps its arrow top-right / text bottom-left layout on phones
     too (per the client reference) — only the side padding tightens */
  .cta-banner__panel{ padding:32px 28px; }

  /* hiring partners: "Explore more" drops below the logos, centred.
     display:contents lifts the h2 + link out of .partners__head so
     they can be reordered as flex items of .partners */
  .partners{ display:flex; flex-direction:column; align-items:stretch; }
  .partners__head{ display:contents; }
  .partners__head h2{ order:1; }
  .partners__logos{ order:2; }
  .partners__head .btn--link{ order:3; align-self:center; margin-top:24px; }

  /* generic: a section-head link drops below the cards, centred (same trick).
     Add .section--link-bottom to the <section> to opt in. */
  .section--link-bottom > .container{ display:flex; flex-direction:column; }
  .section--link-bottom .section-head{ display:contents; }
  .section--link-bottom .section-head h2{ order:1; margin-bottom:28px; }
  .section--link-bottom > .container > .grid{ order:2; }
  .section--link-bottom .section-head .btn--link{ order:3; align-self:center; margin-top:26px; }

  /* FAQs: "Explore more" drops below the questions, centred (same trick) */
  .faq-block .container{ display:flex; flex-direction:column; }
  .faq-block .section-head{ display:contents; }
  .faq-block .section-head h2{ order:1; }
  .faq-block .faq-grid{ order:2; }
  .faq-block .section-head .btn--link{ order:3; align-self:center; margin-top:26px; }
}

/* ============================================================
   PAGE: COURSE DETAILS  (ui-ux-design-course/index.html)
   Styles below are used only on the course-details page.
   ============================================================ */

/* -- course overview: info card (left) + main content (right) -- */
.course-intro { display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start; }

/* left: sticky info card */
.course-info { position:sticky; top:90px; border:1px solid var(--line); border-radius:16px;
  padding:26px; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.05); }
.course-info__price { font-size:40px; font-weight:700; color:var(--ink); line-height:1; margin-bottom:20px; }
.course-info__price span { font-size:16px; font-weight:600; color:var(--body); }
.course-info__meta { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.course-info__meta > div { display:flex; flex-direction:column; gap:2px; padding:12px 14px; }
.course-info__meta > div + div { border-left:1px solid var(--line); }
.course-info__meta-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--body); }
.course-info__meta-val { font-size:14px; font-weight:700; color:var(--ink); }
.course-info__list { list-style:none; margin:18px 0; padding:0; display:grid; gap:12px; font-size:14px; color:var(--ink); }
.course-info__list strong { font-weight:700; }
.course-info__actions { display:grid; gap:10px; }
.course-info__actions .btn { width:100%; justify-content:center; }

/* right: heading + panels */
.course-intro__main > h2 { margin-bottom:14px; }
.course-intro__main > p { margin:0 0 14px; }

/* grey panel header used for Course Stats / Software / AI Tools */
.course-panel { margin-top:24px; }
.course-panel__head { background:var(--surface); border-radius:12px; padding:16px 22px; margin-bottom:20px; }
.course-panel__head h3 { font-size:20px; }

/* course stats: icon + number + label row */
.course-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; padding:0 8px; }
.course-stat { text-align:center; }
.course-stat svg { width:30px; height:30px; margin:0 auto 10px; display:block; }
.course-stat__num { font-size:22px; font-weight:700; color:var(--ink); }
.course-stat__label { font-size:13px; color:var(--body); margin-top:2px; }

/* software taught: white bordered cards with icon + label */
.software-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.software-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  border:1px solid var(--line); border-radius:12px; padding:24px 12px; font-size:14px; font-weight:600; color:var(--ink); }
.software-card img { height:32px; width:auto; max-width:44px; object-fit:contain; }

@media (max-width:900px){
  .course-intro { grid-template-columns:1fr; gap:28px; }
  .course-info { position:static; }
  .course-stats { grid-template-columns:repeat(3,1fr); gap:24px 12px; }
  .software-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
  .course-stats { grid-template-columns:repeat(2,1fr); }
  .software-grid { grid-template-columns:repeat(2,1fr); }
}

/* -- "students placed" band (4 cards under the hero) -- */
.placed-band { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.placed-card { display:flex; align-items:center; gap:16px; border:1px solid var(--line);
  border-radius:14px; padding:18px 22px; box-shadow:0 12px 30px rgba(0,0,0,.04); }
.placed-card__icon { flex:0 0 auto; width:52px; height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; }
.placed-card__icon svg { width:26px; height:26px; }
.placed-card__num { font-size:22px; font-weight:700; color:var(--ink); line-height:1; }
.placed-card__label { font-size:13px; color:var(--body); margin-top:4px; }
.placed-card--orange .placed-card__icon { background:#fdf0d9; color:#e0921a; }
.placed-card--pink   .placed-card__icon { background:#fbe4ee; color:#d84f8c; }
.placed-card--mint   .placed-card__icon { background:#dff3e6; color:#2fa060; }
.placed-card--blue   .placed-card__icon { background:#e2eefb; color:#2f7fd8; }

/* -- info-card list icons + notes below the card -- */
.course-info__list li { display:flex; align-items:center; gap:10px; }
.course-info__list svg { width:16px; height:16px; flex:0 0 auto; color:var(--body); }
.course-info__notes { margin-top:26px; display:grid; gap:18px; }
.course-info__notes-title { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:5px; }
.course-info__notes p { font-size:13px; line-height:1.6; }

/* -- cream band: icon + copy + button -- */
/* one line only where there is room; below this the base flex-wrap:wrap applies
   so the copy is not squeezed into a tall narrow column on tablets */
@media (min-width:901px){ .cream-band { flex-wrap:nowrap; } }
.cream-band__body { display:flex; align-items:center; gap:18px; }
.cream-band__icon { flex:0 0 auto; width:48px; height:48px; border-radius:10px; background:#f4e8d0;
  display:flex; align-items:center; justify-content:center; color:var(--orange); }
.cream-band__icon svg { width:26px; height:26px; }
.cream-band__text p { font-size:14px; color:var(--body); margin-top:4px; max-width:60ch; }
.cream-band .btn { flex:0 0 auto; }

/* -- course highlights: green-check list, 3 columns -- */
.highlight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px 40px; }
.highlight { display:grid; grid-template-columns:20px 1fr; gap:12px; font-size:14px; line-height:1.6; }
.highlight svg { width:18px; height:18px; color:var(--teal); margin-top:2px; }

/* -- course breakdown: week cards -- */
.week-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:36px 28px; }
.week__no { font-size:13px; font-weight:700; color:var(--ink); }
.week__title { font-size:20px; color:#8a8a8a; font-weight:700; margin:4px 0 14px; }
.week__tag { display:inline-block; font-size:12px; font-weight:600; border-radius:6px; padding:5px 14px; margin-bottom:18px; }
.week__tag--orange { background:#fdf0d9; color:#9a4a00; }
.week__tag--green  { background:#dff3e6; color:#1f7a48; }
.week__tag--purple { background:#ece7fb; color:#5b3bc4; }
.week__tag--red    { background:#fde3e3; color:#a82828; }
.week__list { list-style:none; padding:0; margin:0; display:grid; gap:11px; font-size:14px; }
.week__list li { display:grid; grid-template-columns:16px 1fr; gap:8px; }
.week__list svg { width:13px; height:13px; color:var(--orange); margin-top:4px; }

/* -- upcoming batches: bordered rows -- */
.batch-list { display:grid; gap:20px; }
.batch-card { display:grid; grid-template-columns:auto repeat(4,1fr) auto; gap:24px; align-items:center;
  border:1px solid var(--line); border-radius:14px; padding:22px 26px; }
.batch-date { width:64px; height:64px; border-radius:12px; background:#b45309; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1; }
.batch-date span:first-child { font-size:22px; font-weight:700; }
.batch-date span:last-child { font-size:14px; font-weight:600; }
.batch-field__label { font-size:15px; font-weight:700; color:var(--ink); }
.batch-field__val { font-size:14px; color:var(--body); margin-top:4px; }

/* -- how our course works: 4 steps -- */
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.step__icon { width:52px; height:52px; border-radius:12px; background:#fdf0d9;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--orange); }
.step__icon svg { width:26px; height:26px; }
.step h3 { font-size:16px; margin-bottom:8px; }
.step p { font-size:14px; }

/* -- key features: numbered 2-column list -- */
.keyfeat-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 64px; }
.keyfeat { display:grid; grid-template-columns:44px 150px 1fr; gap:16px; align-items:start;
  padding:22px 0; border-top:1px solid var(--line); }
.keyfeat__no { font-size:26px; font-weight:700; color:#8a8a8a; line-height:1.2; }
.keyfeat__title { font-weight:700; color:var(--ink); font-size:15px; padding-top:6px; }
.keyfeat p { font-size:13px; line-height:1.6; }

/* -- industry insights: chart box + text, two units -- */
.insights-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.insight { display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:center; }
.insight__chart { border:1px solid var(--line); border-radius:14px; padding:24px 20px; }
.bar-chart { display:flex; align-items:flex-end; gap:28px; height:170px; padding-top:26px; }
.bar { flex:1; border-radius:8px 8px 0 0; position:relative; }
.bar span { position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; }
.bar--pink { background:#f8dce8; height:62%; }
.bar--blue { background:#dcebfb; height:88%; }
.insight h3 { font-size:20px; margin-bottom:12px; }
.insight p { font-size:13px; line-height:1.6; margin:0 0 12px; }

/* -- the AI advantage: 6 items, 2 columns -- */
.aiadv-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 64px; }
.aiadv { padding:24px 0; border-bottom:1px solid var(--line); }
.aiadv__head { display:flex; align-items:center; gap:9px; font-weight:700; color:var(--ink); margin-bottom:14px; }
.aiadv__head svg { width:22px; height:22px; color:var(--ink); }
.aiadv p { font-size:14px; line-height:1.6; }

/* -- career graph & salary growth -- */
.career-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.career h3 { font-size:20px; margin-bottom:12px; }
.career > p { font-size:14px; margin-bottom:20px; }
.career-row { display:grid; grid-template-columns:210px 1fr; gap:20px; padding:14px 0; align-items:start; }
.career-row__stage { display:grid; grid-template-columns:16px 1fr; gap:12px; }
.career-row__dot { width:12px; height:12px; border-radius:50%; border:3px solid var(--orange); margin-top:4px; }
.career-row__period { font-weight:700; color:var(--ink); font-size:14px; }
.career-row__role { font-size:13px; color:var(--body); margin-top:3px; }
.career-row__desc { font-size:13px; color:var(--body); line-height:1.6; }

/* -- core competencies: heading left, copy + checks right -- */
.corecomp { display:grid; grid-template-columns:1fr 1.4fr; gap:56px; align-items:start; }
.corecomp__body > p { font-size:14px; line-height:1.7; margin:0 0 14px; }
.corecomp__checks { display:grid; grid-template-columns:1fr 1fr; gap:22px 40px; margin-top:22px; }

/* -- "want to get placed" CTA: image left, dark panel right -- */
.place-cta { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.place-cta__img { position:relative; border-radius:16px; overflow:hidden; min-height:260px; }
.place-cta__img img { width:100%; height:100%; object-fit:cover; display:block; }
/* same dark overlay as the home-page CTA image */
.place-cta__img::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.32)); }
.place-cta__panel { background:var(--ink); color:#fff; border-radius:16px; padding:44px;
  display:flex; flex-direction:column; justify-content:space-between; gap:28px; }
.place-cta__panel h2 { font-size:clamp(28px,3vw,38px); color:#fff; line-height:1.1; }
.place-cta__link { display:flex; align-items:center; justify-content:space-between;
  color:#fff; font-size:18px; font-weight:600; }
.place-cta__link svg { width:26px; height:26px; }

/* -- faculty profile -- */
.faculty { display:flex; align-items:center; gap:18px 30px; flex-wrap:wrap; }
.faculty__name h3 { font-size:18px; }
.faculty__name p { font-size:13px; color:var(--body); margin-top:2px; }
.faculty__badges { display:flex; gap:10px; }
.faculty__badge { height:60px; width:auto; display:block; }
.faculty__worked { font-weight:700; color:var(--ink); }
.faculty__logos { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.faculty__logos img { height:28px; width:auto; opacity:.9; }

/* -- course-details responsive collapses -- */
@media (max-width:900px){
  .placed-band { grid-template-columns:1fr 1fr; }
  .highlight-grid { grid-template-columns:1fr 1fr; }
  .week-grid { grid-template-columns:1fr 1fr; }
  .steps-grid { grid-template-columns:1fr 1fr; }
  .keyfeat-grid { grid-template-columns:1fr; }
  .insights-grid { grid-template-columns:1fr; }
  .aiadv-grid { grid-template-columns:1fr; }
  .career-grid { grid-template-columns:1fr; gap:36px; }
  .corecomp { grid-template-columns:1fr; gap:24px; }
  .place-cta { grid-template-columns:1fr; }
  .batch-card { grid-template-columns:auto 1fr 1fr; gap:18px 24px; }
  .batch-card .btn { grid-column:1 / -1; justify-self:start; }
  /* below 901px the band wraps (see the min-width rule above), so the button
     takes its own line — make it fill that line rather than sit half-width */
  .cream-band .btn { flex:1 0 100%; justify-content:center; }
}
@media (max-width:560px){
  .placed-band { grid-template-columns:1fr; }
  .highlight-grid { grid-template-columns:1fr; }
  .week-grid { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr; }
  .insight { grid-template-columns:1fr; gap:20px; }
  .corecomp__checks { grid-template-columns:1fr; }
  .keyfeat { grid-template-columns:40px 1fr; }
  .keyfeat p { grid-column:1 / -1; }
  .career-row { grid-template-columns:1fr; gap:8px; }
  .batch-card { grid-template-columns:1fr; text-align:left; gap:14px; }
  /* full-width CTAs on phones */
  .batch-card .btn { justify-self:stretch; width:100%; justify-content:center; }
  /* "Worked at" starts its own line, logos follow underneath */
  .faculty__worked { flex:0 0 100%; }
}

/* ============================================================
   PAGE: BLOG POST DETAILS  (blog/blog-post-details/index.html)
   Article column (left) + sticky course card (right).
   Reuses course-detail components at fewer grid tracks.
   ============================================================ */
/* no align-items:start here — the aside must stretch to the row height or the
   sticky course card below has no scroll range to stick within */
.postpage__grid { display:grid; grid-template-columns:1fr 340px; gap:56px; }
.postpage__aside .course-card { position:sticky; top:90px; }
.pp-block + .pp-block { margin-top:52px; }
.pp-block > p { margin:0 0 16px; }

/* narrower article column → fewer grid tracks than the full-width course page */
.postpage__main .highlight-grid { grid-template-columns:1fr 1fr; }
/* same 5 tracks as the base rule — only the gap tightens for the narrow column */
.postpage__main .course-stats { gap:16px; }
.postpage__main .steps-grid { grid-template-columns:repeat(3,1fr); row-gap:44px; }
.postpage__main .week-grid { grid-template-columns:1fr 1fr; }
.postpage__main .aiadv-grid { grid-template-columns:1fr; }
/* key features: number + title on one line, paragraph full-width below */
.postpage__main .keyfeat { grid-template-columns:44px 1fr; }
.postpage__main .keyfeat__title { padding-top:6px; }
.postpage__main .keyfeat p { grid-column:2; margin-top:10px; }

/* "courses we offer" grid */
.coursebox-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

@media (max-width:900px){
  .postpage__grid { grid-template-columns:1fr; gap:40px; }
  .postpage__aside .course-card { position:static; }
  .postpage__main .course-stats { grid-template-columns:repeat(3,1fr); }
  .postpage__main .steps-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .postpage__main .highlight-grid { grid-template-columns:1fr; }
  .postpage__main .course-stats { grid-template-columns:repeat(2,1fr); }
  .postpage__main .steps-grid { grid-template-columns:1fr; }
  .postpage__main .week-grid { grid-template-columns:1fr; }
  .coursebox-grid { grid-template-columns:1fr; }
}