/**
 * Section CSS: 予約誘導CTA
 * Page   : Menu
 * Order  : 6
 * Block  : men-s06
 *
 * Enqueue instruction (functions.php):
 *   wp_enqueue_style(
 *       'section-cta',
 *       get_template_directory_uri() . '/assets/css/section-cta.css',
 *       array(),
 *       '1.0.0'
 *   );
 *
 * Dependencies:
 *   - reset.css (global, loaded before this file)
 *   - common.css (global, loaded before this file)
 *     Common variables referenced via var() without re-declaration.
 *
 * Reset / common rules are NOT re-declared here.
 * All values sourced from section_0_design_spec unless noted.
 */

/* ================================================================
   SECTION-SCOPED CSS CUSTOM PROPERTIES
   Naming: --men-s06-{property}
   Source: section_0_design_spec
   ================================================================ */
:root {
    /* --- Colors (section_0_design_spec.colors) --- */

    /* Background base */
    --men-s06-color-bg:                     #FDF2F8;

    /* Gradient overlay stops */
    --men-s06-color-overlay-stop-0:         rgba(253, 242, 248, 0.05);
    --men-s06-color-overlay-stop-60:        rgba(253, 242, 248, 0.72);
    --men-s06-color-overlay-stop-100:       rgba(253, 242, 248, 0.95);

    /* Text */
    --men-s06-color-text-primary:           #831843;
    --men-s06-color-text-secondary:         #64748B;

    /* CTA button states */
    --men-s06-color-cta-bg-default:         transparent;
    --men-s06-color-cta-bg-hover:           #831843;
    --men-s06-color-cta-label-default:      #831843;
    --men-s06-color-cta-label-hover:        #FDF2F8;
    --men-s06-color-cta-border:             #831843;

    /* Mobile fixed bar */
    --men-s06-color-bar-bg:                 #FDF2F8;
    --men-s06-color-bar-border-top:         #F9A8D4;
    --men-s06-color-bar-shadow:             rgba(131, 24, 67, 0.06);

    /* Focus indicator */
    --men-s06-color-focus:                  #8B5CF6;

    /* --- Typography (section_0_design_spec.typography) --- */

    /* Headline */
    --men-s06-font-family-headline:         'Playfair Display', Georgia, serif;
    --men-s06-font-weight-headline:         600;
    --men-s06-font-size-headline:           clamp(2.5rem, 5vw, 4rem);
    --men-s06-line-height-headline:         1.2;
    --men-s06-letter-spacing-headline:      0.04em;

    /* Sub-copy */
    --men-s06-font-family-subcopy:          'Inter', -apple-system, BlinkMacSystemFont,
                                            'Segoe UI', sans-serif;
    --men-s06-font-weight-subcopy:          300;
    --men-s06-font-size-subcopy:            1rem;
    --men-s06-line-height-subcopy:          1.75;
    --men-s06-letter-spacing-subcopy:       normal;

    /* Body copy */
    --men-s06-font-family-body:             'Inter', -apple-system, BlinkMacSystemFont,
                                            'Segoe UI', sans-serif;
    --men-s06-font-weight-body:             300;
    --men-s06-font-size-body:               1rem;
    --men-s06-line-height-body:             1.75;

    /* CTA button label */
    --men-s06-font-family-cta:              'Inter', -apple-system, BlinkMacSystemFont,
                                            'Segoe UI', sans-serif;
    --men-s06-font-weight-cta:              400;
    --men-s06-font-size-cta:                1rem;
    --men-s06-line-height-cta:              1.0;
    --men-s06-letter-spacing-cta:           0.08em;

    /* --- Spacing (section_0_design_spec.spacing) --- */
    --men-s06-padding-top-desktop:          96px;
    --men-s06-padding-bottom-desktop:       80px;
    --men-s06-padding-top-mobile:           64px;
    --men-s06-padding-bottom-mobile:        128px;
    --men-s06-subcopy-margin-top:           16px;
    --men-s06-cta-margin-top:               32px;
    --men-s06-bar-padding:                  16px 24px;
    --men-s06-gutter-desktop:               64px;
    --men-s06-gutter-mobile:                24px;

    /* --- Grid (section_0_design_spec.grid) --- */
    --men-s06-content-max-width:            1200px;
    --men-s06-text-max-width:               680px;
    --men-s06-section-min-height-desktop:   620px;
    --men-s06-section-min-height-mobile:    480px;

    /* --- CTA button dimensions --- */
    --men-s06-cta-button-width:             clamp(240px, 40%, 320px);
    --men-s06-cta-button-height:            56px;
    --men-s06-cta-button-border-width:      2px;

    /* --- Animation (section_1_animation.micro_interactions) --- */

    /* MI-1: Headline / sub-copy fade-in */
    --men-s06-animate-duration:             600ms;
    --men-s06-animate-easing:              cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --men-s06-animate-translate-y:          16px;
    --men-s06-animate-subcopy-delay:        150ms;

    /* MI-2: CTA hover reversal */
    --men-s06-cta-hover-duration:           300ms;
    --men-s06-cta-hover-easing:             ease;

    /* MI-3: Mobile bar slide-up */
    --men-s06-bar-animate-duration:         400ms;
    --men-s06-bar-animate-easing:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ================================================================
  GOOGLE FONTS IMPORT
  Performance: font-display swap applied via Google Fonts API param
  Preconnect is handled in <head> via wp_head() hook in functions.php
  ================================================================ */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Playfair+Display:wght@600&display=swap'); */


/* ================================================================
  SECTION BASE — .men-s06
  Full-bleed section container with photo + gradient overlay
  ================================================================ */
.men-s06 {
    /* Positioning context for absolute children (photo, overlay) */
    position: relative;

    /* Full viewport width — no max-width constraint on background layer */
    width: 100%;
    overflow: hidden;

    /* Mobile-first min-height */
    min-height: var(--men-s06-section-min-height-mobile);

    /* Background fallback color before photo loads */
    background-color: var(--men-s06-color-bg);

    /* Mobile padding */
    padding-top: var(--men-s06-padding-top-mobile);
    padding-bottom: var(--men-s06-padding-bottom-mobile);
}

/* Desktop overrides */
@media (width >= 768px) {
    .men-s06 {
        min-height: var(--men-s06-section-min-height-desktop);
        padding-top: var(--men-s06-padding-top-desktop);
        padding-bottom: var(--men-s06-padding-bottom-desktop);
    }
}


/* ================================================================
  GRADIENT OVERLAY — ::after pseudo-element on .men-s06
  Vertical gradient from photo-top (near transparent) to
  section-bottom (near opaque) using exact rgba stops from spec.
  Source: section_0_design_spec.colors (overlay stops)
  ================================================================ */
.men-s06::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--men-s06-color-overlay-stop-0)   0%,
        var(--men-s06-color-overlay-stop-60)  60%,
        var(--men-s06-color-overlay-stop-100) 100%
    );

    /* Overlay sits above photo but below text content */
    z-index: 1;

    /* Prevent overlay from capturing pointer events */
    pointer-events: none;
}


/* ================================================================
  BACKGROUND PHOTO WRAPPER + IMAGE
  Photo fills entire section; object-fit cover maintains aspect ratio
  ================================================================ */
.men-s06__bg-photo-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.men-s06__bg-photo {
    width: 100%;
    height: 100%;

    /* Cover fill — subject center-right per design spec grid note */
    object-fit: cover;
    object-position: center 10%;
}


/* ================================================================
  CONTENT WRAPPER
  Positioned above overlay (z-index: 2)
  Horizontal gutters applied here; max-width centered
  ================================================================ */
.men-s06__content-wrapper {
    position: relative;
    z-index: 2;

    /* Horizontal gutters — mobile */
    padding-left: var(--men-s06-gutter-mobile);
    padding-right: var(--men-s06-gutter-mobile);
}

@media (width >= 768px) {
    .men-s06__content-wrapper {
        /* Horizontal gutters — desktop */
        padding-left: var(--men-s06-gutter-desktop);
        padding-right: var(--men-s06-gutter-desktop);
    }
}


/* ================================================================
  CONTENT GRID
  12-column grid; text+CTA occupies col 3-10 (center 8 columns)
  Source: section_0_design_spec.grid
  ================================================================ */
.men-s06__content-grid {
    /* Center content horizontally */
    max-width: var(--men-s06-content-max-width);
    margin-left: auto;
    margin-right: auto;

    /* All children centered */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


/* ================================================================
  HEADLINE BLOCK
  Contains h2 headline + sub-copy paragraph
  MI-1 animation target — initial/visible states defined below
  ================================================================ */
.men-s06__headline-block {
    max-width: var(--men-s06-text-max-width);
    width: 100%;
}

/* Headline (キャッチコピー)
  Source: section_0_design_spec.typography[Headline]
*/
.men-s06__headline {
    font-family: var(--men-s06-font-family-headline);
    font-weight: var(--men-s06-font-weight-headline);
    font-size: var(--men-s06-font-size-headline);
    line-height: var(--men-s06-line-height-headline);
    letter-spacing: var(--men-s06-letter-spacing-headline);
    color: var(--men-s06-color-text-primary);
    text-align: center;
}

/* Sub-copy
  Source: section_0_design_spec.typography[Sub-copy]
*/
.men-s06__subcopy {
    font-family: var(--men-s06-font-family-subcopy);
    font-weight: var(--men-s06-font-weight-subcopy);
    font-size: var(--men-s06-font-size-subcopy);     /* 1rem = 16px — meets A4 */
    line-height: var(--men-s06-line-height-subcopy); /* 1.75 — meets A5 */
    letter-spacing: var(--men-s06-letter-spacing-subcopy);
    color: var(--men-s06-color-text-secondary);
    text-align: center;
    margin-top: var(--men-s06-subcopy-margin-top);
}


/* ================================================================
  BODY COPY BLOCK
  Source: section_0_design_spec.typography[Body copy]
  ================================================================ */
.men-s06__body-block {
    max-width: var(--men-s06-text-max-width);
    width: 100%;
    margin-top: var(--men-s06-subcopy-margin-top);
}

.men-s06__body-copy {
    font-family: var(--men-s06-font-family-body);
    font-weight: var(--men-s06-font-weight-body);
    font-size: var(--men-s06-font-size-body);       /* 1rem — meets A4 */
    line-height: var(--men-s06-line-height-body);   /* 1.75 — meets A5 */
    color: var(--men-s06-color-text-secondary);
    text-align: center;
}


/* ================================================================
  CTA BUTTON WRAPPER + BUTTON (inline / desktop)
  Source: section_0_design_spec + section_4_output.files[id=2].rules
  MI-2: hover/focus color reversal — pure CSS transition
  ================================================================ */
.men-s06__cta-wrapper {
    margin-top: var(--men-s06-cta-margin-top);
    width: 100%;
}

.men-s06__cta-button {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    /* Dimensions — meets A8 touch target (height 56px > 44px minimum) */
    width: var(--men-s06-cta-button-width);
    height: var(--men-s06-cta-button-height);  /* 56px */
    min-height: 44px;                           /* A8 safeguard */

    /* Default state: outline style */
    background-color: var(--men-s06-color-cta-bg-default);
    border: var(--men-s06-cta-button-border-width) solid var(--men-s06-color-cta-border);
    border-radius: 0;

    /* Typography */
    font-family: var(--men-s06-font-family-cta);
    font-weight: var(--men-s06-font-weight-cta);
    font-size: var(--men-s06-font-size-cta);    /* 1rem — meets A4 */
    line-height: var(--men-s06-line-height-cta);
    letter-spacing: var(--men-s06-letter-spacing-cta);
    color: var(--men-s06-color-cta-label-default);

    /* Remove default anchor decoration */
    text-decoration: none;

    /* MI-2: transition for hover/focus color reversal
      trigger: hover (desktop) / touch-start (mobile)
      action: background transparent→#831843, color #831843→#FDF2F8
      duration: 300ms / easing: ease
      brand_intent: アウトラインから塗りへの静かな反転は「決断の瞬間」の質感を表現し、
      「ここに来るだけで自分を取り戻せる場所」への予約という選択が
      「派手ではなく確かな一歩」であることを動きで伝える。 */
    transition:
        background-color var(--men-s06-cta-hover-duration) var(--men-s06-cta-hover-easing),
        color            var(--men-s06-cta-hover-duration) var(--men-s06-cta-hover-easing),
        border-color     var(--men-s06-cta-hover-duration) var(--men-s06-cta-hover-easing);

    cursor: pointer;
}

/* Hover state — MI-2 */
.men-s06__cta-button:hover {
    background-color: var(--men-s06-color-cta-bg-hover);
    color: var(--men-s06-color-cta-label-hover);
    border-color: var(--men-s06-color-cta-bg-hover);
}

/* Active / touch state */
.men-s06__cta-button:active,
.men-s06__cta-button.men-s06-js-touching {
    background-color: var(--men-s06-color-cta-bg-hover);
    color: var(--men-s06-color-cta-label-hover);
    border-color: var(--men-s06-color-cta-bg-hover);
}

/* Focus-visible — A6: 2px solid #8B5CF6 / outline-offset 3px */
.men-s06__cta-button:focus-visible {
    outline: 2px solid var(--men-s06-color-focus);
    outline-offset: 3px;
}

/* CTA arrow SVG inherits currentColor */
.men-s06__cta-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}


/* ================================================================
  MOBILE FIXED CTA BAR
  Source: section_0_design_spec.spacing + section_4_output rules
  Visible only on mobile (width <= 768px)
  MI-3: slide-up animation — initial state set here in CSS
  ================================================================ */
.men-s06-mobile-bar {
    /* Fixed to bottom of viewport */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    /* Visual style */
    background-color: var(--men-s06-color-bar-bg);
    border-top: 1px solid var(--men-s06-color-bar-border-top);
    box-shadow: 0 -2px 12px var(--men-s06-color-bar-shadow);

    /* Stacking — above section content */
    z-index: 100;

    /* Padding */
    padding: var(--men-s06-bar-padding);

    /* Hidden on desktop — display:none removes from layout entirely */
    display: none;
}

/* Show mobile bar only on mobile viewports */
@media (width <= 768px) {
    .men-s06-mobile-bar {
        display: block;
    }
}

/* MI-3 initial state: bar starts off-screen (slide-up from bottom)
   CSS sets this before JS runs — ensures no flash before animation */
.men-s06-js-bar-hidden {
    transform: translateY(100%);
    opacity: 0;
}

/* MI-3 visible state: bar slides into view
  trigger: section enters viewport at 10% threshold
  action: translateY(100%)→translateY(0) + opacity 0→1
  duration: 400ms / easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)
  brand_intent: 固定バーが静かに浮かび上がることで、
  予約タップを「衝動」ではなく「自然な次の一歩」として体感させる。 */
.men-s06-js-bar-visible {
    transform: translateY(0);
    opacity: 1;
    transition:
        transform var(--men-s06-bar-animate-duration) var(--men-s06-bar-animate-easing),
        opacity   var(--men-s06-bar-animate-duration) var(--men-s06-bar-animate-easing);
}

/* Mobile bar inner container — centers button */
.men-s06-mobile-bar__inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Mobile bar CTA button
  Same outline style as desktop, width 100% up to 400px
  Height 56px — meets A8 (44px minimum)
*/
.men-s06-mobile-bar__button {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    /* Width: full up to 400px max — A8 passes by default */
    width: 100%;
    max-width: 400px;
    height: var(--men-s06-cta-button-height); /* 56px */
    min-height: 44px;                          /* A8 safeguard */

    /* Default state: outline */
    background-color: var(--men-s06-color-cta-bg-default);
    border: var(--men-s06-cta-button-border-width) solid var(--men-s06-color-cta-border);
    border-radius: 0;

    /* Typography */
    font-family: var(--men-s06-font-family-cta);
    font-weight: var(--men-s06-font-weight-cta);
    font-size: var(--men-s06-font-size-cta);
    line-height: var(--men-s06-line-height-cta);
    letter-spacing: var(--men-s06-letter-spacing-cta);
    color: var(--men-s06-color-cta-label-default);

    text-decoration: none;
    cursor: pointer;

    /* MI-2 hover/active transition for mobile bar button */
    transition:
        background-color var(--men-s06-cta-hover-duration) var(--men-s06-cta-hover-easing),
        color            var(--men-s06-cta-hover-duration) var(--men-s06-cta-hover-easing),
        border-color     var(--men-s06-cta-hover-duration) var(--men-s06-cta-hover-easing);
}

.men-s06-mobile-bar__button:hover {
    background-color: var(--men-s06-color-cta-bg-hover);
    color: var(--men-s06-color-cta-label-hover);
    border-color: var(--men-s06-color-cta-bg-hover);
}

.men-s06-mobile-bar__button:active,
.men-s06-mobile-bar__button.men-s06-js-touching {
    background-color: var(--men-s06-color-cta-bg-hover);
    color: var(--men-s06-color-cta-label-hover);
    border-color: var(--men-s06-color-cta-bg-hover);
}

/* Focus-visible — A6 */
.men-s06-mobile-bar__button:focus-visible {
    outline: 2px solid var(--men-s06-color-focus);
    outline-offset: 3px;
}

/* Mobile bar arrow SVG inherits currentColor */
.men-s06-mobile-bar__arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}


/* ================================================================
  ANIMATION STATES — MI-1
  Headline block + sub-copy: fade-in from translateY(16px)
  Initial states set in CSS before JS runs
  ================================================================ */

/* MI-1 initial state — headline block
  trigger: section enters viewport at 80% threshold
  action: opacity 0→1 / translateY(16px)→translateY(0)
  duration: 600ms / easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)
  brand_intent: 「ゆっくりと視界に現れる」穏やかなフェードインで
  感情的確信がなだらかに最高点に達する */
.men-s06-js-animate-hidden {
    opacity: 0;
    transform: translateY(var(--men-s06-animate-translate-y));
}

/* MI-1 visible state — headline block */
.men-s06-js-animate-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity   var(--men-s06-animate-duration) var(--men-s06-animate-easing),
        transform var(--men-s06-animate-duration) var(--men-s06-animate-easing);
}

/* MI-1 initial state — sub-copy
   Follows headline with 150ms setTimeout offset applied in JS */
.men-s06-js-subcopy-hidden {
    opacity: 0;
    transform: translateY(var(--men-s06-animate-translate-y));
}

/* MI-1 visible state — sub-copy */
.men-s06-js-subcopy-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity   var(--men-s06-animate-duration) var(--men-s06-animate-easing),
        transform var(--men-s06-animate-duration) var(--men-s06-animate-easing);
}

/* Body block initial/visible states */
.men-s06-js-body-hidden {
    opacity: 0;
    transform: translateY(var(--men-s06-animate-translate-y));
}

.men-s06-js-body-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity   var(--men-s06-animate-duration) var(--men-s06-animate-easing),
        transform var(--men-s06-animate-duration) var(--men-s06-animate-easing);
}


/* ================================================================
  FOCUS-VISIBLE — All interactive elements in section scope
  A6: 2px solid #8B5CF6 / outline-offset 3px
  ================================================================ */
.men-s06 a:focus-visible,
.men-s06 button:focus-visible,
.men-s06-mobile-bar a:focus-visible,
.men-s06-mobile-bar button:focus-visible {
    outline: 2px solid var(--men-s06-color-focus);
    outline-offset: 3px;
}


/* ================================================================
  REDUCED MOTION
  Scoped to this section's animation classes only.
  Does not interfere with global rules in common.css or reset.css.
  ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .men-s06-js-animate-hidden,
    .men-s06-js-animate-visible,
    .men-s06-js-subcopy-hidden,
    .men-s06-js-subcopy-visible,
    .men-s06-js-body-hidden,
    .men-s06-js-body-visible,
    .men-s06-js-bar-hidden,
    .men-s06-js-bar-visible {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        /* Immediately show elements for reduced-motion users */
        opacity: 1;
        transform: none;
    }
}