/* ==========================================================================
   layout.css — Container, responsive grid, spacing & touch targets
   --------------------------------------------------------------------------
   Owns page-level layout only: the centered content container, the two-column
   main/sidebar grid, the vertical rhythm between top-level sections, and the
   responsive breakpoints. Component visuals (card backgrounds, borders,
   shadows, radii) live in components.css; this file only sizes and spaces.

   BREAKPOINTS (standardized on Requirement 10)
   --------------------------------------------------------------------------
     >= 1024px   Two-column grid, full desktop spacing.            (Req 10.1)
     768–1023px  Two-column grid, spacing reduced to 75% of        (Req 10.3)
                 the >= 1024px values (gap + section padding).
     < 768px     Single-column stacked, each section full width.   (Req 10.2)
     < 768px     Interactive controls are >= 44x44 CSS px.          (Req 10.4)

   VERIFIABLE SPACING REDUCTION (Req 10.3)
   --------------------------------------------------------------------------
   Spacing is driven by two custom properties so the 75% reduction is exact
   and checkable rather than eyeballed:

       token               >= 1024px        768–1023px       ratio
       --grid-gap          32px (--space-4)  24px            24 / 32 = 0.75
       --section-padding   32px (--space-4)  24px            24 / 32 = 0.75

   Both tablet values are exactly 75% of their desktop counterparts, satisfying
   the "no more than 75%" constraint. `.grid` consumes `--grid-gap`; card
   sections consume `--section-padding`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Spacing tokens — default (mobile-first) values.
   Desktop (>= 1024px) inherits these full values; the tablet range overrides
   them to 75% further down.
   -------------------------------------------------------------------------- */
:root {
  --grid-gap: var(--space-4);        /* 32px — column gap at >= 1024px       */
  --section-padding: var(--space-4); /* 32px — card section padding at >=1024 */
  --container-pad: var(--space-3);   /* 24px — container horizontal padding   */
}

/* --------------------------------------------------------------------------
   Container — centered, max-width capped, horizontal padding.
   Used by the header nav bar and the main content column.
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --------------------------------------------------------------------------
   Main content column — vertical rhythm between top-level sections.
   `> * + *` spaces consecutive blocks (hero, grid, projects, teaching,
   contacts) without adding a leading/trailing margin.
   -------------------------------------------------------------------------- */
main.container {
  padding-block: var(--space-4);
}

main.container > * + * {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Grid — mobile-first single column (Req 10.2).
   Wraps the publications <section> (main) and the news <aside> (sidebar).
   `align-items: start` keeps the shorter sidebar from stretching to match the
   taller publications column.
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  align-items: start;
}

/* --------------------------------------------------------------------------
   Card section padding — driven by the responsive token so the 768–1023px
   reduction applies automatically. Layout owns padding (spacing); the visual
   treatment of cards stays in components.css.
   -------------------------------------------------------------------------- */
.card {
  padding: var(--section-padding);
}

/* --------------------------------------------------------------------------
   >= 768px — enter the two-column main/sidebar layout.
   Publications (2fr) is wider than the news sidebar (1fr) per Req 10.1.
   This applies across the tablet range AND full desktop; the difference
   between them is purely the spacing tokens set below.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: 2fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   768–1023px — reduced spacing (Req 10.3).
   Column gap and section padding drop to exactly 75% of the >= 1024px values.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --grid-gap: 24px;        /* 75% of 32px */
    --section-padding: 24px; /* 75% of 32px */
    --container-pad: 18px;   /* 75% of 24px */
  }
}

/* --------------------------------------------------------------------------
   < 768px — single-column stacked layout (Req 10.2).
   The grid collapse is already handled by the mobile-first default above;
   this block guarantees each section spans the full viewport width even if a
   component sets an intrinsic width elsewhere.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr;
  }

  main.container > section,
  main.container > .grid > section,
  main.container > .grid > aside {
    width: 100%;
  }

  /* Slightly tighter section padding on small screens. */
  :root {
    --section-padding: var(--space-3); /* 24px */
    --container-pad: var(--space-2);   /* 16px */
  }
}

/* --------------------------------------------------------------------------
   < 768px — minimum 44x44 CSS px touch targets (Req 10.4).
   Interactive controls (nav links, theme toggle, hamburger, filter buttons,
   hero action/social links, and generic buttons) are laid out as centered
   flex boxes so min-width/min-height take effect and the tap area is padded.

   Inline links inside body copy remain inline (min-* is a no-op on inline
   boxes) so running text is not broken into 44px-tall fragments; this matches
   the WCAG target-size exemption for links embedded in sentences.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .nav-links a,
  .filter-btn,
  .theme-toggle,
  .nav-toggle,
  .links a,
  button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    box-sizing: border-box;
  }

  /* Literal safeguard for the remaining anchors/buttons named in Req 10.4:
     guarantees the minimum tap height without forcing inline body links to
     become flex boxes. */
  a,
  button {
    min-height: 44px;
  }
}