/* ==========================================================================
   Lykkehaven — page-specific styling
   ========================================================================== */

/* ---------- Home: hero ---------- */
.home-hero {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 7vw, 6rem);
  overflow: clip;
}

.home-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

@media (min-width: 64rem) {
  .home-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.home-hero__copy {
  position: relative;
  z-index: 2;
}

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spruce);
  opacity: 0.8;
  margin-bottom: var(--space-5);
}

.home-hero__eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--spruce);
  opacity: 0.5;
}

.home-hero h1 {
  font-size: clamp(3rem, 8.5vw, 6.75rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  font-weight: 300;
  margin-bottom: var(--space-5);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

.home-hero h1 .it { font-style: italic; font-weight: 300; }

.home-hero__lede {
  max-width: 38ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--spruce);
  margin-bottom: var(--space-6);
}

.home-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7);
  border-top: 1px solid var(--spruce-20);
  padding-top: var(--space-5);
  max-width: 36rem;
}

.home-hero__meta span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spruce);
  opacity: 0.75;
}

/* Hero image stack */
.home-hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-hero__motif {
  position: absolute;
  bottom: -22px;
  left: -22px;
  width: 90px;
  color: var(--cedar);
  opacity: 0.95;
  will-change: transform;
}

@media (min-width: 64rem) {
  .home-hero__motif {
    width: 120px;
    bottom: -32px;
    left: -36px;
  }
}

/* ---------- Home: two-gift section ---------- */
.gifts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

@media (min-width: 56rem) {
  .gifts-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5.5rem);
  }
}

.gift {
  position: relative;
}

.gift__lang {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-2xl);
  letter-spacing: -0.005em;
  color: var(--spruce);
  margin-bottom: var(--space-3);
  font-variation-settings: "opsz" 72, "SOFT" 50;
}

.section-indoor .gift__lang { color: var(--bark); }

.gift__gloss {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--spruce);
  opacity: 0.7;
  margin-bottom: var(--space-5);
}

.section-indoor .gift__gloss { color: var(--bark); opacity: 0.7; }

/* ---------- Day rhythm strip ---------- */
.day-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  border-top: 1px solid var(--spruce-20);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
}

@media (min-width: 56rem) {
  .day-strip { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}

.day-strip__step {
  position: relative;
}

.day-strip__time {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spruce);
  opacity: 0.65;
  margin-bottom: var(--space-3);
}

.day-strip__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.2;
  color: var(--spruce);
  margin-bottom: var(--space-3);
  font-variation-settings: "opsz" 36, "SOFT" 50;
}

.day-strip__body {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--spruce);
  opacity: 0.85;
  max-width: 28ch;
}

.section-indoor .day-strip__title { color: var(--bark); }
.section-indoor .day-strip__body { color: var(--bark); }
.section-indoor .day-strip__time { color: var(--bark); }

/* ---------- Closing CTA band ---------- */
.closing {
  padding-block: clamp(5rem, 10vw, 9rem);
  text-align: left;
  position: relative;
}

.closing__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.05;
  max-width: 18ch;
  margin-bottom: var(--space-4);
}

.closing__note {
  max-width: 40ch;
  font-size: var(--fs-md);
  color: var(--spruce);
  margin-bottom: var(--space-6);
}

/* ---------- Philosophy chapter card ---------- */
.chapter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-block: var(--space-8);
  align-items: start;
}

@media (min-width: 56rem) {
  .chapter { grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 6vw, 5rem); }
}

.chapter__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

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

.chapter__body h2 { margin-top: 0; }
.chapter__body h3 { color: var(--spruce); }

/* ---------- Programs: tier blocks ---------- */
.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 56rem) {
  .tiers { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.tier {
  background: transparent;
  border-top: 1px solid var(--spruce-40);
  padding-top: var(--space-5);
}

.section-indoor .tier { border-top-color: var(--bark-20); }

.tier__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--spruce);
  opacity: 0.7;
  margin-bottom: var(--space-4);
}

.section-indoor .tier__label { color: var(--bark); }

.tier__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: var(--space-3);
  color: var(--spruce);
  font-variation-settings: "opsz" 36, "SOFT" 50;
}

.section-indoor .tier__name { color: var(--bark); }

.tier p { font-size: var(--fs-base); max-width: 36ch; }

/* ---------- Careers: role block ---------- */
.role {
  padding-block: var(--space-7);
  border-top: 1px solid var(--spruce-20);
}

.role__heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  align-items: baseline;
}

@media (min-width: 48rem) {
  .role__heading {
    grid-template-columns: 1fr auto;
    gap: var(--space-5);
  }
}

.role__title {
  font-size: var(--fs-2xl);
  margin: 0;
  font-weight: 300;
  line-height: 1.1;
  max-width: none;
}

.role__meta {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--spruce);
  opacity: 0.75;
  letter-spacing: 0.04em;
}

.role__sub {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--spruce);
  opacity: 0.7;
  margin-bottom: var(--space-3);
  margin-top: var(--space-6);
}

/* ---------- Inquire: form layout ---------- */
.inquire-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 60rem) {
  .inquire-shell {
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2rem, 6vw, 6rem);
  }
}

.inquire-aside h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-5);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 36rem) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- 404 ---------- */
.notfound {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: left;
  padding-block: var(--space-9);
}

.notfound__inner {
  max-width: 36rem;
}

.notfound h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: var(--space-5);
  font-weight: 300;
  line-height: 1.05;
}

/* ---------- Long prose page wrapper for legal pages ---------- */
.legal {
  max-width: 38rem;
  margin-inline: auto;
}

.legal h2 {
  font-size: var(--fs-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  max-width: 28ch;
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}

.legal p { font-size: var(--fs-md); }

.legal__eff {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spruce);
  opacity: 0.65;
  margin-bottom: var(--space-6);
}