/* ==========================================================================
   Pages: homepage rows, case study rows, learning page
   ========================================================================== */
/* ==========================================================================
   Homepage row spacing controls
   --------------------------------------------------------------------------
   Edit ONLY the custom properties below to tweak top/bottom spacing
   (and, if desired, vertical rule height) for each homepage section.
   ========================================================================== */

/* Row 1 – Work (Bandcamp / BBC) */
.home-row--work {
  --row-pad-top: var(--space-9);
  --row-pad-bottom: var(--space-9);
}

/* Row 2 – Ramsgate Radio */
.home-row--radio {
  --row-pad-top: var(--space-1);
  --row-pad-bottom: 0;
}

/* Row 3 – Workshops */
.home-row--workshops {
  --row-pad-top: var(--space-8);
  --row-pad-bottom: var(--space-1);
  margin-bottom: -24px;
}

/* Row 4 – Designing for learning */
.home-row--learning {
  --row-pad-top: var(--space-8);
  --row-pad-bottom: 0;
}

/* Row 5 – Skills */
.home-row--skills {
  --row-pad-top: var(--space-9);
  --row-pad-bottom: var(--space-2);
}

/* Row 6 – Outside work / Beyond the screen */
.home-row--hobbies {
  --row-pad-top: var(--space-10);
  --row-pad-bottom: var(--space-1);
}

/* ==========================================================================
   Per-section vertical rule tweaks
   --------------------------------------------------------------------------
   Edit --vline-top / --vline-bottom below to shorten or lengthen vertical
   dividers in each homepage row. Negative values extend the line beyond
   the grid box (e.g. -32px = 32px past the edge).
   ========================================================================== */

/* Row 1 – Work (Bandcamp / BBC) – grid has rule-grid--extend */
.home-row--work .rule-grid--extend.rule-grid--2,
.home-row--work .rule-grid--extend.rule-grid--3 {
  --vline-top: -72px;
  --vline-bottom: -72px;
}

/* Row 4 – Designing for learning (stacked 2-col grid) */
.home-row--learning .panel--stacked__grid.rule-grid--2 {
  --vline-top: -64px;
  --vline-bottom: 8px;
}

/* Row 5 – Skills (3-col grid) – grid has rule-grid--extend */
.home-row--skills .rule-grid--extend.rule-grid--3 {
  --vline-top: -72px;
  --vline-bottom: -80px;
}

/* Row 6 – Outside work / Beyond the screen – grid has rule-grid--extend, section has tight-bottom */
.home-row--hobbies .rule-grid--extend.rule-grid--2,
.home-row--hobbies .rule-grid--extend.rule-grid--3 {
  --vline-top: -80px;
  --vline-bottom: -72px;
}

/* ==========================================================================
   Case study row spacing controls
   --------------------------------------------------------------------------
   Edit --row-pad-top / --row-pad-bottom below to tweak top/bottom spacing
   for each case study section. Use 0 or positive values only (e.g. var(--space-4));
   negative padding is invalid in CSS and will have no effect.
   ========================================================================== */

.case-study-row--details {
  --row-pad-top: var(--space-section);
  --row-pad-bottom: var(--space-section);
}

.case-study-row--process {
  --row-pad-top: var(--space-10);
  --row-pad-bottom: var(--space-section);
}

.case-study-row--mobile-videos {
  --row-pad-top: -40px;
  --row-pad-bottom: -40px;
}

.case-study-row--problem {
  --row-pad-top: var(--space-section);
  --row-pad-bottom: -120px;
}

.case-study-row--research {
  --row-pad-top: 40px;
  --row-pad-bottom: -120px;
}

/* Product Goals / Design Principles (two-column grid) */
.case-study-row--goals {
  --row-pad-top: var(--space-1);
  /* Smaller value = less space between Goals text and the horizontal rule below (Role section stays put) */
  --row-pad-bottom: 0;
  margin-top: -24px;
}

/* Design Principles section: more space below the horizontal rule above */
.case-study-row--principles {
  --row-pad-top: var(--space-lg);
}

/* Role & Collaboration (four-phase column) */
.case-study-row--role {
  --row-pad-top: 40px;
  --row-pad-bottom: var(--space-sm);
}

.case-study-row--exploration {
  --row-pad-top: var(--space-section);
  --row-pad-bottom: var(--space-xxl);
}

.case-study-row--final-designs {
  --row-pad-top: var(--space-section);
  --row-pad-bottom: var(--space-section);
}

.case-study-row--impact {
  --row-pad-top: var(--space-section);
  --row-pad-bottom: 0px;
}

.case-study-row--whats-next {
  --row-pad-top: 60px;
  --row-pad-bottom: 0;
  margin-bottom: -32px;
}

/* Mobile Foundations: hide content after Focus Areas until page is finished (remove .case-study--cutoff from HTML to show all) */
.case-study--cutoff .case-study__page-cutoff ~ section {
  display: none;
}

.case-study--cutoff .page__footer {
  display: none;
}

/* ==========================================================================
   Case study per-section vertical rule tweaks
   --------------------------------------------------------------------------
   Edit --vline-top / --vline-bottom to shorten or lengthen vertical dividers
   in each case study section. Negative values extend past the grid box.
   ========================================================================== */

.case-study-row--details .rule-grid--extend.rule-grid--3 {
  --vline-top: calc(-1 * var(--space-section) + 1px);
  --vline-bottom: calc(-1 * var(--space-section));
}

/* Problem/Opportunity: grid follows section title so we need to beat .case-study__section-title + .panel */
.case-study-row--problem .case-study__section-title + .panel.rule-grid--extend.rule-grid--2 {
  --vline-top: -120px;
  --vline-bottom: 0px;
}

/* Context & Constraints: text 1 column, image 2 columns */
.case-study__context-1-2 {
  grid-template-columns: 1fr 2fr;
}

.case-study__context-1-2::before {
  left: 33.333%;
  display: none;
}

.case-study__context-col2 .case-study__section-title--small {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: var(--fs-display);
}

.case-study__context-col2 .final-designs {
  margin-top: var(--space-2);
}

.case-study__context-col2 .final-designs__image-wrap {
  flex-direction: column;
  align-items: center;
}

.case-study__context-col2 .final-designs__image-wrap .case-study__img-caption {
  margin-top: var(--space-2);
  text-align: center;
}

.case-study-row--goals .rule-grid--extend.rule-grid--2 {
  --vline-top: 16px;
  --vline-bottom: 0px;
}

/* Impact (3-col grid): --vline-top/--vline-bottom control the first vertical (between col 1 & 2).
   --vline-after-top/--vline-after-bottom control the second vertical (between col 2 & 3) only. */
.case-study-row--impact .case-study__impact-grid.rule-grid--3 {
  --vline-top: 0px;
  --vline-bottom: -0px;
  --vline-after-top: 350px;
  --vline-after-bottom: -0px;

}

/* Mobile Foundations: slightly smaller display size on desktop; mobile matches global (20px in base.css) */
.page--mobile-foundations {
  --fs-display: 24px;
}

@media (max-width: 720px) {
  .page--mobile-foundations {
    --fs-display: 20px;
  }

  .case-study__image-block-row--two,
  .case-study__image-block-row--three-plus-annotations {
    grid-template-columns: 1fr;
    row-gap: var(--space-3);
  }
}

.final-designs__annotations {
  position: relative;
  height: 100%;
  min-height: 120px;
  min-width: 120px; /* so auto-sized grid column doesn’t collapse (content is absolute) */
}

/* Span 2 columns in the 3-col grid; on mobile (1 col) this has no effect */
.learning-masonry .learning-masonry__item--wide {
  /* Default: span first two columns */
  grid-column: 1 / 3;
}

.learning-masonry__item--wide img {
  width: 100%;
  height: auto;
  display: block;
}

/* Start a new row in the 3‑column grid, but keep normal 1‑column width */
.learning-masonry .learning-masonry__item--break {
  grid-column: 1 / 2;
}

/* When a wide item comes directly after a break item, place it alongside in columns 2–3 */
.learning-masonry .learning-masonry__item--break + .learning-masonry__item--wide {
  grid-column: 2 / 4;
}

/* When a wide item comes right after a normal 1-col item, place it in columns 2–3 so they share one row */
.learning-masonry .learning-masonry__item:not(.learning-masonry__item--break):not(.learning-masonry__item--full) + .learning-masonry__item--wide {
  grid-column: 2 / 4;
}

/* Override: wide item that should start at column 1 so the next item sits in column 3 on the same row */
.learning-masonry .learning-masonry__item--wide.learning-masonry__item--row-start {
  grid-column: 1 / 3;
}

/* When a normal 1-col item comes right after a wide item, place it in column 3 so they share one row */
.learning-masonry .learning-masonry__item--wide + .learning-masonry__item:not(.learning-masonry__item--wide):not(.learning-masonry__item--full) {
  grid-column: 3 / 4;
}

.learning-masonry__item img {
  width: 100%;
  height: auto;
  border-radius: 0;
  background: transparent;
}

.learning-masonry__caption {
  display: none;
}