/* =========================================================
   Livan Felix — mobile overrides
   Loaded in HTML via media="(max-width: 768px)" so these
   rules only apply on phones / small portrait tablets.
   Companion to style.css; cascades on top of it.
   ========================================================= */

/* ---------- Frame ---------- */
.site { padding: 0 16px; }

.site-header { padding-top: 12px; padding-bottom: 6px; }
.wordmark {
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  padding-bottom: 4px;
}

.site-footer {
  padding: 12px 0;
  font-size: 0.7rem;
}

/* No vertical padding on <main> by default. Specific layout classes
   (.home-grid, .art-grid, .films) declared further down get to add
   their own top padding where needed. */
.site-main { padding-top: 0; padding-bottom: 0; }

/* ---------- Home: 2-column grid, width-driven polaroid sizing ----------
   Polaroids are sized by their column width (not by viewport height),
   so they stay the same size as the screen height shrinks — the page
   scrolls vertically instead of squishing the polaroids. minmax(0, 1fr)
   keeps the columns from expanding to fit the image's intrinsic pixel
   width at narrow viewports. */
.home-grid { padding-top: 14px; padding-bottom: 0; }
.home-grid .card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 12px;
  max-width: none;
  padding: 0;
}
.home-grid .card-caption {
  font-size: clamp(1.12rem, 5.82vw, 1.59rem);
}

/* ---------- Films: 2-column grid, width-driven polaroid sizing ----------
   Polaroids are sized by their column width (not by viewport height),
   so they stay the same size as the screen height shrinks — the page
   scrolls vertically instead of squishing the polaroids. minmax(0, 1fr)
   keeps the columns from expanding to fit the image's intrinsic pixel
   width at narrow viewports. */
.films { padding: 0 16px; }

.films-grid,
.films-grid--two,
.films-grid--three,
.films-grid--four {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 12px;
  max-width: none;
  padding: 0;
  margin: 0 auto;
}
/* Lone last card in an odd-count panel: span both columns but
   constrain its width to a single-column slot, centered — so it
   visually matches the cards above it. (50% − 9px = half the grid
   width minus half the 18px column-gap.) */
.films-grid .card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 9px);
  max-width: calc(50% - 9px);
}

.panel-summary { font-size: 1rem; padding: 8px 0; }
.panel-body { padding-bottom: 12px; }

.films-grid .card-caption {
  font-size: clamp(1.12rem, 5.82vw, 1.59rem);
}

/* ---------- Art: two photos stacked in a single column, centered ----------
   Single 1fr column at max-width 200px, centered via margin: 0 auto.
   Polaroids stack vertically; the vertical centering between header
   and footer is handled by the flex layout in style.css. */
.art-grid .card-grid,
.art-grid--two .card-grid {
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 18px;
  max-width: 200px;
  margin: 0 auto;
}
.art-grid .card-caption {
  font-size: clamp(1.06rem, 5.03vw, 1.46rem);
}

/* ---------- About: photo on top, body beneath, title centered ----------
   Type scaled down so the heading and paragraph sit comfortably
   on a phone-width column. */
.two-col {
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 20px 0 0;
}
.two-col .col-media figure { max-width: 250px; }
.two-col .col-body { max-width: none; }
.two-col h2 {
  text-align: center;
  font-size: clamp(1.35rem, 5.5vw, 1.7rem);
  margin-bottom: 12px;
}
.two-col p {
  font-size: 0.95rem;
  line-height: 1.55;
}
.two-col .col-media figcaption { font-size: 0.7rem; }

/* ---------- Project pages (individual films, Developing, 404) ----------
   Image on top, body beneath, title centered. Short copy (Developing,
   404) stays centered; longer film descriptions are kicked back to
   left-aligned via the .byline ~ p rule below. Type scaled down for mobile. */
.project {
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 20px 0;
}
.project .project-media img { max-width: 300px; }
.project .project-body { max-width: none; }
.project .project-body h1,
.project .project-body h2 {
  text-align: center;
  font-size: clamp(1.5rem, 6vw, 1.95rem);
}
.project .project-body .byline {
  text-align: center;
  font-size: 0.85rem;
  margin-bottom: 18px;
}
.project .project-body p {
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.55;
}
/* Film pages have a .byline above the paragraph; in that case their
   description gets auto-justified. Developing / 404 have no .byline,
   so their short copy stays centered. */
.project .project-body .byline ~ p {
  text-align: justify;
}