/* TRES4CINCO — Shared Layout Utilities */

/* ── Containers ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--width-wide);
  margin-inline: auto;
  padding-inline: var(--space-16);
}
.container--content { max-width: var(--width-content); }
.container--narrow  { max-width: var(--width-narrow); }

/* ── Grids ───────────────────────────────────────────────────── */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
}

/* ── Flex Helpers ────────────────────────────────────────────── */
.flex             { display: flex; }
.flex-col         { flex-direction: column; }
.items-center     { align-items: center; }
.items-start      { align-items: flex-start; }
.items-end        { align-items: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-center   { justify-content: center; }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* ── Asymmetric Splits (preferred — 60/40 asymmetry = premium feel) ── */
.split-60-40 {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: var(--space-16);
  align-items: center;
}
.split-40-60 {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: var(--space-16);
  align-items: center;
}
.split-65-35 {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: var(--space-16);
  align-items: center;
}

/* ── Section Wrappers ────────────────────────────────────────── */
.section {
  padding-block: var(--space-32);
}
.section--condensed {
  padding-block: var(--space-20);
}
.section--hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ── Color Surfaces ──────────────────────────────────────────── */
.bg-caoba   { background-color: var(--color-caoba); }
.bg-tabaco  { background-color: var(--color-tabaco); }
.bg-oceano  { background-color: var(--color-oceano); }
.bg-musgo   { background-color: var(--color-musgo); }

/* ── Text Color Helpers ──────────────────────────────────────── */
.text-lino    { color: var(--color-lino); }
.text-tabaco  { color: var(--color-tabaco); }
.text-musgo   { color: var(--color-musgo); }
.text-caoba   { color: var(--color-caoba); }

/* ── Typography Components ───────────────────────────────────── */
.text-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.text-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-tabaco);
}

/* ── Divider ─────────────────────────────────────────────────── */
.divider {
  width: 3rem;
  height: 2px;
  background-color: var(--color-tabaco);
  margin-block: var(--space-6);
}

/* ── Photo Aspect Ratios ─────────────────────────────────────── */
.aspect-hero     { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-square   { aspect-ratio: 1; }
.aspect-wide     { aspect-ratio: 21 / 9; }
.aspect-cinema   { aspect-ratio: 2.39 / 1; }

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Noise Texture Overlay (SVG — 2% opacity on dark sections) ── */
.noise-overlay { position: relative; }
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.02;
  pointer-events: none;
  z-index: var(--z-raised);
}

/* ── Interactive States ──────────────────────────────────────── */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lifted);
}

.transition-base {
  transition: all 0.25s ease;
}

/* ── Overlay Helpers (hero/section photo overlays) ───────────── */
.overlay-dark {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--color-caoba-40) 0%,
    var(--color-caoba-90) 100%
  );
}
.overlay-gradient-right {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(52, 39, 31, 0) 40%,
    var(--color-caoba-90) 100%
  );
}