/**
 * Layout Components CSS - REFACTORED FOR SIMPLICITY
 *
 * ARCHITECTURE:
 * BaseLayout.js generates these classes for EVERY layout:
 *   .layout-container + .layout-{type}       - Root container
 *   .layout-page + .layout-{type}__page      - Padded page container
 *   .layout-content + .layout-{type}__content - Content wrapper
 *
 * STRATEGY:
 * - Use .layout-container, .layout-page, .layout-content for ALL common styles
 * - Use .layout-{type}__* ONLY for layout-specific overrides
 * - Eliminates redundant CSS and ensures consistency
 */

/* ========== GENERIC BASE LAYOUT CLASSES (Applied to ALL layouts) ========== */

/**
 * .layout-container - Root container (ALL layouts)
 * Full viewport, provides background and theme context
 */
.layout-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  box-sizing: border-box;
  overflow: hidden;
  /* Theme transitions inherited from universal selector */
}

/**
 * .layout-page - Page container (ALL layouts)
 * Viewport-sized with consistent padding on all sides
 * Two-row flexbox: content row + bottom row (caption + navigation)
 */
.layout-page {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  padding: var(--unit-3x) var(--unit) var(--unit) var(--unit); /* top right bottom left */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg); /* Gap between content and bottom row */
}

/**
 * .layout-content - Content container (ALL layouts)
 * Fills available space inside page, provides positioning context for children
 * First row in layout-page flexbox - grows to fill remaining space
 * Default: flex row with top-left alignment (can be overridden via utility classes)
 */
.layout-content {
  position: relative;
  flex: 1 1 auto; /* Grow to fill remaining space after caption */
  min-height: 0; /* Critical: allow flex shrinking */
  width: 100%;
  display: flex;
  flex-direction: row; /* Default: horizontal layout */
  align-items: flex-start; /* Default: top alignment */
  justify-content: flex-start; /* Default: left alignment */
  flex-wrap: wrap; /* Allow wrapping if needed */
  box-sizing: border-box;
}

/* When layout-content uses u-absolute-cover, disable flex */
.layout-content.u-absolute-cover {
  display: block; /* Override flex display for absolutely positioned content */
}

/* When layout is inside project-page wrapper, ensure proper height inheritance */
.project-page .layout-page {
  height: 100%; /* Inherit parent height instead of 100vh */
}

/**
 * Bottom row - Two columns: caption (left) + navigation (right)
 * Second row in layout-page flexbox - hugs content height
 * Displays in three scenarios:
 * 1. Caption + Navigation (two columns)
 * 2. Caption only (single column, left-aligned)
 * 3. Navigation only (single column, right-aligned)
 */
.layout-bottom-row {
  flex: 0 0 auto; /* Don't grow, don't shrink, size to content */
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xl);
  align-items: flex-start; /* Align caption and navigation to top */
  justify-content: space-between; /* Caption left, navigation right */
  z-index: var(--z-elevated);
  padding: 0; /* No padding */
  margin: 0; /* No margin */
}

/**
 * Caption - Left column in bottom row
 * Grows to fill available space, but doesn't exceed natural width
 */
.layout-caption {
  flex: 1 1 auto; /* Grow to fill space, shrink if needed */
  max-width: 100%;
  min-width: 0; /* Allow shrinking below content width */
  padding: 0; /* No padding */
  margin: 0; /* No margin */
}

/**
 * Navigation - Right column in bottom row
 * Fixed width based on content, doesn't grow
 */
.layout-navigation {
  flex: 0 0 auto; /* Don't grow, don't shrink, size to content */
  max-width: 50%; /* Don't exceed half the width */
  min-width: 0;
  padding: 0; /* No padding */
  margin: 0; /* No margin */
}

/**
 * When only navigation is present (no caption)
 * Navigation should align to the right
 */
.layout-bottom-row:not(:has(.layout-caption)) {
  justify-content: flex-end;
}

/**
 * When only caption is present (no navigation)
 * Caption should align to the left
 */
.layout-bottom-row:not(:has(.layout-navigation)) {
  justify-content: flex-start;
}

/**
 * Background image positioning (ALL layouts)
 * Generic .layout-background-image class applied by BaseLayout.renderBackgroundImage()
 * Fills entire layout container, positioned behind all content
 */
.layout-background-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.layout-background-image .image-component {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* MediaUtils creates .media-wrapper as the main container */
.layout-background-image .media-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Target the actual media element inside the wrapper */
.layout-background-image .media-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hide placeholder in background images */
.layout-background-image .media-placeholder {
  display: none;
}

/* Ensure content is positioned above background image */
.layout-page {
  position: relative;
  z-index: 1;
}

.layout-content {
  position: relative;
  z-index: 1;
}

/* ========== COMMON CONTENT MODIFIERS ========== */
/* Content alignment is handled by utilities in utilities.css:
 * combine u-justify-* and u-align-* classes per layout via BaseLayout.getContentAlignment()
 */

/* ========== LAYOUT-SPECIFIC OVERRIDES ========== */
/* Only styles unique to each layout - no repetition */

/* Mockup layouts - Force row layout (mobile will override with column) */
.layout-container[data-layout="mockup-single"] .layout-content,
.layout-container[data-layout="mockup-double"] .layout-content,
.layout-container[data-layout="mockup-triple"] .layout-content,
.layout-container[data-layout="mockup-quad"] .layout-content {
  height: 100%; /* Fill available height */
  width: 100%;
  align-items: flex-end !important; /* Bottom align all mockups */
}

/* Multi-mockup rows keep row alignment and right-justify */
.layout-container[data-layout="mockup-double"] .layout-content,
.layout-container[data-layout="mockup-triple"] .layout-content,
.layout-container[data-layout="mockup-quad"] .layout-content {
  flex-direction: row !important; /* Row layout by default */
  flex-wrap: nowrap !important; /* Prevent wrapping - keep mockups in same row */
  justify-content: flex-end !important;
  height: 100%; /* Fill available height */
  width: 100%;
}

.layout-container[data-layout="mockup-single"] .layout-content {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important; /* Center single mockup horizontally */
}

.layout-mockup-single .layout-content {
  height: 100%; /* Fill available height */
}

/* ========== TITLE LAYOUT ========== */
/* Title page uses only t-display-xxl typography pattern class */
/* Text centering handled by u-justify/u-align utilities on layout-content wrapper */

.layout-title .layout-content {
  /* Ensure content wrapper fills width properly */
  width: 100%;
  max-width: 100%;
  padding-inline: clamp(var(--spacing-md), 5vw, var(--spacing-3xl));
}

.layout-title__content {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-title__text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  /* Responsive font sizing - favors larger sizes on mobile, only shrinking when viewport truly constrained */
  font-size: clamp(2.5rem, calc(1.5rem + 5vw + 1vh), var(--font-size-display-xxl));
  line-height: 1.1;

  /* Text wrapping */
  text-wrap: balance;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ========== QUOTE LAYOUT ========== */

/* Content wrapper padding - matches title layout */
.layout-quote .layout-content {
  width: 100%;
  max-width: 100%;
  padding-inline: clamp(var(--spacing-md), 5vw, var(--spacing-3xl));
  align-items: center;
  justify-content: center;
}

/* Content wrapper for quote layout - fills parent and centers content */
.layout-quote__wrapper {
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quote container - no border, centered content */
.layout-quote__container {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-2xl);
  box-sizing: border-box;
}

/* Quote text styling - matches title text with responsive scaling */
.layout-quote__text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: center;

  /* Responsive font sizing - matches title layout */
  font-size: clamp(2.5rem, calc(1.5rem + 5vw + 1vh), var(--font-size-display-xxl));
  line-height: 1.1;

  /* Text wrapping */
  text-wrap: balance;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Author section - name and image on the right */
.layout-quote__author {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-lg);
  width: 100%;
  text-align: right;
}

/* Author name */
.layout-quote__author-name {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

/* Author image wrapper */
.layout-quote__author-image {
  width: var(--size-standard); /* 64px - standard element size */
  height: var(--size-standard);
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-secondary);
}

/* Ensure image component fills the circular wrapper */
.layout-quote__author-image .image-component {
  width: 100%;
  height: 100%;
}

.layout-quote__author-image .image-component__img,
.layout-quote__author-image .image-component__video,
.layout-quote__author-image .media-wrapper {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .layout-quote__container {
    gap: var(--spacing-xl);
  }

  .layout-quote__author {
    gap: var(--spacing-md);
  }

  .layout-quote__author-image {
    width: 48px;
    height: 48px;
  }
}

/* ========== COLUMN LAYOUTS (Shared Styles) ========== */
/* Common patterns for 3cols and 4cols layouts */

/* Column heading shared styles */
.column__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Column typography - uses pattern classes from typography.css */
/* Typography handled by: t-heading-lg, t-display-xl, t-body classes */
/* Only layout/spacing styles here */
.column__number {
  margin: 0;
  padding: 0.1em 0; /* Prevent ascender/descender crop */
}

.column__title {
  margin: 0;
  padding: 0.15em 0; /* Prevent ascender/descender crop */
}

.column__description {
  margin: 0;
  color: var(--text-secondary);
}

/* Column image */
.column__image {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== 3 COLUMNS LAYOUT ========== */

/* Content container - bottom align the row */
.layout-container[data-layout="columns-three"] .layout-content {
  align-items: flex-end; /* Bottom align the row container */
}

.layout-3cols__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  align-items: stretch; /* Ensure all columns have equal height */
  width: 100%;
  position: relative;
}

.layout-3cols__column {
  flex: 1 1 0; /* Equal width columns that can grow and shrink */
  min-width: var(--column-min-width); /* Standardized min-width using CSS token */
  max-width: 100%; /* Prevent overflow on very small screens */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Push description to bottom, heading stays at top */
  gap: var(--spacing-xl);
  color: var(--text-primary);
  text-align: center;
  height: 100%; /* Fill parent height to enable proper alignment */
}


/* 3cols uses typography pattern classes from typography.css - no overrides */

/* ========== TITLE + 3 COLUMNS LAYOUT ========== */
/* Large title at top with three columns below */

.layout-title-3cols__wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: var(--spacing-3xl); /* Gap between title and columns */
}

/* Title section at top */
.layout-title-3cols__title-container {
  flex: 0 0 auto; /* Don't grow or shrink */
  width: 100%;
  max-width: 100%;
}

/* Columns section */
.layout-title-3cols__columns-container {
  flex: 1 1 auto; /* Grow to fill remaining space */
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: flex-end; /* Align columns to bottom */
}

.layout-title-3cols__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  width: 100%;
  justify-content: flex-start; /* Align to left */
}

.layout-title-3cols__column {
  flex: 1 1 0; /* Equal width columns */
  min-width: var(--column-min-width); /* Use token for min-width */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md); /* Gap between label, title, and description */
  text-align: left; /* Left-aligned text */
}

/* Typography for title-3cols columns handled by pattern classes:
   - .t-label for column labels
   - .t-heading-md for column titles
   - .t-body-serif for column descriptions */

/* ========== 4 COLUMNS LAYOUT ========== */

.layout-4cols__container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  align-items: center;
}

.layout-4cols__title {
  flex: 0 0 auto;
  white-space: pre-line;
  width: 100%;
  margin: 0;
}

.layout-4cols__row {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

.layout-4cols__column {
  flex: 1 1 0; /* Equal width columns that can grow and shrink */
  min-width: var(--column-min-width); /* Standardized min-width using CSS token */
  max-width: 100%; /* Prevent overflow on very small screens */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Push description to bottom, heading stays at top */
  gap: var(--spacing-lg);
  align-items: flex-start;
  color: var(--text-primary);
  height: auto; /* Allow natural height for proper wrapping */
}

/* 4cols uses typography pattern classes from typography.css - no overrides */
.layout-4cols__heading {
  align-items: flex-start;
  width: 100%;
}

/* ========== MOCKUPS LAYOUT ========== */

/* Container for mockup images */
.layout-mockups__container {
  width: 100%;
  max-width: 1779px;
}

/* Full variant - full width images */
.layout-mockups__container--full .layout-mockups__image {
  width: 100%;
  height: auto;
}

/* Contained variant - constrained width */
.layout-mockups__container--contained {
  max-width: 1400px;
}

/* Split variant - two column grid */
.layout-mockups__container--split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
}

/* ========== COLUMNS LAYOUT ========== */

/* Container for column grid */
.layout-columns__container {
  width: 100%;
  max-width: 1400px;
}

/* Column grid */
.layout-columns__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4xl); /* 100px desktop, 60px mobile */
}

/* Individual column */
.layout-columns__column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Column number label */
.layout-columns__number {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* Column heading */
.layout-columns__heading {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin: 0;
  line-height: var(--line-height-tight);
}

/* Column subtitle/description */
.layout-columns__subtitle {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--line-height-paragraph);
}

/* ========== TEXT LAYOUT ========== */

/* Container for text content */
.layout-text__container {
  width: 100%;
  max-width: 800px;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-paragraph);
  color: var(--text-primary);
}

/* Text body wrapper */
.layout-text__body {
  margin-top: var(--spacing-2xl);
}

/* Headings within text */
.layout-text__container h2 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-xl);
}

.layout-text__container h3 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-lg);
}

.layout-text__container p {
  margin-bottom: var(--spacing-lg);
}

/* ========== GRID LAYOUT ========== */

/* Container for image grid */
.layout-grid__container {
  width: 100%;
  max-width: 1779px;
  display: grid;
  gap: var(--spacing-xl);
}

/* Grid item */
.layout-grid__item {
  width: 100%;
}

.layout-grid__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== IMAGE ONLY LAYOUT ========== */

/* ImageOnly layout inherits standard .layout-page padding from BaseLayout */
/* No padding overrides - uses default padding: var(--unit) */

/* Full-screen image container - fills the .layout-content parent */
.layout-image-only__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Image component wrapper fills container and centers image */
.layout-image-only__image .image-component {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary); /* Ensure background matches theme */
}

/* Image and video scale to fit within container bounds - simple and effective */
.layout-image-only__image .image-component__img,
.layout-image-only__image .image-component__video,
.layout-image-only__image .image-component__media {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Fit entire media within bounds, no cropping */
  object-position: center;
  display: block;
}

/* Cover scaling mode - fills container, may crop media */
.layout-image-only__image[data-scaling="cover"] .image-component__img,
.layout-image-only__image[data-scaling="cover"] .image-component__video,
.layout-image-only__image[data-scaling="cover"] .image-component__media {
  object-fit: cover; /* Fill container, may crop to maintain aspect ratio */
}

/* Ensure image layout always stays fullscreen, even when mobile defaults relax heights */
.layout-container[data-layout="image"] {
  min-height: 100vh;
}

.layout-container[data-layout="image"] .layout-page {
  height: 100vh;
  min-height: 100vh;
}

/* Image-only layout WITH caption - use flex to stack image and caption vertically */
.layout-container[data-layout="image-only"][data-has-caption="true"] .layout-content {
  /* Override u-absolute-cover utility when caption is present */
  position: relative !important;
  display: flex !important;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Image container takes remaining space, leaving room for caption below */
.layout-container[data-layout="image-only"][data-has-caption="true"] .layout-image-only__image {
  position: relative;
  flex: 1 1 0;
  min-height: 0; /* Allow flex item to shrink below content size */
  top: auto;
  left: auto;
}

/* Caption is positioned normally in flex flow, not absolutely */
.layout-container[data-layout="image-only"][data-has-caption="true"] .layout-caption {
  position: relative;
  flex: 0 0 auto;
  bottom: auto;
  left: auto;
}

/* ========== TITLE IMAGE LAYOUT ========== */
/* Title at top left and image at bottom left with vertical gap */

/* Wrapper - flex column to stack title and image vertically */
.layout-title-image__wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Title container - top left aligned */
.layout-title-image__title-container {
  flex: 0 0 auto; /* Don't grow or shrink, natural height */
  width: 100%;
  margin-bottom: var(--spacing-2xl); /* Vertical gap below title - 48px desktop, 32px mobile */
}

/* Image container - vertically centered, grows to fill available space */
.layout-title-image__image-container {
  flex: 1 1 0; /* Grow to fill remaining space, base size 0 */
  width: 100%;
  min-height: 0; /* Critical: allow flex shrinking */
  position: relative; /* Positioning context for image */
  display: flex; /* Make it a flex container */
  align-items: center; /* Align image to vertical center */
  justify-content: flex-start; /* Align image to left */
}

/* Image component wrapper - fills container */
.layout-title-image__image {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center; /* Vertical middle alignment */
  justify-content: flex-start; /* Horizontal left alignment */
}

.layout-title-image__image .image-component {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center; /* Vertical middle alignment */
  justify-content: flex-start; /* Horizontal left alignment */
}

/* Image scales to fit within container bounds without cropping */
.layout-title-image__image .image-component__img,
.layout-title-image__image .image-component__video,
.layout-title-image__image .image-component__media {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* Fit entire image/video within bounds, no cropping */
  display: block;
}

/* ========== TITLE LIST LAYOUT ========== */
/* Title at top, list items at bottom in flexible row layout */

/* Wrapper - flex column with space-between to push title top and list bottom */
.layout-title-list__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Title container - top aligned */
.layout-title-list__title-container {
  flex: 0 0 auto;
  width: 100%;
}

/* List container - bottom aligned, flexible row layout */
.layout-title-list__list-container {
  flex: 0 0 auto; /* Don't grow, natural height */
  width: 100%;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr); /* fallback */
  column-gap: 0;
  row-gap: 0;
  align-items: start;
  background-color: var(--overlay-light);
  backdrop-filter: var(--glass-blur) var(--glass-saturate);
  -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}

@supports (grid-template-columns: fit-content(50%) minmax(0, 1fr)) {
  .layout-title-list__list-container {
    grid-template-columns: fit-content(50%) minmax(0, 1fr);
  }
}

/* Flatten each item so their children participate in the grid columns */
.layout-title-list__item {
  display: contents;
}

.layout-title-list__item-heading,
.layout-title-list__item-description {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  color: var(--text-primary);
}

.layout-title-list__item-heading {
  grid-column: 1;
  padding-right: var(--spacing-xl);
}

.layout-title-list__item-description {
  grid-column: 2;
  opacity: 0.8;
}

.layout-title-list__item-divider {
  grid-column: 1 / -1;
  height: 1px;
  background-color: var(--border-color);
  opacity: 0.8;
}

/* Remove extra padding on first row */
.layout-title-list__item:first-child .layout-title-list__item-heading,
.layout-title-list__item:first-child .layout-title-list__item-description {
  padding-top: 0;
}

/* Remove border from last row */
.layout-title-list__item:last-child .layout-title-list__item-heading,
.layout-title-list__item:last-child .layout-title-list__item-description {
  padding-bottom: 0;
}

[data-theme="dark"] .layout-title-list__item-divider {
  background-color: rgba(255, 255, 255, 0.2);
}

.layout-title-list__item:last-child .layout-title-list__item-divider {
  display: none;
}

[data-theme="dark"] .layout-title-list__list-container {
  background-color: var(--overlay-dark);
}

/* Responsive adjustments - single column on mobile */
@media (max-width: 1080px) {
  .layout-title-list__list-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .layout-title-list__item {
    display: block;
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }

  .layout-title-list__item:first-child {
    padding-top: 0;
  }

  .layout-title-list__item-heading,
  .layout-title-list__item-description {
    display: block;
    padding: 0;
    border: none;
  }

  .layout-title-list__item-heading {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-sm);
  }

  .layout-title-list__item-description {
    opacity: 0.8;
  }

  .layout-title-list__item-divider {
    width: 100%;
    margin-top: var(--spacing-lg);
    background-color: var(--border-color);
  }
}

/* ========== CLOSEUP LAYOUT ========== */
/* Single mockup centered with responsive sizing */

.layout-closeup__mockup {
  position: relative;
  width: min(90%, 625px); /* Max width 625px from Figma */
  max-height: 90%; /* Constrain to available height */
  aspect-ratio: 625/1280; /* Phone aspect ratio */
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-closeup__mockup img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Closeup uses dark theme variant - background added to __inner */

/* ========== PROJECT DEFAULT LAYOUT ========== */
/* Default project page with centered mockup */

.layout-project-default__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-project-default__mockup {
  width: min(80%, 500px); /* Max 500px, 80% of container */
  max-height: 90%; /* Constrain to available height */
  aspect-ratio: 154/315; /* Phone aspect ratio */
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-project-default__mockup img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ========== MOCKUP LAYOUTS ========== */
/* MockupOnePage, MockupTwoPage, MockupThreePage use standard .mockup-layout__* classes */
/* Styles are defined in components.css for consistency and reusability */

/* ========== SHOWCASE LAYOUT ========== */
/* Showcase displays multiple device mockups in columns aligned to bottom */

/* Showcase content alignment handled by u-justify/u-align utilities */

/* Inner wrapper: Holds the row */
.layout-showcase__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

/* Row container - holds all mockup columns */
.layout-showcase__row {
  display: flex;
  gap: var(--spacing-2xl); /* 48px desktop, 32px mobile */
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

/* Column container - flexible height */
.layout-showcase__column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  height: 100%;
  flex: 0 0 auto;
  align-items: flex-start;
}

/* Mockup container with phone aspect ratio */
.layout-showcase__mockup {
  flex: 1 1 auto;
  aspect-ratio: 154/315; /* Phone aspect ratio from Figma */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* Mockup content detail (number + title) */
.layout-showcase__mockup-detail {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--spacing-md);
}

.layout-showcase__mockup-number {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.layout-showcase__mockup-title {
  font-weight: var(--font-weight-normal);
}

/* ========== CAROUSEL LAYOUT ========== */
/* Carousel layout centers the active slide and constrains media within the page */

.layout-container[data-layout="carousel"] {
  overflow: visible;
}

.layout-container[data-layout="carousel"] .layout-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
}

.layout-container[data-layout="carousel"] .layout-carousel__carousel {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

.layout-container[data-layout="carousel"] .layout-carousel__carousel .carousel__viewport {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.layout-container[data-layout="carousel"] .layout-carousel__carousel .carousel__track {
  height: 100%;
  min-height: 0;
  align-items: flex-end;
}

/* Ensure carousel slide itself has proper height constraint and hugs content */
.layout-container[data-layout="carousel"] .layout-carousel__carousel .carousel__slide {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}

/* Ensure mockups in carousel slides maintain aspect ratio and fit height */
.layout-container[data-layout="carousel"] .layout-carousel__carousel .mockup-component {
  width: auto !important;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: var(--spacing-md);
  box-sizing: border-box;
}

.layout-container[data-layout="carousel"] .layout-carousel__carousel .mockup-component__image-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  width: auto !important;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-container[data-layout="carousel"] .layout-carousel__carousel .mockup-component__image,
.layout-container[data-layout="carousel"] .layout-carousel__carousel .mockup-component__video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.layout-container[data-layout="carousel"] .layout-carousel__carousel .mockup-component__details {
  flex: 0 0 auto;
  width: 100%;
  max-width: min(var(--max-width-details), 100%);
  align-self: flex-start;
  flex-wrap: wrap;
}

/* Allow title text to wrap within carousel layout */
.layout-container[data-layout="carousel"] .layout-carousel__carousel .mockup-component__title {
  flex: 1 1 auto;
  min-width: 0;
}

/* ========== INTEGRATION WITH WORKS APP ========== */

.project-pages-container {
  transition: opacity var(--duration-normal) ease;
}

.hero-section {
  isolation: isolate;
}

/* ========== RESPONSIVE ========== */

/* Small desktop screens: Handle column wrapping when necessary */
@media (max-width: 900px) and (min-width: 769px) {
  /* 3 Columns: Ensure clean wrapping */
  .layout-3cols__row {
    justify-content: center; /* Center columns when wrapped */
  }

  /* 4 Columns: Force 2x2 layout on smaller screens */
  .layout-4cols__row {
    justify-content: space-between;
  }

  .layout-4cols__column {
    flex: 1 1 calc(50% - 24px); /* Force 2 columns per row */
    min-width: 0; /* Remove min-width constraint to allow 2x2 */
  }
}

/* Mobile: Single breakpoint at 1080px */
@media (max-width: 768px) {
  /* Base Layout: Minimum page height for comfortable viewing on mobile */
  .layout-container {
    min-height: 130vw; /* Minimum 1.3x screen width */
  }

  .layout-page {
    height: auto;
    min-height: 130vw; /* Minimum 1.3x screen width */
    padding: var(--unit-3x) var(--unit) var(--unit) var(--unit); /* top right bottom left */
  }

/* Mockup Layouts: Stack vertically and fill width on mobile */
  .layout-container[data-layout="mockup-single"] .layout-content,
  .layout-container[data-layout="mockup-double"] .layout-content,
  .layout-container[data-layout="mockup-triple"] .layout-content,
  .layout-container[data-layout="mockup-quad"] .layout-content {
    flex-direction: column !important;
    flex-wrap: nowrap !important; /* No wrapping on mobile either */
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    height: auto !important; /* Hug content height on mobile */
    min-height: 0 !important; /* Allow shrinking to content */
    gap: var(--spacing-2xl);
  }

  /* Mockup components should fill width on mobile */
  .layout-mockup-single .mockup-component,
  .layout-mockup-double .mockup-component,
  .layout-mockup-triple .mockup-component,
  .layout-mockup-quad .mockup-component {
    width: 100%;
    max-width: 100%;
  }

  /* Ensure mockup media wrappers fill width */
  .layout-mockup-single .mockup-component__media-wrapper,
  .layout-mockup-double .mockup-component__media-wrapper,
  .layout-mockup-triple .mockup-component__media-wrapper,
  .layout-mockup-quad .mockup-component__media-wrapper {
    width: 100% !important;
    max-width: 100%;
  }

  /* Base Layout: Content grows to fill space, pushing caption to bottom */
  .layout-content {
    height: auto;
    min-height: 0;
    flex: 1 1 auto; /* Grow to fill available space */
    width: 100%;
  }

  /* Image layout: Override fullscreen behavior on mobile */
  .layout-container[data-layout="image"] .layout-page {
    height: auto; /* Override desktop height: 100vh */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the content */
  }

  /* Image-only layout: release absolute positioning for natural flow */
  .layout-container[data-layout="image"] .layout-content.u-absolute-cover {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center within content */
  }

  .layout-image-only__image {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
  }

  .layout-image-only__image .image-component {
    height: auto;
    min-height: 0;
  }

  .layout-image-only__image .image-component__img,
  .layout-image-only__image .image-component__video,
  .layout-image-only__image .image-component__media {
    width: 100%;
    height: auto;
    max-height: none;
  }

  /* Title-image layout: Simple stacked column on mobile */
  .layout-title-image__wrapper {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
  }

  .layout-title-image__title-container {
    flex: 0 0 auto;
    margin-bottom: 0; /* Gap handled by parent flex */
  }

  .layout-title-image__image-container {
    flex: 0 0 auto; /* Don't grow, natural height */
    height: auto;
    min-height: 0;
    position: relative;
  }

  .layout-title-image__image {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
  }

  .layout-title-image__image .image-component {
    position: relative;
    width: 100%;
    height: auto;
  }

  .layout-title-image__image .image-component__img,
  .layout-title-image__image .image-component__video,
  .layout-title-image__image .image-component__media {
    width: 100%;
    height: auto;
    max-height: none;
  }

  /* Bottom row: Stack navigation on top of caption on mobile */
  /* margin-top: auto pushes to bottom of flex container regardless of content height */
  .layout-bottom-row {
    flex-direction: column-reverse; /* Navigation on top, caption below */
    gap: var(--spacing-lg);
    align-items: flex-start; /* Left-align both columns */
    margin-top: auto; /* Push to bottom of flex container */
  }

  .layout-caption,
  .layout-navigation {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }

  /* 3-Column Layout: Stack columns vertically */
  .layout-3cols__row {
    flex-direction: column;
    gap: var(--spacing-3xl);
    max-width: 100%;
  }

  .layout-3cols__column {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0; /* Remove min-width constraint on mobile */
    height: auto; /* Reset height on mobile for natural stacking */
    justify-content: flex-start; /* Reset to normal flow on mobile */
  }

  /* Title + 3-Column Layout: Stack columns vertically */
  .layout-title-3cols__wrapper {
    gap: var(--spacing-2xl); /* Reduce gap on mobile */
  }

  .layout-title-3cols__columns-container {
    align-items: flex-start; /* Reset alignment on mobile */
  }

  .layout-title-3cols__row {
    flex-direction: column;
    gap: var(--spacing-3xl);
  }

  .layout-title-3cols__column {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0; /* Remove min-width constraint on mobile */
  }

  /* 4-Column Layout: Stack columns vertically */
  .layout-4cols__container {
    height: auto;
    justify-content: flex-start;
    gap: var(--spacing-3xl);
  }

  .layout-4cols__row {
    flex-direction: column;
    gap: var(--spacing-3xl);
  }

  .layout-4cols__column {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: auto;
    justify-content: flex-start;
  }

  /* Adjust caption spacing on mobile */

  /* Mockups Layout: Stack on mobile */
  .layout-mockups__container--split {
    grid-template-columns: 1fr;
  }

  /* Columns Layout: Single column */
  .layout-columns__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-3xl);
  }

  /* Grid Layout: Single column */
  .layout-grid__container {
    grid-template-columns: 1fr;
  }

  /* Text Layout: Reduce spacing */
  .layout-text__body {
    margin-top: var(--spacing-xl);
  }

  /* Closeup & Project Default: Responsive mockup sizing */
  .layout-closeup__mockup {
    width: 90%;
    max-height: 70vh;
    aspect-ratio: auto;
  }

  .layout-project-default__mockup {
    width: 90%;
    max-height: 70vh;
    aspect-ratio: auto;
  }

  /* Mockup Two & Three Page: Stack mockups vertically on mobile */
  .layout-mockup-two-page__row,
  .layout-mockup-three-page__row {
    flex-direction: column;
    gap: var(--spacing-xl);
    align-items: center;
  }

  .layout-mockup-two-page__row .mockup-component,
  .layout-mockup-three-page__row .mockup-component {
    max-width: 100%;
  }

  .layout-mockup-two-page__row .mockup-component__image,
  .layout-mockup-two-page__row .mockup-component__video,
  .layout-mockup-three-page__row .mockup-component__image,
  .layout-mockup-three-page__row .mockup-component__video {
    max-height: 60vh;
  }

  /* Showcase Layout: Stack mockups vertically on mobile */
  .layout-1mockups__inner,
  .layout-2mockups__inner,
  .layout-3mockups__inner,
  .layout-4mockups__inner,
  .layout-5mockups__inner {
    height: auto;
  }

  .layout-1mockups__row,
  .layout-2mockups__row,
  .layout-3mockups__row,
  .layout-4mockups__row,
  .layout-5mockups__row {
    flex-direction: column;
    height: auto;
    gap: var(--spacing-xl);
    align-items: stretch;
  }

  .layout-1mockups__column,
  .layout-2mockups__column,
  .layout-3mockups__column,
  .layout-4mockups__column,
  .layout-5mockups__column {
    width: 100%;
    height: auto;
    max-width: 400px;
    margin: 0 auto;
  }

  .layout-1mockups__mockup,
  .layout-2mockups__mockup,
  .layout-3mockups__mockup,
  .layout-4mockups__mockup,
  .layout-5mockups__mockup {
    aspect-ratio: 154/315;
    max-height: 60vh;
  }

  /* Carousel layout: Adjust for mobile */
  .layout-container[data-layout="carousel"] .layout-content {
    padding: var(--spacing-md);
  }

  .layout-container[data-layout="carousel"] .layout-carousel__carousel {
    max-height: 65vh;
  }

  .layout-container[data-layout="carousel"] .layout-carousel__carousel .mockup-component__image,
  .layout-container[data-layout="carousel"] .layout-carousel__carousel .mockup-component__video {
    max-height: 60vh;
  }
}

/* ========== DARK THEME ========== */
/* Theme variables defined globally in tokens.css */
/* All layouts inherit global theme from html[data-theme="dark"] */