/**
 * Section Stylesheet: メニュー一覧（コース・時間・料金）
 * Page: Menu / Order: 3
 * BEM Prefix: men-s03

 */

/* ============================================================
  CSS Custom Properties — men-s03 scope
  (common.css の :root 変数は var() で参照のみ。再宣言禁止)
  ============================================================ */
:root {
  /* --- Colors --- */
  --men-s03-color-bg-section:          #FDF2F8;
  --men-s03-color-bg-card:             #FFFFFF;
  --men-s03-color-text-primary:        #831843;
  --men-s03-color-text-secondary:      #64748B;
  --men-s03-color-accent-border:       #F9A8D4;
  --men-s03-color-accent-pink:         #EC4899;
  --men-s03-color-focus:               #8B5CF6;
  --men-s03-color-quote-mark:          rgba(249, 168, 212, 0.7);
  --men-s03-color-shadow-default:      rgba(131, 24, 67, 0.06);
  --men-s03-color-shadow-hover:        rgba(131, 24, 67, 0.12);

  /* --- Typography --- */
  --men-s03-font-family-display:       'Playfair Display', Georgia, serif;
  --men-s03-font-family-body:          'Inter', -apple-system, BlinkMacSystemFont,
                                        'Segoe UI', sans-serif;

  --men-s03-font-size-intro-headline:  clamp(1.5rem, 3vw, 2.25rem);
  --men-s03-font-size-intro-sub:       1rem;
  --men-s03-font-size-intro-body:      1rem;
  --men-s03-font-size-card-name:       1.25rem;
  --men-s03-font-size-card-name-ja:    0.875rem;
  --men-s03-font-size-card-comment:    0.85rem;
  --men-s03-font-size-card-meta:       0.9rem;
  --men-s03-font-size-badge:           0.7rem;
  --men-s03-font-size-cta:             0.875rem;
  --men-s03-font-size-quote-mark:      1.4rem;

  --men-s03-line-height-intro-headline: 1.3;
  --men-s03-line-height-intro-body:    1.75;
  --men-s03-line-height-card-name:     1.3;
  --men-s03-line-height-card-comment:  1.6;
  --men-s03-line-height-card-meta:     1.5;
  --men-s03-line-height-badge:         1.0;

  --men-s03-letter-spacing-badge:      0.15em;

  /* --- Spacing --- */
  --men-s03-space-section-top-mobile:  64px;
  --men-s03-space-section-top-desktop: 64px;
  --men-s03-space-section-btm-mobile:  64px;
  --men-s03-space-section-btm-desktop: 64px;
  --men-s03-space-intro-to-grid:       48px;
  --men-s03-space-card-gutter:         24px;
  --men-s03-space-card-row-gap:        32px;
  --men-s03-space-card-pad-top:        32px;
  --men-s03-space-card-pad-btm:        24px;
  --men-s03-space-card-pad-h:          24px;
  --men-s03-space-page-margin-mobile:  24px;
  --men-s03-space-page-margin-desktop: 64px;

  /* --- Card --- */
  --men-s03-card-border-radius:        8px;
  --men-s03-card-shadow-default:       0 2px 12px var(--men-s03-color-shadow-default);
  --men-s03-card-shadow-hover:         0 4px 20px var(--men-s03-color-shadow-hover);

  /* --- Animation: MI-1 Scroll Stagger --- */
  --men-s03-animate-duration:          600ms;
  --men-s03-animate-easing:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --men-s03-animate-translate-y:       12px;
  --men-s03-stagger-delay:             0ms; /* JS が各カードに上書きする */

  /* --- Animation: MI-2 CTA Arrow --- */
  --men-s03-cta-arrow-duration:        200ms;
  --men-s03-cta-arrow-easing:          ease-out;
  --men-s03-cta-arrow-translate-x:     4px;

  /* --- Animation: MI-3 Card Hover --- */
  --men-s03-card-hover-duration:       250ms;
  --men-s03-card-hover-easing:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --men-s03-card-hover-translate-y:    -2px;

  /* --- Grid --- */
  --men-s03-grid-max-width:            1200px;
}


/* ============================================================
  Visually Hidden Utility
  ============================================================ */
.men-s03__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
  Section Root
  ============================================================ */
.men-s03__section {
  background-color: var(--men-s03-color-bg-section);
  padding-top: var(--men-s03-space-section-top-mobile);
  padding-bottom: var(--men-s03-space-section-btm-mobile);
}

.men-s03__inner {
  max-width: var(--men-s03-grid-max-width);
  margin-inline: auto;
  padding-inline: var(--men-s03-space-page-margin-mobile);
}


/* ============================================================
  Section Intro
  ============================================================ */
.men-s03__intro {
  margin-bottom: var(--men-s03-space-intro-to-grid);
  max-width: 520px;
}

.men-s03__intro-headline {
  font-family: var(--men-s03-font-family-display);
  font-weight: 500;
  font-size: var(--men-s03-font-size-intro-headline);
  line-height: var(--men-s03-line-height-intro-headline);
  color: var(--men-s03-color-text-primary);
  margin-bottom: 0.75rem;
}

.men-s03__intro-subheadline {
  font-family: var(--men-s03-font-family-body);
  font-weight: 300;
  font-size: var(--men-s03-font-size-intro-sub);
  line-height: var(--men-s03-line-height-intro-body);
  color: var(--men-s03-color-text-secondary);
  margin-bottom: 0.75rem;
}

.men-s03__intro-body {
  font-family: var(--men-s03-font-family-body);
  font-weight: 300;
  font-size: var(--men-s03-font-size-intro-body);
  line-height: var(--men-s03-line-height-intro-body);
  color: var(--men-s03-color-text-secondary);
}


/* ============================================================
  Card Grid — Mobile: single column, order A→D→B→C
  ============================================================ */
.men-s03__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--men-s03-space-card-row-gap);
}

/* Mobile order: Card A=0(default), Card D=1, Card B=2, Card C=3 */
.men-s03__card--signature   { order: 0; }
.men-s03__card--trial       { order: 1; }
.men-s03__card--deep-tissue { order: 2; }
.men-s03__card--aroma       { order: 3; }


/* ============================================================
  Card Base
  ============================================================ */
.men-s03__card {
  position: relative;
  background-color: var(--men-s03-color-bg-card);
  border-radius: var(--men-s03-card-border-radius);
  box-shadow: var(--men-s03-card-shadow-default);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


/* ============================================================
  Card Photo Container
  ============================================================ */
.men-s03__card-photo-container {
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

/* Card A: aspect-ratio 7/4 */
.men-s03__card-photo-container--signature {
  aspect-ratio: 16 / 9;
}

/* Card C: aspect-ratio 16/7 */
.men-s03__card-photo-container--aroma {
  aspect-ratio: 16 / 9;
}

.men-s03__card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================================
  Card Body
  ============================================================ */
.men-s03__card-body {
  padding: var(--men-s03-space-card-pad-top)
           var(--men-s03-space-card-pad-h)
           var(--men-s03-space-card-pad-btm);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Mobile: left border accent on text-only cards (B and D) */
.men-s03__card--deep-tissue,
.men-s03__card--trial {
  border-left: 2px solid var(--men-s03-color-accent-border);
}


/* ============================================================
  Card Name Block
  ============================================================ */
.men-s03__card-name-block {
  margin-bottom: 1rem;
}

.men-s03__card-name {
  font-family: var(--men-s03-font-family-display);
  font-weight: 500;
  font-size: var(--men-s03-font-size-card-name);
  line-height: var(--men-s03-line-height-card-name);
  color: var(--men-s03-color-text-primary);
  margin-bottom: 0.25rem;
}

/* Japanese subtitle — decorative label context, below 16px per A4 mitigation */
.men-s03__card-name-ja {
  font-family: var(--men-s03-font-family-body);
  font-weight: 300;
  font-size: var(--men-s03-font-size-card-name-ja);
  line-height: var(--men-s03-line-height-card-meta);
  color: var(--men-s03-color-text-secondary);
}

/* Screen-reader text at 1rem for sub-16px visible label (A4 mitigation) */
.men-s03__card-name-ja .men-s03__visually-hidden {
  font-size: 1rem;
}


/* ============================================================
  Card Comment Block
  ============================================================ */
.men-s03__card-comment-block {
  margin-bottom: 1.25rem;
  /* flex: 1; */
}

/* Decorative opening quotation mark */
.men-s03__card-quote-mark {
  display: block;
  font-family: var(--men-s03-font-family-display);
  font-weight: 400;
  font-size: var(--men-s03-font-size-quote-mark);
  line-height: 1;
  color: var(--men-s03-color-quote-mark);
  margin-bottom: 0.125rem;
  /* aria-hidden="true" applied in PHP */
}

/* Therapist comment — italic Playfair Display prose, decorative context */
.men-s03__card-comment {
  font-family: var(--men-s03-font-family-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--men-s03-font-size-card-comment);
  line-height: var(--men-s03-line-height-card-comment);
  color: var(--men-s03-color-text-primary);
}


/* ============================================================
  Card Footer (meta + CTA)
  ============================================================ */
.men-s03__card-footer {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

.men-s03__card-meta {
  display: flex;
  gap: var(--men-s03-space-card-gutter);
  align-items: baseline;
}

/* Duration and price — decorative numeric display, A4 mitigation applied */
.men-s03__card-duration,
.men-s03__card-price {
  font-family: var(--men-s03-font-family-body);
  font-weight: 400;
  font-size: var(--men-s03-font-size-card-meta);
  line-height: var(--men-s03-line-height-card-meta);
  color: var(--men-s03-color-text-secondary);
}

/* Visually-hidden labels inside meta (screen-reader) */
.men-s03__card-duration .men-s03__visually-hidden,
.men-s03__card-price    .men-s03__visually-hidden {
  font-size: 1rem;
}


/* ============================================================
  CTA Text Link (MI-2)
  ============================================================ */
.men-s03__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--men-s03-font-family-body);
  font-weight: 400;
  font-size: var(--men-s03-font-size-cta);
  line-height: 1.5;
  color: var(--men-s03-color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--men-s03-color-text-primary);
  /* Touch target: A8 mitigation */
  min-height: 44px;
  padding-inline: 0.25rem;
  align-self: flex-start;
  /* MI-2 underline color transition */
  transition:
    border-color var(--men-s03-cta-arrow-duration) var(--men-s03-cta-arrow-easing),
    color        var(--men-s03-cta-arrow-duration) var(--men-s03-cta-arrow-easing);
}

.men-s03__card-cta-arrow {
  display: inline-block;
  color: var(--men-s03-color-accent-pink);
  /* MI-2 arrow translateX transition */
  transition: transform var(--men-s03-cta-arrow-duration) var(--men-s03-cta-arrow-easing);
}

/* MI-2: CTA hover — arrow slides right, underline turns pink */
.men-s03__card-cta:hover .men-s03__card-cta-arrow,
.men-s03__card-cta:focus-visible .men-s03__card-cta-arrow {
  transform: translateX(var(--men-s03-cta-arrow-translate-x));
}

.men-s03__card-cta:hover,
.men-s03__card-cta:focus-visible {
  border-color: var(--men-s03-color-accent-pink);
}

/* A6: Focus indicator */
.men-s03__card-cta:focus-visible {
  outline: 2px solid var(--men-s03-color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================
  FIRST VISIT Badge (Card D)
  ============================================================ */
.men-s03__card-badge-wrapper {
  position: relative;
  height: 0; /* コンテンツフローに影響させない */
}

.men-s03__first-visit-badge {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--men-s03-color-bg-section);
  color: var(--men-s03-color-accent-pink);
  font-family: var(--men-s03-font-family-display);
  font-weight: 400;
  font-size: var(--men-s03-font-size-badge);
  line-height: var(--men-s03-line-height-badge);
  letter-spacing: var(--men-s03-letter-spacing-badge);
  padding: 0.3em 0.6em;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  /* aria-hidden="true" applied in PHP; visually-hidden SR text provided */
}

/* Card D: position relative to contain the absolute badge */
.men-s03__card--trial {
  padding-top: 2rem; /* バッジ分の余白 */
}


/* ============================================================
  MI-1: Scroll Stagger Animation — Initial & Visible States
  ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 初期状態: opacity:0, translateY 開始値 */
  .men-s03-js-animate-hidden {
    opacity: 0;
    transform: translateY(var(--men-s03-animate-translate-y));
  }

  /* 表示状態: JSが hidden を除去し visible を付与したときに発火 */
  .men-s03-js-animate-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity   var(--men-s03-animate-duration) var(--men-s03-animate-easing)
                var(--men-s03-stagger-delay),
      transform var(--men-s03-animate-duration) var(--men-s03-animate-easing)
                var(--men-s03-stagger-delay);
  }

}


/* ============================================================
  MI-3: Card Hover Lift — Desktop only (hover: hover / pointer: fine)
  ============================================================ */
/* @media (hover: hover) and (pointer: fine) {

  .men-s03__card {
    transition:
      box-shadow var(--men-s03-card-hover-duration) var(--men-s03-card-hover-easing),
      transform  var(--men-s03-card-hover-duration) var(--men-s03-card-hover-easing);
  }

  .men-s03__card:hover {
    box-shadow: var(--men-s03-card-shadow-hover);
    transform: translateY(var(--men-s03-card-hover-translate-y));
  }

} */


/* ============================================================
  Desktop Layout (width >= 1024px)
  Asymmetric Bento Grid: Row1 = 7:5, Row2 = 5:7
  ============================================================ */
@media (width >= 1024px) {

  .men-s03__section {
    padding-top: var(--men-s03-space-section-top-desktop);
    padding-bottom: var(--men-s03-space-section-btm-desktop);
  }

  .men-s03__inner {
    padding-inline: var(--men-s03-space-page-margin-desktop);
  }

  /* Desktop grid: 12 columns */
  .men-s03__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* grid-template-rows: 360px 320px; */
    column-gap: var(--men-s03-space-card-gutter);
    row-gap: var(--men-s03-space-card-row-gap);
  }

  /* Row 1 — Left heavy (7:5) */
  /* Card A: col 1-7 */
  .men-s03__card--signature {
    grid-column: 1 / 8;
    grid-row: 1;
    order: unset;
  }

  /* Card D (Trial): col 8-12, Row 1 */
  .men-s03__card--trial {
    grid-column: 8 / 13;
    grid-row: 1;
    order: unset;
  }

  /* Row 2 — Right heavy (5:7) */
  /* Card B (Deep Tissue): col 1-5 */
  .men-s03__card--deep-tissue {
    grid-column: 1 / 6;
    grid-row: 2;
    order: unset;
  }

  /* Card C (Aroma): col 6-12 */
  .men-s03__card--aroma {
    grid-column: 6 / 13;
    grid-row: 2;
    order: unset;
  }

  /* Desktop: left border only on Card B (text-only, Row 2 left) */
  /* Card D retains border on both viewports; Card B desktop only */
  .men-s03__card--deep-tissue {
    border-left: 2px solid var(--men-s03-color-accent-border);
  }

  /* Desktop: remove left border from Card D (photo cards don't use it) */
  .men-s03__card--trial {
    border-left: none;
    padding-top: 0;
  }

  /* Badge repositioned within Card D */
  .men-s03__card-badge-wrapper {
    height: 0;
  }

  .men-s03__first-visit-badge {
    top: 0;
    left: 0;
  }

}


/* ============================================================
  Tablet intermediate (width >= 600px and width < 1024px)
  Two-column for slight visual improvement on tablets
  ============================================================ */
@media (width >= 600px) and (width < 1024px) {

  .men-s03__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--men-s03-space-card-gutter);
  }

  /* Preserve mobile order but in 2 columns */
  .men-s03__card--signature   { grid-column: 1 / -1; order: 0; }
  .men-s03__card--trial       { grid-column: 1 / 2;  order: 1; }
  .men-s03__card--deep-tissue { grid-column: 2 / 3;  order: 2; }
  .men-s03__card--aroma       { grid-column: 1 / -1; order: 3; }

}


/* ============================================================
  Reduced Motion — override all transitions/animations
  Scoped to this section only to avoid conflicting with
  common.css or reset.css global rules.
  ============================================================ */
@media (prefers-reduced-motion: reduce) {

  .men-s03__section *,
  .men-s03__section *::before,
  .men-s03__section *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* MI-1: すべてのカードを即座に表示状態にする */
  .men-s03-js-animate-hidden {
    opacity: 1;
    transform: translateY(0);
  }

}