/* =============================================================
   layouts.css — Page-level layout structures
   2026 warm organic edition
   ============================================================= */


/* -----------------------------------------------------------
   Hero
   ----------------------------------------------------------- */

.hero {
  padding-top: calc(var(--nav-height) + clamp(var(--space-16), 8vw, var(--space-32)));
  padding-bottom: clamp(var(--space-12), 6vw, var(--space-24));
  text-align: center;
}

.hero--left {
  text-align: left;
}

/* Eyebrow */

.hero__eyebrow {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

/* Title */

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tighter);
  line-height: 1.05;
  color: var(--color-label);
}

/* Subtitle */

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-label-3);
  line-height: 1.65;
  max-width: 520px;
  margin: var(--space-6) auto 0;
}

.hero--left .hero__subtitle {
  margin-left: 0;
}

/* Actions */

.hero__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  justify-content: center;
  flex-wrap: wrap;
}

.hero--left .hero__actions {
  justify-content: flex-start;
}


/* -----------------------------------------------------------
   Bento grid — homepage featured (12-col)
   ----------------------------------------------------------- */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: var(--space-4);
}

/* Large: 7 cols × 2 rows */
.bento-card--large {
  grid-column: span 7;
  grid-row: span 2;
}

/* Wide: 5 cols × 1 row */
.bento-card--wide {
  grid-column: span 5;
}

/* Tall: 5 cols × 2 rows */
.bento-card--tall {
  grid-column: span 5;
  grid-row: span 2;
}

/* Normal: 4 cols */
.bento-card--normal {
  grid-column: span 4;
}

/* Tablet */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }

  .bento-card--large,
  .bento-card--wide,
  .bento-card--tall,
  .bento-card--normal {
    grid-column: span 1;
    grid-row: span 1;
  }

  .bento-card--large {
    grid-column: span 2;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .bento-card--large,
  .bento-card--wide,
  .bento-card--tall,
  .bento-card--normal {
    grid-column: span 1;
    grid-row: span 1;
  }
}


/* -----------------------------------------------------------
   Projects grid — work.html (uniform 3-col)
   ----------------------------------------------------------- */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .projects-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
}


/* -----------------------------------------------------------
   Filters row
   ----------------------------------------------------------- */

.filters-row {
  margin-bottom: var(--space-10);
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.filters-row::-webkit-scrollbar {
  display: none;
}

.filters-row--center {
  justify-content: center;
}

@media (max-width: 640px) {
  .filters-row {
    padding-bottom: 2px;
  }

  .segment-control {
    min-width: max-content;
  }
}


/* -----------------------------------------------------------
   Section
   ----------------------------------------------------------- */

.section {
  padding: clamp(var(--space-12), 7vw, var(--space-24)) 0;
}

.section--tight {
  padding: clamp(var(--space-8), 4vw, var(--space-12)) 0;
}

.section__header {
  margin-bottom: var(--space-10);
}


/* -----------------------------------------------------------
   Services grid
   ----------------------------------------------------------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 860px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}