/**
 * MyPizzaTeacher component and section styles.
 * Raw design values belong in tokens.css only.
 */

/* Header and navigation */

.mpt-header {
  position: sticky;
  z-index: var(--z-sticky);
  inset-block-start: var(--space-none);
  min-height: var(--header-height);
  border-block-end: var(--border-subtle);
  background: var(--color-bg);
  transition:
    min-height var(--transition),
    background-color var(--transition),
    backdrop-filter var(--transition);
}

.mpt-header--compact {
  min-height: var(--header-height-compact);
  background: var(--color-header);
  backdrop-filter: blur(var(--header-blur));
}

.mpt-header__inner {
  display: grid;
  min-height: inherit;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: var(--align-center);
}

.mpt-brand,
.mpt-brand a {
  display: inline-flex;
  align-items: var(--align-center);
  color: var(--color-ink);
  text-decoration: none;
}

.mpt-brand img,
.mpt-brand .custom-logo {
  width: var(--size-auto);
  max-width: var(--logo-max-width);
  max-height: var(--header-height-compact);
}

.mpt-brand__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-flat);
}

.mpt-nav {
  display: flex;
  align-items: var(--align-center);
}

.mpt-nav--desktop {
  gap: var(--space-md);
  justify-content: center;
}

.mpt-nav a {
  color: inherit;
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.mpt-nav a:hover,
.mpt-nav a[aria-current="page"] {
  color: var(--color-brand-dark);
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

.mpt-section--ink :where(a, button, input, select, textarea):focus-visible,
.mpt-section--basil :where(a, button, input, select, textarea):focus-visible {
  outline: var(--border-focus-invert);
}

.mpt-menu-toggle,
.mpt-menu-close {
  display: none;
  width: var(--touch-min);
  height: var(--touch-min);
  align-items: var(--align-center);
  justify-content: center;
  padding: var(--space-none);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}

.mpt-menu-toggle__icon,
.mpt-menu-toggle__icon::before,
.mpt-menu-toggle__icon::after {
  width: var(--icon-length);
  height: var(--icon-stroke);
  background: currentColor;
  content: "";
}

.mpt-menu-toggle__icon {
  position: relative;
}

.mpt-menu-toggle__icon::before,
.mpt-menu-toggle__icon::after {
  position: absolute;
  inset-inline-start: var(--space-none);
}

.mpt-menu-toggle__icon::before {
  inset-block-start: calc(var(--space-xs) * -1);
}

.mpt-menu-toggle__icon::after {
  inset-block-end: calc(var(--space-xs) * -1);
}

.mpt-menu-overlay {
  position: fixed;
  z-index: var(--z-overlay);
  inset: var(--space-none);
  background: var(--color-overlay);
  opacity: var(--opacity-hidden);
  transition: opacity var(--transition-menu);
}

.mpt-menu-overlay--visible {
  opacity: var(--opacity-visible);
}

.mpt-mobile-menu {
  position: fixed;
  z-index: var(--z-menu);
  inset-block: var(--space-none);
  inset-inline-end: var(--space-none);
  width: min(var(--size-full), var(--menu-max-width));
  padding: var(--space-md);
  overflow-y: auto;
  border-inline-start: var(--border-strong);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  transform: translateX(var(--menu-hidden-shift));
  transition: transform var(--transition-menu);
}

.mpt-mobile-menu--open {
  transform: none;
}

.mpt-mobile-menu__top {
  display: flex;
  align-items: var(--align-center);
  justify-content: space-between;
  margin-block-end: var(--space-lg);
}

.mpt-menu-close {
  display: inline-flex;
  font-size: var(--font-size-intro);
}

.mpt-nav--mobile {
  align-items: stretch;
  flex-direction: column;
  gap: var(--space-sm);
}

.mpt-nav--mobile > a:not(.mpt-button) {
  display: flex;
  min-height: var(--touch-min);
  align-items: var(--align-center);
  border-block-end: var(--border-subtle);
  font-size: var(--font-size-body);
}

/* Hero and shared editorial elements */

.mpt-hero {
  position: relative;
  overflow: hidden;
}

.mpt-hero__content {
  position: relative;
  z-index: var(--z-base);
}

.mpt-hero__choices {
  display: grid;
  grid-template-columns: var(--grid-hero-choices);
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

.mpt-button--door-home,
.mpt-button--door-pro,
.mpt-button--light {
  box-shadow: var(--shadow-pop);
}

.mpt-button--door-home {
  background: var(--color-brand);
  color: var(--color-surface);
}

.mpt-button--door-home:hover {
  background: var(--color-brand-dark);
  color: var(--color-surface);
  transform: translateY(var(--button-lift));
}

.mpt-button--door-pro {
  background: var(--color-basil);
  color: var(--color-text-invert);
}

.mpt-button--door-pro:hover {
  background: var(--color-ink);
  color: var(--color-text-invert);
  transform: translateY(var(--button-lift));
}

.mpt-button--light {
  background: var(--color-text-invert);
  color: var(--color-ink);
}

.mpt-button--light:hover {
  background: var(--color-accent);
  color: var(--color-ink);
  transform: translateY(var(--button-lift));
}

.mpt-proof-line,
.mpt-reassurance,
.mpt-product__note,
.mpt-config-note {
  font-size: var(--font-size-sm);
}

.mpt-proof-line {
  padding-inline-start: var(--space-sm);
  border-inline-start: var(--border-strong);
  font-weight: var(--font-weight-semibold);
}

.mpt-hero__media,
.mpt-pierre__media {
  margin: var(--space-none);
}

.mpt-hero__media img,
.mpt-pierre__media img,
.mpt-section--basil figure img {
  width: var(--size-full);
  min-height: var(--photo-min-height);
  aspect-ratio: var(--image-aspect);
  border: var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  object-fit: cover;
}

.mpt-photo-placeholder {
  display: flex;
  min-height: var(--photo-min-height);
  aspect-ratio: var(--image-aspect);
  align-items: var(--align-center);
  justify-content: center;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--card-pad);
  border: var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  box-shadow: var(--shadow-pop);
  color: var(--color-text-muted);
  text-align: center;
}

.mpt-photo-placeholder strong {
  max-width: var(--measure-narrow);
  color: var(--color-ink);
  font-family: var(--font-display);
}

.mpt-statement {
  max-width: var(--measure-narrow);
  margin-block-start: var(--space-lg);
  padding: var(--space-md);
  border-inline-start: var(--border-strong);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--font-size-intro);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-subheading);
}

.mpt-section--ink .mpt-statement,
.mpt-section--basil .mpt-statement {
  background: var(--color-surface);
}

/* Product cards */

.mpt-product {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: var(--card-pad);
  border-radius: var(--radius-md);
}

.mpt-product > :last-child {
  margin-block-end: var(--space-none);
}

.mpt-product--featured {
  margin-block: var(--space-lg);
  border: var(--border-strong);
  background: var(--color-surface);
  box-shadow: var(--shadow-pop);
}

.mpt-product--compact {
  border: var(--border-subtle);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.mpt-product--featured-pro {
  border: var(--border-strong);
  background: var(--color-text-invert);
  box-shadow: var(--shadow-pop);
  color: var(--color-ink);
}

.mpt-product--compact-pro,
.mpt-not-card {
  border: var(--border-subtle);
  background: var(--color-ink);
  color: var(--color-text-invert);
}

.mpt-product .mpt-button,
.mpt-product .mpt-text-link {
  margin-block-start: auto;
}

.mpt-product__facts,
.mpt-pricing__facts {
  display: grid;
  width: var(--size-full);
  grid-template-columns: var(--grid-auto-cards);
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

.mpt-product__facts div,
.mpt-pricing__facts div {
  padding: var(--space-sm);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
}

.mpt-product__facts dt,
.mpt-pricing__facts dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.mpt-product__facts dd,
.mpt-pricing__facts dd {
  margin-inline-start: var(--space-none);
  font-weight: var(--font-weight-semibold);
}

.mpt-badge {
  display: inline-flex;
  padding: var(--badge-pad-block) var(--badge-pad-inline);
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-text-invert);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.mpt-price {
  color: inherit;
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-extrabold);
  font-variant-numeric: tabular-nums;
}

.mpt-tools,
.mpt-pro-featured,
.mpt-pro-tools,
.mpt-pack-note,
.mpt-book-link {
  margin-block-start: var(--space-lg);
}

.mpt-book-link,
.mpt-pack-note {
  padding: var(--space-md);
  border: var(--border-strong);
  border-radius: var(--radius-md);
}

.mpt-book-link {
  background: var(--color-accent);
  color: var(--color-ink);
}

.mpt-pack-note {
  background: var(--color-text-invert);
  color: var(--color-ink);
}

.mpt-text-link--invert,
.mpt-section--basil a:not(.mpt-button),
.mpt-section--ink a:not(.mpt-button) {
  color: var(--color-accent);
}

.mpt-text-link[aria-disabled="true"] {
  color: var(--color-disabled);
  text-decoration: none;
}

/* Method and platform */

.mpt-confidence-grid,
.mpt-platform {
  margin-block-start: var(--space-lg);
}

.mpt-confidence {
  padding: var(--card-pad);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}

.mpt-confidence--verified {
  border: var(--border-strong);
  background: var(--color-basil);
  color: var(--color-text-invert);
}

.mpt-confidence--recommended {
  border: var(--border-strong);
  background: var(--color-ink);
  color: var(--color-accent);
}

.mpt-confidence--unestablished {
  border: var(--border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
}

.mpt-confidence__icon {
  display: inline-flex;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  align-items: var(--align-center);
  justify-content: center;
  margin-block-end: var(--space-sm);
  border: var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: var(--font-weight-extrabold);
}

.mpt-method-quote {
  max-width: var(--measure-body);
  margin: var(--space-lg) auto var(--space-none);
  padding: var(--card-pad);
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-pop);
  color: var(--color-ink);
}

.mpt-method-quote p {
  font-size: var(--font-size-intro);
}

.mpt-method-quote footer {
  margin-block-start: var(--space-sm);
  font-weight: var(--font-weight-semibold);
}

.mpt-platform {
  display: grid;
  grid-template-columns: var(--grid-story);
  gap: var(--grid-gap);
  align-items: var(--align-center);
}

.mpt-platform__form,
.mpt-config-notice {
  padding: var(--card-pad);
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-pop);
}

.mpt-platform__form form {
  max-width: var(--form-max-width);
}

.mpt-platform__form input[type="email"] {
  width: var(--size-full);
  min-height: var(--touch-min);
  padding: var(--control-pad-block) var(--space-sm);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.mpt-platform__form button[type="submit"] {
  min-height: var(--touch-min);
  margin-block-start: var(--space-sm);
  padding: var(--control-pad-block) var(--control-pad-inline);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  box-shadow: var(--shadow-pop);
  color: var(--color-surface);
  font-weight: var(--font-weight-semibold);
}

/* Accordion */

.mpt-faq {
  max-width: var(--accordion-max);
}

.mpt-accordion {
  border-block-start: var(--border-strong);
}

.mpt-accordion__item {
  border-block-end: var(--border-strong);
}

.mpt-accordion__item h3 {
  max-width: none;
  margin: var(--space-none);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
}

.mpt-accordion__trigger {
  display: flex;
  width: var(--size-full);
  min-height: var(--touch-min);
  align-items: var(--align-center);
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm);
  border: none;
  background: var(--color-transparent);
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
  text-align: start;
}

.mpt-accordion__trigger:hover {
  background: var(--color-surface-alt);
  color: var(--color-brand-dark);
}

.mpt-accordion__icon {
  position: relative;
  width: var(--icon-length);
  height: var(--icon-length);
  flex: none;
}

.mpt-accordion__icon::before,
.mpt-accordion__icon::after {
  position: absolute;
  inset-block-start: var(--loop-line-offset);
  inset-inline-start: var(--space-none);
  width: var(--icon-length);
  height: var(--icon-stroke);
  background: currentColor;
  content: "";
  transition: transform var(--transition);
}

.mpt-accordion__icon::after {
  transform: rotate(var(--rotate-open));
}

.mpt-accordion__trigger[aria-expanded="true"] .mpt-accordion__icon::after {
  transform: none;
}

.mpt-accordion__panel {
  padding: var(--space-none) var(--space-sm) var(--space-md);
}

/* Cycle page */

.mpt-key-facts {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-none);
  margin-block: var(--space-md);
  list-style: none;
}

.mpt-key-facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block-end: var(--space-xs);
  border-block-end: var(--border-subtle);
}

.mpt-cycle-loop {
  display: grid;
  grid-template-columns: var(--grid-loop);
  gap: var(--space-md);
  padding: var(--space-none);
  margin-block: var(--space-lg);
  list-style: none;
  counter-reset: mpt-loop;
}

.mpt-cycle-loop__step {
  position: relative;
  min-height: var(--loop-step-min-height);
  padding: var(--card-pad);
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  counter-increment: mpt-loop;
}

.mpt-cycle-loop__step::before {
  display: inline-flex;
  width: var(--touch-min);
  height: var(--touch-min);
  align-items: var(--align-center);
  justify-content: center;
  margin-block-end: var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-text-invert);
  content: counter(mpt-loop);
  font-weight: var(--font-weight-extrabold);
}

.mpt-cycle-loop__step:not(:last-child)::after {
  position: absolute;
  z-index: var(--z-base);
  inset-block-start: var(--loop-line-offset);
  inset-inline-end: calc(var(--space-md) * -1);
  color: var(--color-brand-dark);
  content: "→";
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  transform: translateX(var(--loop-line-offset));
}

.mpt-cycle-loop__step:last-child {
  box-shadow: var(--shadow-pop);
}

.mpt-cycle-loop__step:last-child::after {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  color: var(--color-brand-dark);
  content: var(--loop-return-symbol);
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
}

.mpt-session-card,
.mpt-not-card,
.mpt-checklist,
.mpt-refund-policy {
  padding: var(--card-pad);
  border-radius: var(--radius-md);
}

.mpt-session-card {
  border: var(--border-strong);
  border-inline-start-color: var(--color-brand);
  background: var(--color-bg);
}

.mpt-session-card__number {
  color: var(--color-brand-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.mpt-session-card__result {
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-subtle);
}

.mpt-material-list {
  display: grid;
  grid-template-columns: var(--grid-halves);
  gap: var(--space-sm);
  padding: var(--space-none);
  margin-block: var(--space-lg);
  list-style: none;
  counter-reset: mpt-material;
}

.mpt-material-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  counter-increment: mpt-material;
}

.mpt-material-list li::before {
  color: var(--color-brand-dark);
  content: counter(mpt-material);
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-extrabold);
}

.mpt-material-list strong,
.mpt-material-list span {
  grid-column: 2;
}

.mpt-checklist {
  border: var(--border-strong);
  background: var(--color-accent);
  box-shadow: var(--shadow-pop);
  color: var(--color-ink);
}

.mpt-checklist ul {
  padding-inline-start: var(--space-md);
  margin-block-end: var(--space-none);
}

.mpt-not-card {
  border: var(--border-strong);
}

.mpt-pricing {
  padding: var(--card-pad);
  border: var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-pop);
}

.mpt-refund-policy {
  margin-block: var(--space-md);
  border: var(--border-subtle);
  background: var(--color-bg);
}

.mpt-final-cta {
  text-align: center;
}

.mpt-final-cta__inner {
  display: flex;
  align-items: var(--align-center);
  flex-direction: column;
}

.mpt-final-cta h2,
.mpt-final-cta .mpt-intro {
  margin-inline: auto;
}

.mpt-final-cta__facts {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

/* Footer */

.mpt-footer {
  padding-block: var(--space-lg) var(--space-md);
  border-block-start: var(--border-strong);
  background: var(--color-bg);
  color: var(--color-ink);
}

.mpt-footer__grid {
  display: grid;
  grid-template-columns: var(--grid-footer);
  gap: var(--grid-gap);
}

.mpt-footer h2 {
  margin-block-end: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-label);
  line-height: var(--line-height-label);
  text-transform: var(--text-transform-label);
}

.mpt-footer ul {
  padding: var(--space-none);
  margin: var(--space-none);
  list-style: none;
}

.mpt-footer li + li {
  margin-block-start: var(--space-xs);
}

.mpt-footer a {
  color: inherit;
  font-size: var(--font-size-sm);
}

.mpt-footer__bottom {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-subtle);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Motion enhancement: content remains visible if JavaScript does not run. */

.mpt-js .mpt-reveal {
  opacity: var(--opacity-hidden);
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

.mpt-js .mpt-reveal--visible {
  opacity: var(--opacity-visible);
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .mpt-product--compact,
  .mpt-product--featured-pro,
  .mpt-product--compact-pro,
  .mpt-session-card {
    transition:
      box-shadow var(--transition),
      transform var(--transition);
  }

  .mpt-product--compact:hover,
  .mpt-product--featured-pro:hover,
  .mpt-product--compact-pro:hover,
  .mpt-session-card:hover {
    box-shadow: var(--shadow-pop);
    transform: translateY(var(--card-lift));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpt-js .mpt-reveal,
  .mpt-js .mpt-reveal--visible {
    opacity: var(--opacity-visible);
    transform: none;
  }
}