/* ===========================
   Juliana — Layout
   =========================== */

/*
 * Container, section wrapper, grid primitives.
 * Container: 1200px, gutter: clamp(20px, 5vw, 120px).
 * No colours — tokens.css and component files own those.
 */

/* ===========================
   Container
   =========================== */

.j-container {
  /* box model */
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);

}

/* Full-bleed section that centres a contained inner.
 * No width rule: block-level flow sizing lets the alignfull
 * negative margins from the constrained layout do the full bleed. */
.j-section {
  /* box model */
  padding-block: var(--section-pad);

}

.j-section--flush-top {
  /* box model */
  padding-top: 0;

}

.j-section--flush-bottom {
  /* box model */
  padding-bottom: 0;

}


/* ===========================
   Main content styles
   =========================== */

/*
 * .j-grid-3: Cards (Home featured, Writing grid, related, etc.)
 * Mobile-first: 1 col default → 2 col at 641px → 3 col at 1025px.
 * Exception: Gallery + Home-IG stay 3-wide at ALL widths (see gallery.css).
 *
 * WordPress's is-layout-flow class adds margin-block-start: blockGap (48px)
 * to every non-first child. Inside a CSS grid this causes vertical row
 * misalignment. The rule below resets it.
 */

/*
 * WordPress's is-layout-flow adds margin-block-start: blockGap (48px) to
 * every non-first child of ANY flow-layout container — including the root
 * wp-site-blocks wrapper. This creates a 48px void between the header and
 * the first page section, and between grid items. Zero it at every level
 * we control, then let j-section padding-block own all vertical rhythm.
 */

/* Root: gap between header, page sections, footer */
.wp-site-blocks > * {
  /* box model */
  margin-block: 0;

}

/* Grids: catches j-grid-2, j-grid-3, j-grid-4, and any future variant */
[class*="j-grid-"] > *,
.j-gallery-grid > * {
  /* box model */
  margin-block: 0 !important; /* overrides WP is-layout-flow — see comment above */

}

/* Equal-height cards: li is a grid item with definite height (align-self:stretch).
 * .j-card with height:100% fills it so all cards in a row are the same height. */
.j-grid-3 > * > .j-card,
.j-grid-2 > * > .j-card {
  /* box model */
  height: 100%;

}

.j-grid-3 {
  /* display */
  display: grid;

  /* grid */
  grid-template-columns: 1fr;
  gap: var(--sp-32);

}

@media (min-width: 641px) {
  .j-grid-3 {
    /* grid */
    grid-template-columns: repeat(2, 1fr);

  }
}

@media (min-width: 1025px) {
  .j-grid-3 {
    /* grid */
    grid-template-columns: repeat(3, 1fr);

  }
}

/*
 * .j-grid-2: About bio (portrait + text), Contact (form + info).
 * Mobile-first: 1 col default → 2 col at 769px.
 */

.j-grid-2 {
  /* display */
  display: grid;

  /* grid */
  grid-template-columns: 1fr;
  gap: var(--sp-48);
  align-items: start;

}

@media (min-width: 769px) {
  .j-grid-2 {
    /* grid */
    grid-template-columns: repeat(2, 1fr);

  }
}

/*
 * Gallery grid — hard client rule: always 3 columns at every viewport.
 * 3:4 portrait ratio enforced via aspect-ratio on tiles.
 */
.j-gallery-grid {
  /* display */
  display: grid;

  /* grid */
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4px, 2vw, 12px);

}


/* ===========================
   Component-specific sections
   =========================== */

.j-surface-base {
  /* color */
  background-color: var(--c-base);

}

.j-surface-1 {
  /* color */
  background-color: var(--c-surface-1);

}

.j-surface-footer {
  /* color */
  background-color: var(--c-footer);

}

.j-flex {
  /* display */
  display: flex;

}

.j-flex-center {
  /* display */
  display: flex;

  /* flexbox */
  align-items: center;
  justify-content: center;

}

.j-flex-between {
  /* display */
  display: flex;

  /* flexbox */
  align-items: center;
  justify-content: space-between;

}

.j-rule {
  /* box model */
  margin: 0;

  /* border */
  border: 0;
  border-top: 1px solid var(--c-hairline);

}


/* ===========================
   Accessibility styles
   =========================== */

/* Every interactive element ≥ 44px tall (doc 01 §6) */
.j-btn,
.j-tag,
.j-filter-pill,
nav a {
  /* box model */
  min-height: var(--sp-44); /* WCAG 44px touch target */

  /* display */
  display: inline-flex;

  /* flexbox */
  align-items: center;

}


/* ===========================
   Utility classes
   =========================== */