/* =================================================================
   Miriam Imbrogno Makeup Artist — pages/chi-sono.css
   Stili specifici della pagina "Chi sono". Dipende da main.css.
   ================================================================= */

/* ---------- Page hero (chiaro) ---------- */
.page-hero {
  position: relative;
  background-color: var(--color-cream);
  overflow: hidden;
  padding-top: calc(64px + var(--space-7));
  padding-bottom: var(--space-8);
}
.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.page-hero__script {
  display: block;
  font-family: var(--font-script);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-nude-dark);
}
.page-hero__title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  margin-top: var(--space-2);
}
.page-hero__role {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: var(--space-3);
}
.page-hero__text {
  color: var(--text-soft);
  line-height: 1.8;
  max-width: 52ch;
  margin-top: var(--space-4);
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.page-hero__media { overflow: hidden; border-radius: var(--radius-lg); }
.page-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .page-hero { padding-top: calc(72px + var(--space-8)); }
  .page-hero__inner {
    display: grid;
    grid-template-columns: 1fr minmax(0, 430px);
    align-items: center;
    gap: var(--space-8);
  }
  .page-hero__media { order: 2; }
  .page-hero__script { font-size: 2.6rem; }
}

/* ---------- La mia storia (testo lungo) ---------- */
.story p { color: var(--text-soft); line-height: 1.9; }
.story p + p { margin-top: var(--space-4); }
.story .hl-nude { color: var(--color-nude-dark); }

/* ---------- Filosofia (citazione) ---------- */
.philosophy { text-align: center; }
.philosophy__quote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1rem + 2.4vw, 2.05rem);
  line-height: 1.5;
  color: var(--color-cream);
  font-style: normal;
  max-width: 22ch;
  margin: var(--space-5) auto 0;
}
.philosophy__quote strong { color: var(--color-nude); font-weight: 400; }
.philosophy__author {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-script);
  font-size: 1.9rem;
  color: var(--color-nude);
}

/* ---------- Valori / approccio ---------- */
.value {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.value__num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-nude);
}
.value__title {
  font-size: var(--fs-h3);
  margin-top: var(--space-3);
}
.value__text {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  line-height: 1.7;
}

/* ---------- Cinema callout ---------- */
.cinema__grid { align-items: center; }
.cinema__media { overflow: hidden; border-radius: var(--radius-lg); }
.cinema__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.cinema__body .eyebrow { color: var(--accent-hover); }
.cinema__body p { color: var(--bg-alt); line-height: 1.8; margin-top: var(--space-4); }
.cinema__body .btn { margin-top: var(--space-5); }