/* ==========================================================================
   layout.css
   ==========================================================================
   Structural CSS only: positioning, containers, grids, flex arrangement,
   sizing, and spacing between elements. No color, typography, border,
   shadow, radius, or interactive-state styling lives here — that's
   components.css. No media queries — that's responsive.css.

   Mobile-first baseline: every layout below is the natural single-column
   mobile arrangement. responsive.css is the only file allowed to introduce
   breakpoints that turn these into multi-column/desktop layouts.

   Every spacing value below is a token from base.css — nothing here is a
   raw px/rem number.
   ========================================================================== */


/* ==========================================================================
   Page flow
   ========================================================================== */

body {
  display: flex;
  flex-direction: column;
  /* Contains the sticky header and the absolutely-positioned mobile nav
     dropdown (both below) so neither can ever cause horizontal scroll. */
  overflow-x: hidden;
}

main {
  /* Pushes the footer to the bottom of the viewport on short pages,
     without needing a fixed-height hack. */
  flex: 1 1 auto;
}


/* ==========================================================================
   Skip Link
   Standard accessible pattern: stays in the DOM and in tab order at all
   times (no display:none/visibility:hidden, which would pull it out of
   the accessibility tree or break the focus jump) — moved off-screen with
   a transform instead, and moved back on focus. Positioned relative to
   the viewport (no positioned ancestor above it), which is exactly where
   a skip link needs to land.
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  /* Highest-priority stacking on the page — a focused skip link must never
     render underneath the sticky header or anything else. */
  z-index: var(--z-modal);
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: translateY(0);
}


/* ==========================================================================
   Site Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: var(--space-16);
}

/* Desktop nav is hidden at the mobile baseline — this is the natural
   mobile-first stacked state (mobile relies on nav--mobile instead), not a
   breakpoint decision. responsive.css switches this to visible at the
   Tablet breakpoint. */
.nav--desktop {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.nav__utility {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.nav__github-container {
  display: flex;
  align-items: center;
}

/* Generic icon-only button (social links in the header utility area, Hero,
   and Footer). Structural sizing only — background, border, radius, and
   hover/focus treatment are components.css's job. */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same reasoning as .mobile-menu-toggle/.back-to-top below: no token
     equals the 44px accessibility minimum exactly, so --space-48 (48px)
     is used as the nearest existing token that still satisfies it. */
  width: var(--space-48);
  height: var(--space-48);
  flex-shrink: 0;
}

.mobile-menu-toggle {
  /* Sizing only — background/icon appearance is a components.css concern.
     No token equals the 44px accessibility minimum exactly; --space-48
     (48px) is the nearest existing token that still satisfies "44px
     minimum" without inventing a new value. */
  width: var(--space-48);
  height: var(--space-48);
}

/* Mobile nav dropdown panel. Deliberately does NOT set `display` on the
   bare .nav--mobile selector — the element carries the native `hidden`
   attribute in the HTML, and `[hidden] { display: none }` is a UA-stylesheet
   rule with the same specificity as a single class selector. Setting
   `display` unconditionally here would win that specificity tie and defeat
   `hidden` outright. Scoping to :not([hidden]) keeps the native
   show/hide behavior intact for when navigation.js later toggles it. */
.nav--mobile {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  z-index: var(--z-dropdown);
  flex-direction: column;
  gap: var(--space-16);
  padding-inline: var(--container-padding-inline);
  padding-block: var(--space-16);
}

.nav--mobile:not([hidden]) {
  display: flex;
}

.nav__list--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.nav__resume-btn--mobile {
  width: 100%;
}


/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.hero__media {
  display: flex;
}

.hero__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  border-radius: 50%;
  border: 4px solid var(--color-accent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.hero__social {
  display: flex;
  gap: var(--space-12);
}


/* ==========================================================================
   Generic section spacing
   Applies to every top-level section in <main> — caps content width the
   same way the .container utility does (these sections aren't wrapped in
   a .container element in the HTML, so the equivalent constraints are
   applied directly here), and sets the shared mobile section rhythm.
   Hero and Contact are expected to step up to --space-128 specifically at
   larger breakpoints — that override belongs in responsive.css, not here.
   ========================================================================== */

main > section {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: var(--space-48);
}


/* ==========================================================================
   Section Header
   ========================================================================== */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-block-end: var(--space-32);
}


/* ==========================================================================
   Card grids (Projects, Skills, Certifications)
   ========================================================================== */

.project-grid,
.skills-grid,
.certificate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}


/* ==========================================================================
   About
   ========================================================================== */

.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: var(--prose-max-width);
}

.about__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}


/* ==========================================================================
   Education
   ========================================================================== */

.education-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.education-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}


/* ==========================================================================
   Resume
   ========================================================================== */

.resume-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32);
}


/* ==========================================================================
   Contact
   ========================================================================== */

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}


/* ==========================================================================
   Footer
   ========================================================================== */

/* <footer> is a direct child of the flex-column <body> (see Page Flow
   above), which makes it a flex item too — flex-shrink:0 guarantees it
   never gets compressed. Note: .site-header is a sibling flex item with
   the same theoretical exposure (position: sticky keeps it in normal
   flow, it does not exempt it from flex-shrink) — not changed here since
   it wasn't part of this review's scope, but flagged for awareness. */
.site-footer {
  flex-shrink: 0;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  padding-block: var(--space-48);
}

.site-footer__nav > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16);
}

.site-footer__social {
  display: flex;
  gap: var(--space-12);
}


/* ==========================================================================
   Back to top
   Same native-`hidden`-safe pattern as .nav--mobile above — the button
   carries the `hidden` attribute in the HTML, so `display` is only ever
   declared inside a :not([hidden]) rule, never on the bare selector.
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: var(--z-back-to-top);
  /* Same reasoning as .mobile-menu-toggle above — --space-48 satisfies the
     44px minimum tap target with an existing token rather than a new one. */
  width: var(--space-48);
  height: var(--space-48);
  align-items: center;
  justify-content: center;
}

.back-to-top:not([hidden]) {
  display: flex;
}


/* ==========================================================================
   Card content layout
   Governs only the internal arrangement/spacing of each card type — the
   card's own background, border, radius, and shadow are components.css
   concerns.
   ========================================================================== */

.project-card {
  display: flex;
  flex-direction: column;
}

.project-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.project-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
}

.project-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.skill-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
}

.certificate-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
}


/* ==========================================================================
   Chip / tag / badge list layout
   Layout of the *list* only (flow direction, wrapping, gap between items)
   — the individual chip/badge/pill's own visual styling is components.css.
   ========================================================================== */

.project-card__tags,
.skill-category__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}