/*
 * MMP — About Us page styles
 * File: mmp-astra-child/assets/css/about-us.css
 */

/* ── PAGE BASE ──────────────────────────────────────────────── */

.mmp-about-hero,
.mmp-about-statement,
.mmp-about-next {
  width: 100%;
}

/* ── HERO ───────────────────────────────────────────────────── */

.mmp-about-hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(199, 151, 77, 0.18), transparent 34%),
    linear-gradient(135deg, var(--mmp-page-cream) 0%, var(--mmp-page-paper) 100%);
  padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.mmp-about-hero-inner {
  align-items: center !important;
  gap: clamp(2.25rem, 5vw, 5rem);
}

.mmp-about-hero-inner > * {
  margin: 0 !important;
}

.mmp-about-hero-title {
  color: var(--mmp-page-ink);
  font-size: clamp(2.75rem, 5vw, 5rem);
  line-height: var(--mmp-display-line-height);
  letter-spacing: var(--mmp-display-tracking);
  margin: 0 0 1.25rem !important;
  max-width: 760px;
}

.mmp-about-hero-lede {
  color: var(--mmp-page-muted);
  font-size: clamp(1.1rem, 1.45vw, 1.35rem);
  line-height: 1.65;
  margin: 0 !important;
  max-width: 680px;
}

.mmp-about-hero-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 0 !important;
}

.mmp-about-hero-tag {
  background: #fff;
  border: 1px solid rgba(40, 48, 57, 0.1);
  border-radius: 999px;
  color: var(--mmp-page-blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  margin: 0 !important;
}

/* ── STATEMENT ──────────────────────────────────────────────── */

.mmp-about-statement {
  background:
    radial-gradient(circle at 18% 20%, rgba(199, 151, 77, 0.22), transparent 34%),
    var(--mmp-page-ink);
  border-top: 1px solid rgba(255, 250, 241, 0.1);
  padding-block: clamp(4rem, 8vw, 7rem) !important;
}

.mmp-about-statement-kicker {
  line-height: var(--mmp-eyebrow-line-height);
  color: var(--mmp-page-gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: var(--mmp-eyebrow-tracking);
  text-transform: uppercase;
  margin: 0 0 1rem !important;
}

.mmp-about-statement-title {
  color: #fff;
  font-size: clamp(2.2rem, 4.8vw, 4.75rem);
  line-height: var(--mmp-h2-line-height);
  letter-spacing: var(--mmp-h2-tracking);
  margin: 0 !important;
  max-width: 900px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 921px) {
  .mmp-about-hero-inner,
  .mmp-about-next-grid {
    flex-direction: column !important;
  }

  .mmp-about-hero-copy {
    flex-basis: 100% !important;
  }
}

@media (max-width: 640px) {
  .mmp-about-hero,
  .mmp-about-next {
    padding-block: 3.5rem;
  }
}

/* ==========================================================================
   HERO — matched to the Imprints masthead (2026-10-15)
   Same background, padding, 46/54 split, kicker and display headline.
   The photo stands in for the Imprints book panels: tall, rounded,
   shadowed, cropped to fill.
   ========================================================================== */

.mmp-about-hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(199, 151, 77, 0.14), transparent 34%),
    linear-gradient(180deg, var(--mmp-page-paper), var(--mmp-page-cream));
  padding: clamp(4.5rem, 7vw, 6.5rem) 0 !important;
}

.mmp-about-hero-inner {
  gap: clamp(2rem, 5vw, 4rem) !important;
}

.mmp-about-hero-inner > .mmp-about-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch !important;
}

.mmp-about-hero-inner > .mmp-about-hero-copy {
  flex-basis: 46% !important;
}

.mmp-about-hero-inner > .mmp-about-hero-image-col {
  flex-basis: 54% !important;
}

/* Label styled as the Imprints kicker */
.mmp-about-hero .mmp-section-label {
  font-family: var(--mmp-font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: var(--mmp-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--mmp-page-blue);
  line-height: var(--mmp-eyebrow-line-height);
  margin: 0 0 1.6em !important;
}

/* Display headline, sized for a sentence */
.mmp-about-hero-title {
  font-family: var(--mmp-font-heading) !important;
  font-weight: 800 !important;
  font-size: clamp(3rem, 5.6vw, 5.6rem) !important;
  line-height: var(--mmp-display-line-height) !important;
  letter-spacing: var(--mmp-display-tracking) !important;
  margin: 0 !important;
  text-wrap: balance;
}

.mmp-about-hero-lede {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem) !important;
  line-height: 1.7 !important;
  max-width: 600px;
  margin: 26px 0 0 !important;
}

.mmp-about-hero-tags {
  margin-top: 30px !important;
}

/* Photo as a tall panel */
.mmp-about-hero-image {
  margin: 0 !important;
  height: 560px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--mmp-page-shadow);
}

.mmp-about-hero-image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 920px) {
  .mmp-about-hero-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mmp-about-hero-inner > .mmp-about-hero-copy,
  .mmp-about-hero-inner > .mmp-about-hero-image-col {
    flex-basis: 100% !important;
  }

  .mmp-about-hero-image {
    height: 420px;
  }
}

@media (max-width: 680px) {
  .mmp-about-hero-image {
    height: 280px;
    border-radius: 18px;
  }
}

/* ==========================================================================
   REDESIGN (2026-10-19)
   "What we create" and the CTA reuse the homepage's sections (home.css).
   Below: the small label on each imprint
   card and the two "Learn more" cards that point to What We Do and Our
   Story.
   ========================================================================== */

/* "What we create" heading runs the full width (the homepage caps it at 780px) */
.mmp-about-imprints .mmp-section-header {
  max-width: none;
}

/* Imprint cards: the About page's own label above the imprint name */
.mmp-about-imprints .mmp-about-imprint-label {
  color: var(--mmp-page-gold);
  font-size: 0.7rem;
  margin: 0 0 0.5rem !important;
}

/* Learn more */
.mmp-about-next {
  background: var(--mmp-page-paper);
  padding: clamp(4rem, 7vw, 6rem) 0 !important;
}

.mmp-about-next-grid {
  gap: 1.25rem !important;
  margin: 0 !important;
}

.mmp-about-next-grid > * {
  margin: 0 !important;
}

.mmp-about-next-card {
  display: flex;
  flex-direction: column;
  background: var(--mmp-white);
  border: 1px solid var(--mmp-page-border-light);
  border-radius: 22px;
  padding: clamp(1.5rem, 2.6vw, 2.25rem) !important;
  box-shadow: var(--mmp-shadow-subtle);
}

.mmp-about-next-card .mmp-kicker {
  margin: 0 0 0.75rem !important;
}

.mmp-about-next-card h3 {
  color: var(--mmp-page-ink) !important;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: var(--mmp-h3-line-height);
  letter-spacing: var(--mmp-h3-tracking);
  margin: 0 0 0.75rem !important;
}

.mmp-about-next-card p:not(.mmp-kicker):not(.mmp-about-next-link) {
  color: var(--mmp-page-muted);
  line-height: 1.6;
  margin: 0 !important;
}

.mmp-about-next-link {
  margin: auto 0 0 !important;
  padding-top: 1.25rem;
}

.mmp-about-next-link a {
  color: var(--mmp-page-blue);
  font-weight: 800;
  text-decoration: none;
}

.mmp-about-next-link a:hover,
.mmp-about-next-link a:focus-visible {
  color: var(--mmp-page-gold);
}