/* ── Personal homepage composition ────────────────────────────────
   Homepage-only layout for nguyenthibichlien.com, loaded from
   pages/home.html on top of the shared shell - the same pattern
   products/website_studio/static/website_studio/homepage.css already
   uses for its own homepage. Reuses shared tokens/primitives only
   (--container-canvas, --space-*, .eyebrow, .feature-spotlight from
   design-system/components/cards.css) - no new colors, no new font.

   The wide desktop canvas (--container-canvas: 1440px, see
   layouts/page.css) left a large empty gap beside the hero on desktop.
   Rather than stretching hero copy across the full width, this splits
   the top of the homepage into an asymmetric grid: the hero keeps its
   own controlled measure on the left, and the mentorship feature fills
   the right - composition, not a wider hero, and not a boxed card
   floating in reserved space (a first attempt at this used a boxed
   .cta-block card in its own column, which left a large empty area
   below it - see .home-feature below instead).

   Every selector below is scoped under `.home-page` (the wrapper
   pages/home.html puts around {% block content %}) precisely because
   .section/.main-content are shared chrome rendered by every page of
   every product - this file only ever tightens spacing for the
   homepage's own content, never sitewide.
*/

/* ── Hero portrait - a subtle personal-identity element beside the
   headline, not in the header/nav (which already carries the name as
   text only). Small and unframed on purpose: no card, border, shadow,
   or gradient - the engineering headline stays the primary mark.
   `margin-bottom` moves from h1 (its own shared page.css rule) onto this
   row instead, since h1 is now a flex item here rather than a direct
   .hero-content child - the space before .hero-lede is preserved either
   way, this just relocates which box provides it so `align-items:
   center` isn't thrown off by the item's own leftover bottom margin. */
.hero-heading-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.hero-heading-row h1 {
    margin-bottom: 0;
}

/* ── Typography experiment: the hero headline is the main event -
   already `--font-mono` from chrome.css's sitewide h1 rule, at the
   same --type-display-size/line-height the shared design system
   already sets (unchanged). Tighter tracking and a heavier weight than
   the generic h1 rule give it a more architectural, considered display
   character specifically here, rather than reading as an oversized
   copy of a section heading. */
.hero h1 {
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hero-portrait {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    /* The source photo is a tall portrait crop (1066x1600) with the face
       in the upper ~40% and crossed arms/torso filling the rest -
       object-fit: cover already fills this square frame from the image's
       full width (the image is proportionally taller than the frame), so
       the only lever left is *where* the resulting vertical window sits.
       Anchoring to the top keeps face + shoulders in frame and crops the
       lower body, instead of the default center crop landing mid-torso. */
    object-position: center top;
    flex-shrink: 0;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-8);
    /* Centers the (shorter) mentorship feature against the hero instead
       of pinning both to the top and leaving empty space below the
       shorter column. */
    align-items: center;
}

.home-hero-grid .hero {
    /* Was `var(--space-8) 0`, doubling up with .main-content's own
       padding-top (page.css) for an oversized header-to-hero gap only
       the homepage had (no other page nests .hero inside .main-content
       and adds a second layer of top padding). Zero top padding here
       means the homepage gets the exact same header-to-content gap
       every other personal page already has. */
    padding: 0 0 var(--space-6) 0;
}

/* Unboxed on purpose - no border, no shadow, no reserved second slot
   for the future video (Issue: "do not reserve space for content that
   does not exist yet"). Separated from the hero by a plain neutral
   hairline, the same "thin --color-border rule as a column divider"
   pattern components/cards.css's .feature-spotlight-byline already
   uses - not a colored card edge. */
/* A subtle highlighted panel, not a heavy card - the same green accent
   language already used for the "Book a free Teams call" CTA/Contact
   page (--accent-editorial-*), reused here rather than a new color, per
   the same "reuse an existing token" discipline. Was a plain left-border
   divider; now a full light panel so the mentorship feature reads as its
   own distinct block beside the hero, not just a rule-separated column. */
.home-feature {
    padding: var(--space-6);
    background: var(--accent-editorial-bg);
    /* Softened from the raw accent (too strong a line for "subtle") via
       color-mix rather than a new hex value - no dedicated softer-border
       tier exists in the accent-editorial family (its -fg is documented
       "text use only"). */
    border: 1px solid color-mix(in srgb, var(--accent-editorial-strong) 35%, transparent);
    border-radius: var(--radius-lg);
}

.home-feature h2 {
    font-size: var(--type-heading-l-size);
    margin: var(--space-2) 0 var(--space-3);
}

.home-feature p {
    color: var(--color-text-muted);
    max-width: 30ch;
}

/* ── Tighter homepage vertical rhythm ──────────────────────────────
   .section's own sitewide default (page.css) is 3rem between every
   section on every page - reduced here for the homepage only, which
   stacks five sections in one scroll (Featured Projects, Interactive
   Demos, Latest Article, Work With Me) and read as needing more scroll
   than the content actually warrants. */
.home-page .section {
    margin-bottom: var(--space-6);
}

/* ── Latest Article - use the full section width ───────────────────
   The single-item spotlight used to also carry .feature-spotlight--narrow
   (cards.css, max-width: 42rem), capping it to roughly half the
   available canvas and leaving the other half blank. Removed from the
   Article branch only (home.html) - Featured Project's own single-item
   case keeps --narrow. .feature-spotlight-summary's own max-width: 60ch
   (cards.css, untouched) still keeps the paragraph itself readable; the
   extra width goes to the "Read article ->" link sitting beside the
   text instead of stacked below it. */
.home-page .feature-spotlight--editorial {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-6);
    /* Stacks the link under the text body on narrow viewports with no
       extra breakpoint needed. */
    flex-wrap: wrap;
}

.home-page .feature-spotlight--editorial .feature-spotlight-body {
    flex: 1 1 32rem;
}

.home-page .feature-spotlight--editorial .link-more {
    margin-top: 0;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile hero heading - one named tier down ─────────────────────
   --type-display-size (typography.css) is already fluid down to
   1.75rem at 390px, but this headline is long enough that at that
   size it still wraps across enough lines to dominate the whole first
   viewport on a phone. Rather than inventing a narrower clamp/px
   value, this reuses the next tier down the same named scale (Heading
   XL - the page-title size), which stays comfortably above every
   other heading on the page (Heading L and below) so the hero still
   reads as the strongest mark, just less overwhelming. 640px matches
   the sitewide mobile breakpoint (see e.g. page.css's
   .nav-descriptor rule) - tablet keeps the full Display clamp. */
@media (max-width: 640px) {
    .home-page .hero h1 {
        font-size: var(--type-heading-xl-size);
    }
}