/* ============================================================================
   SECTION 07 — LAZER  (Figma node 169:6542 "07-lazer")
   Cream section: title + image, then a 4×3 grid of amenity cards (one is a CTA).
   ========================================================================== */

.lazer {
  background-color: var(--color-bg);
  padding-block: var(--section-pad-y);
}

.lazer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);           /* 80px */
}

/* --------------------------------------------------------- HEAD --------- */
.lazer__head {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: var(--space-16);           /* 64px */
}
.lazer__title.section-header {
  flex: 0 1 564px;
  gap: var(--space-8);            /* 32px */
}
.lazer__title .section-header__title { color: var(--color-heading); }

.lazer__media {
  flex: 1 1 0;
  min-width: 0;
  height: 300px;
  overflow: hidden;
  background-color: var(--monarca-scrim);
}
.lazer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------- FEATURES GRID ----- */
.features-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, 145px);
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);            /* 20px */
  padding: var(--space-8);        /* 32px */
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.feature__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-eyebrow-size);
  line-height: 1.2;
  letter-spacing: 0.15em;         /* a hair tighter than the 0.16em default so labels stay on one line */
  text-transform: uppercase;
  color: var(--color-heading);
}

/* CTA cell */
.feature--cta {
  background-color: var(--color-surface-inverse);
  align-items: stretch;
  gap: var(--space-3);            /* 12px */
}
.feature__cta-title {
  font-family: var(--font-serif);
  font-size: var(--text-h4-size); /* 20px */
  line-height: 1.2;
  letter-spacing: var(--text-h4-tr);
  color: var(--color-text-on-inverse);
}
.feature--cta .button { width: 100%; }

/* ================================================================ TABLET === */
@media (max-width: 1024px) {
  .lazer__inner { gap: var(--space-12); }
  .lazer__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-10);
  }
  .lazer__title.section-header { flex: none; max-width: 34rem; }
  .lazer__media { flex: none; height: 320px; }

  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(145px, auto);
  }
}

/* ================================================================ MOBILE === */
@media (max-width: 640px) {
  .lazer__media { height: 240px; }
  .feature { padding: var(--space-6); gap: var(--space-5); }
  .feature--cta { grid-column: 1 / -1; padding: var(--space-8); }
}