/* =====================================================================
   Miss Pepper AI — components.css
   Editorial-print system. Pepper · Tide · Terracotta · Cream.
   ===================================================================== */

/* ---------- 0. Root tokens (fallback if theme.json vars not piped) ---------- */
:root {
  --mp-pepper:        #1A1714;
  --mp-pepper-700:    #3D362F;
  --mp-pepper-500:    #524A41;
  --mp-pepper-300:    #8A7F70;
  --mp-pepper-100:    #B7AEA1;
  --mp-pepper-50:     #E8E2D8;

  --mp-tide:          #1B75BC;
  --mp-tide-900:      #0E3F66;
  --mp-tide-700:      #145A91;
  --mp-tide-300:      #7BAFDA;
  --mp-tide-100:      #D6E7F3;

  --mp-terracotta:        #BB6B1B;
  --mp-terracotta-900:    #5C3409;
  --mp-terracotta-700:    #8E5114;
  --mp-terracotta-300:    #E0A56A;
  --mp-terracotta-100:    #F1DCC4;

  --mp-cream:         #F5EDDA;
  --mp-cream-soft:    #FAF6EB;
  --mp-cream-edge:    #EDE3CB;

  --mp-serif:         'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mp-sans:          'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mp-mono:          'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --mp-radius-sm:     6px;
  --mp-radius-md:     12px;
  --mp-radius-lg:     20px;
  --mp-radius-pill:   999px;

  --mp-shadow-soft:   0 1px 2px rgba(26,23,20,0.04), 0 4px 16px rgba(26,23,20,0.06);
  --mp-shadow-lifted: 0 2px 4px rgba(26,23,20,0.04), 0 12px 32px rgba(26,23,20,0.08);

  --mp-ease:          cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------- 1. Base reset overrides ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

::selection {
  background-color: var(--mp-terracotta);
  color: var(--mp-cream);
}

/* Editorial body type rendering */
p, li { letter-spacing: 0.005em; }

/* List style — clean (used in footer) */
ul.is-style-mp-clean { list-style: none; padding-left: 0; }
ul.is-style-mp-clean li { padding-left: 0; }
ul.is-style-mp-clean a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms var(--mp-ease);
}
ul.is-style-mp-clean a:hover {
  color: var(--mp-cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

/* ---------- 2. Site header ---------- */
.mp-site-header {
  position: sticky;
  top: 0;
  background-color: rgba(245, 237, 218, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  z-index: 50;
}

.mp-header-row {
  align-items: center;
  gap: 24px;
}

.mp-wordmark a {
  color: var(--mp-pepper);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.mp-wm-name {
  font-family: var(--mp-serif);
  font-style: italic;
  letter-spacing: -0.01em;
}
.mp-wm-dot {
  color: var(--mp-terracotta);
  font-family: var(--mp-serif);
  font-style: italic;
  font-size: 1.1em;
  margin-left: 1px;
}
.mp-wordmark-mono { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--mp-pepper-100); }

.mp-header-rule { background-color: var(--mp-cream-edge) !important; height: 1px; border: 0; }
/* NOTE: responsive header nav + hamburger CSS is inlined in parts/header.html
   (template part, read fresh from disk) so it can't be broken by a stale
   components.css cache. Do not re-add it here. */

/* ---------- 3. Hero ---------- */
.mp-hero {
  padding-top: 96px;
  padding-bottom: 64px;
  position: relative;
  overflow: hidden;
}
.mp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .mp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}
.mp-hero-image {
  position: relative;
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  background: var(--mp-cream-soft);
  box-shadow: var(--mp-shadow-lifted);
  aspect-ratio: 4/5;
}
.mp-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(26,23,20,0.08);
  border-radius: var(--mp-radius-lg);
}
.mp-hero-image-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--mp-pepper);
  color: var(--mp-cream);
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--mp-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mp-hero-image-tag::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--mp-tide);
  border-radius: 50%;
  display: inline-block;
}
.mp-tide-bar {
  height: 3px;
  background: var(--mp-tide);
  width: 56px;
  margin-bottom: 28px;
  border-radius: 2px;
}
.mp-hero-eyebrow {
  font-family: var(--mp-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-pepper-300);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.mp-hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--mp-terracotta);
  display: inline-block;
}
.mp-hero-headline {
  font-family: var(--mp-serif);
  font-weight: 400;
  font-size: clamp(48px, 3rem + 4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--mp-pepper);
  max-width: 16ch;
  margin: 0 0 24px;
}
.mp-hero-headline em {
  font-style: italic;
  color: var(--mp-pepper);
  position: relative;
  display: inline-block;
}
.mp-hero-headline em::after {
  content: "";
  position: absolute;
  left: 2%;
  bottom: 0.04em;
  width: 96%;
  height: 0.18em;
  background: var(--mp-terracotta-100);
  z-index: -1;
  transform: skewX(-2deg);
}
.mp-hero-sub {
  font-family: var(--mp-sans);
  font-size: clamp(18px, 1.05rem + 0.4vw, 22px);
  line-height: 1.5;
  color: var(--mp-pepper-500);
  max-width: 56ch;
  margin: 0 0 40px;
}
.mp-hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

/* ---------- 4. Buttons (extending core button) ---------- */
.wp-block-button__link {
  transition: background-color 150ms var(--mp-ease), color 150ms var(--mp-ease), transform 100ms var(--mp-ease);
}
.wp-block-button__link:active { transform: scale(0.98); }

.mp-btn-ghost .wp-block-button__link,
.is-style-mp-ghost .wp-block-button__link {
  background-color: transparent !important;
  color: var(--mp-pepper) !important;
  border: 1.5px solid var(--mp-pepper);
  padding-top: 14px;
  padding-bottom: 14px;
}
.mp-btn-ghost .wp-block-button__link:hover {
  background-color: var(--mp-pepper) !important;
  color: var(--mp-cream) !important;
}

.mp-btn-link .wp-block-button__link,
.is-style-mp-link .wp-block-button__link {
  background-color: transparent !important;
  color: var(--mp-tide-700) !important;
  padding: 0 !important;
  border: 0 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  border-radius: 0 !important;
  font-weight: 600;
}

/* ---------- 5. Receipts strip (signature) ---------- */
.mp-receipts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 2px solid var(--mp-tide);
  border-bottom: 2px solid var(--mp-tide);
  margin: 64px 0;
  background: var(--mp-cream-soft);
}
.mp-receipt {
  padding: 32px 28px;
  border-right: 1px solid var(--mp-tide-300);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-receipt:last-child { border-right: 0; }
.mp-receipt-num {
  font-family: var(--mp-mono);
  font-size: clamp(28px, 2rem + 1vw, 40px);
  font-weight: 500;
  color: var(--mp-pepper);
  letter-spacing: -0.02em;
  line-height: 1;
}
.mp-receipt-num .mp-unit {
  color: var(--mp-terracotta);
  font-weight: 400;
  margin-left: 2px;
}
.mp-receipt-label {
  font-family: var(--mp-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mp-pepper-300);
}
@media (max-width: 768px) {
  .mp-receipts { grid-template-columns: repeat(2, 1fr); }
  .mp-receipt:nth-child(2) { border-right: 0; }
  .mp-receipt:nth-child(1), .mp-receipt:nth-child(2) { border-bottom: 1px solid var(--mp-tide-300); }
}

/* ---------- 5b. Hot take with inline image ---------- */
.mp-hot-take-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
  margin: 96px 0;
}
.mp-hot-take-grid .mp-hot-take { margin: 0; }
.mp-hot-take-image {
  position: relative;
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  background: var(--mp-cream-soft);
  box-shadow: var(--mp-shadow-soft);
  aspect-ratio: 1/1;
}
.mp-hot-take-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-hot-take-image::before {
  content: "";
  position: absolute;
  top: 24px; left: 24px;
  width: 32px; height: 32px;
  border-top: 2px solid var(--mp-tide);
  border-left: 2px solid var(--mp-tide);
  z-index: 2;
}
.mp-hot-take-image::after {
  content: "";
  position: absolute;
  bottom: 24px; right: 24px;
  width: 32px; height: 32px;
  border-bottom: 2px solid var(--mp-terracotta);
  border-right: 2px solid var(--mp-terracotta);
  z-index: 2;
}
@media (max-width: 900px) {
  .mp-hot-take-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- 5c. Methodology section header image ---------- */
.mp-methodology-header-image {
  width: 100%;
  height: 320px;
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  margin: 32px 0 64px;
  background: var(--mp-cream-soft);
  box-shadow: var(--mp-shadow-soft);
  position: relative;
}
.mp-methodology-header-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-methodology-header-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(245,237,218,0.5) 100%);
  pointer-events: none;
}

/* ---------- 6. Hot take pull quote ---------- */
.mp-hot-take {
  margin: 96px 0;
  padding: 0 0 0 48px;
  border-left: 4px solid var(--mp-terracotta);
  max-width: 24ch;
}
.mp-hot-take-eyebrow {
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-terracotta-700);
  margin-bottom: 24px;
}
.mp-hot-take-quote {
  font-family: var(--mp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 2.4rem + 2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mp-pepper);
  margin: 0 0 24px;
}
.mp-hot-take-byline {
  font-family: var(--mp-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-pepper-300);
}

/* ---------- 7. Bento services grid (asymmetric) ---------- */
.mp-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
  margin: 64px 0;
}
.mp-bento-card {
  background-color: var(--mp-cream-soft);
  border: 1px solid var(--mp-cream-edge);
  border-radius: var(--mp-radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 200ms var(--mp-ease), box-shadow 200ms var(--mp-ease);
  text-decoration: none;
  color: var(--mp-pepper);
}
.mp-bento-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mp-shadow-lifted);
}
.mp-bento-card.is-feature { grid-column: span 4; grid-row: span 2; }
.mp-bento-card.is-half { grid-column: span 3; }
.mp-bento-card.is-third { grid-column: span 2; }
.mp-bento-card.is-twothirds { grid-column: span 4; }
.mp-bento-card.is-dark {
  background-color: var(--mp-pepper);
  color: var(--mp-cream);
  border-color: var(--mp-pepper-700);
}
.mp-bento-card.is-tide {
  background-color: var(--mp-tide);
  color: var(--mp-cream);
  border-color: var(--mp-tide-900);
}
.mp-bento-card.is-terracotta {
  background-color: var(--mp-terracotta);
  color: var(--mp-cream);
  border-color: var(--mp-terracotta-900);
}
.mp-bento-eyebrow {
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.mp-bento-title {
  font-family: var(--mp-serif);
  font-size: clamp(24px, 1.4rem + 0.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}
.mp-bento-card.is-feature .mp-bento-title { font-size: clamp(36px, 2rem + 1.6vw, 56px); }
.mp-bento-desc {
  font-family: var(--mp-sans);
  font-size: 15px;
  line-height: 1.5;
  color: inherit;
  opacity: 0.85;
  max-width: 38ch;
}
.mp-bento-cta {
  font-family: var(--mp-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.mp-bento-cta::after {
  content: "→";
  transition: transform 150ms var(--mp-ease);
  font-family: var(--mp-sans);
}
.mp-bento-card:hover .mp-bento-cta::after {
  transform: translateX(4px);
}
@media (max-width: 1024px) {
  .mp-bento { grid-template-columns: repeat(2, 1fr); }
  .mp-bento-card.is-feature,
  .mp-bento-card.is-half,
  .mp-bento-card.is-third,
  .mp-bento-card.is-twothirds {
    grid-column: span 2;
    grid-row: auto;
  }
}

/* ---------- 8. Case study cards (annotated screenshots) ---------- */
.mp-case-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin: 96px 0;
}
.mp-case-card.is-flipped { grid-template-columns: 1fr 1fr; direction: rtl; }
.mp-case-card.is-flipped > * { direction: ltr; }
.mp-case-meta {
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-pepper-300);
  margin-bottom: 16px;
}
.mp-case-title {
  font-family: var(--mp-serif);
  font-size: clamp(28px, 1.8rem + 1.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--mp-pepper);
}
.mp-case-desc {
  font-family: var(--mp-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--mp-pepper-500);
  max-width: 48ch;
  margin-bottom: 32px;
}
.mp-case-stats {
  display: flex;
  gap: 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.mp-case-stat-num {
  font-family: var(--mp-mono);
  font-size: clamp(28px, 1.8rem + 0.6vw, 36px);
  font-weight: 500;
  color: var(--mp-pepper);
  line-height: 1;
}
.mp-case-stat-label {
  font-family: var(--mp-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-pepper-300);
  margin-top: 4px;
}
.mp-case-img-wrap {
  position: relative;
  border-radius: var(--mp-radius-md);
  overflow: hidden;
  background-color: var(--mp-cream-soft);
  box-shadow: var(--mp-shadow-lifted);
}
.mp-case-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.mp-case-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(26,23,20,0.08);
  border-radius: var(--mp-radius-md);
}
@media (max-width: 768px) {
  .mp-case-card,
  .mp-case-card.is-flipped { grid-template-columns: 1fr; gap: 32px; direction: ltr; }
}

/* ---------- 9. Marquee (proof bar / clients) ---------- */
.mp-marquee {
  overflow: hidden;
  border-top: 1px solid var(--mp-pepper-100);
  border-bottom: 1px solid var(--mp-pepper-100);
  padding: 20px 0;
  margin: 64px 0;
  background-color: var(--mp-cream-soft);
}
.mp-marquee-track {
  display: flex;
  gap: 48px;
  animation: mp-marquee-scroll 40s linear infinite;
  width: max-content;
}
.mp-marquee-item {
  font-family: var(--mp-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-pepper-500);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.mp-marquee-item::before {
  content: "■";
  color: var(--mp-terracotta);
  font-size: 8px;
}
@keyframes mp-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mp-marquee:hover .mp-marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .mp-marquee-track { animation: none; flex-wrap: wrap; }
}

/* ---------- 10. Section eyebrow (across many sections) ---------- */
.mp-section-eyebrow {
  font-family: var(--mp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mp-terracotta-700);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.mp-section-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--mp-terracotta);
}
.mp-section-headline {
  font-family: var(--mp-serif);
  font-weight: 400;
  font-size: clamp(32px, 2rem + 1.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mp-pepper);
  max-width: 22ch;
  margin: 0 0 24px;
}
.mp-section-headline em { font-style: italic; }
.mp-section-sub {
  font-family: var(--mp-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--mp-pepper-500);
  max-width: 56ch;
  margin: 0 0 64px;
}

/* ---------- 11. FAQ / objection handling ---------- */
.mp-faq {
  border-top: 1px solid var(--mp-pepper-100);
  margin: 0;
}
.mp-faq-item {
  border-bottom: 1px solid var(--mp-pepper-100);
  padding: 24px 0;
}
.mp-faq-q {
  font-family: var(--mp-serif);
  font-size: clamp(20px, 1.2rem + 0.4vw, 26px);
  line-height: 1.3;
  color: var(--mp-pepper);
  margin: 0 0 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}
.mp-faq-q::after {
  content: "+";
  font-family: var(--mp-sans);
  font-size: 24px;
  color: var(--mp-terracotta);
  transition: transform 200ms var(--mp-ease);
}
.mp-faq-item[open] .mp-faq-q::after { content: "−"; }
.mp-faq-a {
  font-family: var(--mp-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mp-pepper-500);
  max-width: 65ch;
  margin: 12px 0 0;
}

/* ---------- 12. Final CTA ---------- */
.mp-final-cta {
  background-color: var(--mp-pepper);
  color: var(--mp-cream);
  padding: 96px 64px;
  border-radius: var(--mp-radius-lg);
  margin: 96px 0 0;
  position: relative;
  overflow: hidden;
}
.mp-final-cta::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--mp-terracotta) 0%, transparent 60%);
  opacity: 0.15;
  pointer-events: none;
}
.mp-final-cta-headline {
  font-family: var(--mp-serif);
  font-weight: 400;
  font-size: clamp(40px, 2.4rem + 2vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mp-cream);
  max-width: 18ch;
  margin: 0 0 32px;
  position: relative;
}
.mp-final-cta-headline em { font-style: italic; color: var(--mp-terracotta-300); }
.mp-final-cta-sub {
  font-family: var(--mp-sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--mp-pepper-100);
  max-width: 56ch;
  margin: 0 0 40px;
  position: relative;
}
.mp-final-cta-meta {
  font-family: var(--mp-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-pepper-300);
  margin-top: 32px;
  position: relative;
}

/* ---------- 13. Footer (overrides) ---------- */
.mp-site-footer a {
  color: var(--mp-pepper-100);
  text-decoration: none;
  transition: color 150ms var(--mp-ease);
}
.mp-site-footer a:hover {
  color: var(--mp-cream);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mp-footer-bottom { gap: 16px; }

/* ---------- 14. Utility: containers that break into wide ---------- */
.mp-container-wide {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}