/* ═══════════════════════════════════════════════════════════════════════════
   ONE WHISKY WANDERER — MY STORY PAGE
   File: assets/css/page-story.css
   Scope: .oww-story-page

   Sections
   ────────
   0.  Page base
   1.  Hero
   2.  Chapter layout
   3.  Credentials section
   4.  Story-specific buttons (removed — use .oww-btn from global.css)
   5.  Reduced motion overrides
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 0. PAGE BASE ──────────────────────────────────────────────────────── */

.oww-story-page {
    background: var(--oww-bg-dark);
}

.oww-story-container {
    max-width: 1200px;
    margin:    0 auto;
    padding:   0 clamp(1.25rem, 5vw, 4rem);
    position:  relative;
    z-index:   1;
}


/* ─── 1. HERO ───────────────────────────────────────────────────────────── */

.oww-story-page .oww-story-hero {
    position:    relative;
    min-height:  100vh;
    display:     flex;
    align-items: center;
    background:  var(--oww-bg-deep);
    overflow:    hidden;
}

/* Layer stack */
.oww-story-hero__layer {
    position:       absolute;
    inset:          0;
    pointer-events: none;
}

.oww-story-hero__layer--back {
    background-image:    url('/wp-content/uploads/2026/01/1-Wiskey-wanderer-2-wishky-drams-on-table-hero-image.webp');
    background-size:     cover;
    background-position: center;
    opacity:             0.2;
}

.oww-story-hero__layer--mid {
    background: radial-gradient(
        ellipse 80% 100% at 20% 50%,
        rgba(205, 165, 100, 0.12) 0%,
        transparent 60%
    );
}

.oww-story-hero__layer--front {
    background: linear-gradient(
        90deg,
        rgba(10, 8, 6, 0.95) 0%,
        rgba(10, 8, 6, 0.70) 40%,
        rgba(10, 8, 6, 0.85) 100%
    );
}

.oww-story-hero__vignette {
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 120% 100% at 50% 50%, transparent 0%, var(--oww-bg-deep) 80%);
    pointer-events: none;
}

/* Layout */
.oww-story-hero .oww-story-container {
    padding-top:    100px;
    padding-bottom: 160px;
}

.oww-story-hero__layout {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   3rem;
    align-items:           center;
}

@media (min-width: 1000px) {
    .oww-story-hero__layout {
        grid-template-columns: 380px 1fr;
        gap:                   5rem;
    }
}

/* Portrait column */
.oww-story-hero__portrait-col {
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

@media (max-width: 999px) {
    .oww-story-hero__portrait-col  { order: -1; }
    .oww-story-hero__content-col   { text-align: center; }
}

.oww-story-hero__portrait-frame {
    position:    relative;
    width:       280px;
    aspect-ratio: 3/4;
}

@media (min-width: 1000px) {
    .oww-story-hero__portrait-frame {
        width:     100%;
        max-width: 360px;
    }
}

.oww-story-hero__portrait-glow {
    position:  absolute;
    inset:     -40px;
    background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(205, 165, 100, 0.25) 0%, transparent 70%);
    filter:    blur(40px);
    z-index:   0;
}

.oww-story-hero__portrait {
    position:    relative;
    width:       100%;
    height:      100%;
    object-fit:  cover;
    z-index:     2;
    border-radius: var(--oww-radius-sm);
}

.oww-story-hero__portrait-border {
    position:      absolute;
    inset:         -15px;
    border:        1px solid var(--oww-amber);
    z-index:       1;
    opacity:       0.5;
    border-radius: var(--oww-radius-sm);
}

.oww-story-hero__portrait-caption {
    display:     flex;
    align-items: center;
    gap:         1rem;
    margin-top:  2rem;
}

.oww-story-hero__caption-line {
    width:      50px;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(205, 165, 100, 0.4), transparent);
}

.oww-story-hero__caption-text {
    font-family:    var(--oww-ff-display);
    font-size:      0.75rem;
    letter-spacing: 0.3em;
    color:          var(--oww-amber);
    text-transform: uppercase;
}

/* Content column */
.oww-story-hero__eyebrow {
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
    font-size:      0.7rem;
    font-weight:    500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    margin:         0 0 1.5rem;
}

@media (max-width: 999px) { .oww-story-hero__eyebrow { justify-content: center; } }

.oww-story-hero__eyebrow-icon { font-size: 0.5rem; opacity: 0.6; }

.oww-story-hero__title { margin: 0 0 1.5rem; }

.oww-story-hero__title-line {
    display:        block;
    font-family:    var(--oww-ff-display);
    font-weight:    300;
    line-height:    1;
    color:          var(--oww-cream);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.oww-story-hero__title-line:first-child {
    font-size:  clamp(1.5rem, 3vw, 2rem);
    color:      var(--oww-cream-muted);
    margin-bottom: 0.25rem;
}

.oww-story-hero__title-line--accent {
    font-size:    clamp(3.5rem, 10vw, 8rem);
    font-weight:  200;
    letter-spacing: -0.02em;
    background:   linear-gradient(135deg, var(--oww-cream) 0%, var(--oww-amber) 50%, var(--oww-cream) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero divider */
.oww-story-hero__divider {
    display:     flex;
    align-items: center;
    gap:         1rem;
    margin:      0 0 1.5rem;
}

@media (max-width: 999px) { .oww-story-hero__divider { justify-content: center; } }

.oww-story-hero__divider-line {
    width:      60px;
    height:     1px;
    background: linear-gradient(90deg, var(--oww-amber), transparent);
}

.oww-story-hero__divider-line:last-child {
    background: linear-gradient(-90deg, var(--oww-amber), transparent);
}

.oww-story-hero__divider-diamond { color: var(--oww-amber); font-size: 0.75rem; opacity: 0.7; }

.oww-story-hero__tagline {
    font-family:  var(--oww-ff-display);
    font-size:    clamp(1rem, 2vw, 1.25rem);
    font-style:   italic;
    color:        var(--oww-cream-muted);
    margin:       0 0 2rem;
    line-height:  1.6;
}

/* Hero credential pills */
.oww-story-hero__credentials {
    display:   flex;
    flex-wrap: wrap;
    gap:       1rem;
}

@media (max-width: 999px) { .oww-story-hero__credentials { justify-content: center; } }

.oww-story-hero__cred {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    padding:     0.5rem 1rem;
    background:  rgba(205, 165, 100, 0.08);
    border:      1px solid var(--oww-bronze-20);
    border-radius: var(--oww-radius-sm);
}

.oww-story-hero__cred-abbr {
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    color:          var(--oww-amber);
    padding:        2px 6px;
    background:     rgba(205, 165, 100, 0.15);
    border-radius:  2px;
}

.oww-story-hero__cred-name { font-size: 0.75rem; color: var(--oww-cream-muted); }

/* Quote strip */
.oww-story-hero__quote-wrap {
    position:   absolute;
    bottom:     100px;
    left:       50%;
    transform:  translateX(-50%);
    width:      90%;
    max-width:  700px;
    text-align: center;
    z-index:    15;
}

.oww-story-hero__quote {
    margin:          0;
    padding:         1.5rem 2rem;
    background:      rgba(10, 8, 6, 0.8);
    border:          1px solid var(--oww-bronze-20);
    backdrop-filter: blur(10px);
    border-radius:   var(--oww-radius-sm);
}

.oww-story-hero__quote p {
    font-family:  var(--oww-ff-display);
    font-size:    clamp(1rem, 2vw, 1.375rem);
    font-style:   italic;
    color:        var(--oww-cream);
    line-height:  1.6;
    margin:       0 0 0.5rem;
}

.oww-story-hero__quote cite {
    font-size:      0.8rem;
    font-style:     normal;
    color:          var(--oww-amber);
    letter-spacing: 0.05em;
}

/* Scroll indicator */
.oww-story-hero__scroll {
    position:    absolute;
    bottom:      30px;
    left:        50%;
    transform:   translateX(-50%);
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         0.5rem;
    z-index:     20;
}

.oww-story-hero__scroll-text {
    font-size:      0.625rem;
    font-weight:    500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    opacity:        0.7;
}

.oww-story-hero__scroll-line {
    width:     1px;
    height:    40px;
    background: rgba(205, 165, 100, 0.4);
    position:  relative;
    overflow:  hidden;
}

.oww-story-hero__scroll-dot {
    position:    absolute;
    top:         0;
    left:        50%;
    transform:   translateX(-50%);
    width:       3px;
    height:      10px;
    background:  var(--oww-amber);
    border-radius: 2px;
    animation:   owwStoryScrollDot 2s ease-in-out infinite;
}

@keyframes owwStoryScrollDot {
    0%, 100% { top: 0;    opacity: 1; }
    80%      { top: 30px; opacity: 0; }
    81%      { top: 0;    opacity: 0; }
}

/* Corner decor */
.oww-story-hero__decor {
    position:       absolute;
    width:          100px;
    height:         100px;
    pointer-events: none;
    z-index:        5;
}

.oww-story-hero__decor--left {
    top:          30px;
    left:         30px;
    border-top:   1px solid rgba(205, 165, 100, 0.4);
    border-left:  1px solid rgba(205, 165, 100, 0.4);
}

.oww-story-hero__decor--right {
    bottom:         120px;
    right:          30px;
    border-bottom:  1px solid rgba(205, 165, 100, 0.4);
    border-right:   1px solid rgba(205, 165, 100, 0.4);
}


/* ─── 2. CHAPTERS ───────────────────────────────────────────────────────── */

.oww-chapter {
    position: relative;
    padding:  clamp(5rem, 12vw, 10rem) 0;
    overflow: hidden;
}

.oww-chapter--one   { background: linear-gradient(180deg, var(--oww-bg-dark)   0%, var(--oww-bg-raised) 100%); }
.oww-chapter--two   { background: linear-gradient(180deg, var(--oww-bg-raised)  0%, var(--oww-bg-mid)    100%); }
.oww-chapter--three { background: linear-gradient(180deg, var(--oww-bg-mid)    0%, var(--oww-bg-dark)   100%); }

.oww-chapter__number-bg {
    position:   absolute;
    top:        50%;
    left:       5%;
    transform:  translateY(-50%);
    font-family: var(--oww-ff-display);
    font-size:  clamp(8rem, 25vw, 18rem);
    font-weight: 300;
    line-height: 1;
    color:      transparent;
    -webkit-text-stroke: 1px rgba(205, 165, 100, 0.06);
    pointer-events: none;
    z-index:    0;
    user-select: none;
}

.oww-chapter--two .oww-chapter__number-bg { left: auto; right: 5%; }

/* Grid */
.oww-chapter__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2.5rem;
    align-items:           center;
    position:              relative;
    z-index:               1;
}

@media (min-width: 900px) {
    .oww-chapter__grid                   { grid-template-columns: 200px 1fr; gap: 4rem; }
    .oww-chapter__grid--reverse          { grid-template-columns: 1fr 200px; }
    .oww-chapter__grid--reverse .oww-chapter__visual { order: 2; }
    .oww-chapter__grid--reverse .oww-chapter__content { order: 1; }
}

/* Icon frame */
.oww-chapter__visual {
    display:     flex;
    justify-content: center;
    align-items: center;
}

.oww-chapter__frame {
    position:    relative;
    width:       clamp(140px, 18vw, 200px);
    height:      clamp(140px, 18vw, 200px);
    display:     flex;
    align-items: center;
    justify-content: center;
}

.oww-chapter__frame-inner {
    width:       68%;
    height:      68%;
    display:     flex;
    align-items: center;
    justify-content: center;
    background:  linear-gradient(135deg, rgba(205, 165, 100, 0.08) 0%, rgba(205, 165, 100, 0.02) 100%);
    border:      1px solid var(--oww-bronze-20);
    border-radius: 50%;
}

.oww-chapter__icon {
    width:   48%;
    height:  48%;
    color:   var(--oww-amber);
    opacity: 0.7;
}

.oww-chapter__frame-corner {
    position:     absolute;
    width:        20px;
    height:       20px;
    border-color: var(--oww-amber);
    border-style: solid;
    border-width: 0;
    opacity:      0.3;
}

.oww-chapter__frame-corner--tl { top: 0;    left: 0;   border-top-width:    1px; border-left-width:  1px; }
.oww-chapter__frame-corner--tr { top: 0;    right: 0;  border-top-width:    1px; border-right-width: 1px; }
.oww-chapter__frame-corner--bl { bottom: 0; left: 0;   border-bottom-width: 1px; border-left-width:  1px; }
.oww-chapter__frame-corner--br { bottom: 0; right: 0;  border-bottom-width: 1px; border-right-width: 1px; }

/* Content */
.oww-chapter__content { max-width: 600px; }

.oww-chapter__header { margin-bottom: 1.25rem; }

.oww-chapter__label {
    display:        block;
    font-family:    var(--oww-ff-display);
    font-size:      0.85rem;
    font-style:     italic;
    color:          var(--oww-amber);
    letter-spacing: 0.05em;
    margin:         0 0 0.5rem;
}

.oww-chapter__divider {
    display:     flex;
    align-items: center;
    gap:         0.7rem;
}

.oww-chapter__divider-line {
    flex:       1;
    height:     1px;
    background: linear-gradient(90deg, rgba(205, 165, 100, 0.2) 0%, transparent 100%);
    max-width:  55px;
}

.oww-chapter__divider-diamond { font-size: 0.35rem; color: var(--oww-amber); opacity: 0.5; }

.oww-chapter__title {
    font-size:   clamp(1.65rem, 4vw, 2.5rem);
    font-weight: 400;
    color:       var(--oww-cream);
    line-height: 1.2;
    margin:      0 0 1.5rem;
}

.oww-chapter__quote {
    position:    relative;
    margin:      0 0 1.5rem;
    padding:     0 0 0 1.15rem;
    border-left: 2px solid var(--oww-amber);
}

.oww-chapter__quote p {
    font-size:   clamp(1rem, 1.6vw, 1.125rem);
    font-weight: 500;
    color:       var(--oww-cream);
    line-height: 1.6;
    margin:      0;
}

.oww-chapter__quote cite {
    display:    block;
    margin-top: 0.5rem;
    font-size:  0.8rem;
    font-style: normal;
    color:      var(--oww-cream-muted);
}

.oww-chapter__prose {
    font-size:   0.95rem;
    line-height: 1.85;
    color:       var(--oww-cream-muted);
}

.oww-chapter__prose p { margin: 0 0 1rem; }

.oww-chapter__highlight { font-style: italic; color: var(--oww-amber); }

.oww-chapter__accent-line {
    width:      45px;
    height:     2px;
    background: linear-gradient(90deg, var(--oww-amber) 0%, transparent 100%);
    margin-top: 1.75rem;
}

.oww-chapter__cta {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.875rem;
    margin-top: 1.75rem;
}


/* ─── 3. CREDENTIALS ────────────────────────────────────────────────────── */

.oww-credentials {
    position:   relative;
    padding:    clamp(4.5rem, 10vw, 7.5rem) 0;
    background: var(--oww-bg-dark);
    overflow:   hidden;
}

.oww-credentials__header {
    text-align:    center;
    margin-bottom: 2.25rem;
}

.oww-credentials__eyebrow {
    display:        block;
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--oww-amber);
    margin:         0 0 0.5rem;
}

.oww-credentials__title {
    font-family:  var(--oww-ff-display);
    font-size:    clamp(1.65rem, 3.5vw, 2.25rem);
    font-weight:  400;
    color:        var(--oww-cream);
    margin:       0;
}

/* Credentials cards grid
 * !important removed — GSAP only animates .oww-credentials__card (not the grid).
 * Specificity of .oww-story-page .oww-credentials__grid is sufficient.
 */
.oww-story-page .oww-credentials__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   0.875rem;
    margin-bottom:         2.25rem;
}

@media (min-width: 600px) {
    .oww-story-page .oww-credentials__grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   1rem;
    }
}

@media (min-width: 1000px) {
    .oww-story-page .oww-credentials__grid {
        grid-template-columns: repeat(4, 1fr);
        gap:                   1.125rem;
    }
}

.oww-credentials__card {
    background:    rgba(255, 255, 255, 0.02);
    border:        1px solid var(--oww-bronze-30);
    border-radius: var(--oww-radius-md);
    padding:       1.5rem 1.125rem;
    text-align:    center;
    transition:    border-color 0.3s var(--oww-ease-out),
                  background    0.3s var(--oww-ease-out),
                  transform     0.3s var(--oww-ease-out);
}

.oww-credentials__card:hover {
    background:   var(--oww-amber-faint);
    border-color: rgba(205, 165, 100, 0.4);
    transform:    translateY(-3px);
}

.oww-credentials__card--featured {
    border-color: rgba(205, 165, 100, 0.4);
    background:   rgba(205, 165, 100, 0.02);
}

.oww-credentials__card-icon {
    width:   42px;
    height:  42px;
    margin:  0 auto 0.875rem;
    color:   var(--oww-amber);
}

.oww-credentials__card-icon svg { width: 100%; height: 100%; }

.oww-credentials__card-title {
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--oww-cream);
    margin:      0 0 0.5rem;
    line-height: 1.3;
}

.oww-credentials__card-text {
    font-size:   0.8rem;
    color:       var(--oww-cream-muted);
    line-height: 1.55;
    margin:      0;
}

/* Expertise tags */
.oww-credentials__expertise {
    text-align:    center;
    margin-bottom: 1.75rem;
}

.oww-credentials__expertise-label {
    display:     block;
    font-size:   0.8rem;
    font-weight: 600;
    color:       var(--oww-cream);
    margin-bottom: 0.75rem;
}

.oww-credentials__tags {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             0.5rem;
}

.oww-credentials__tag {
    display:       inline-block;
    padding:       0.4rem 0.8rem;
    font-size:     0.7rem;
    font-weight:   500;
    color:         var(--oww-amber);
    background:    transparent;
    border:        1px solid rgba(205, 165, 100, 0.4);
    border-radius: 100px;
    transition:    border-color 0.2s var(--oww-ease-out),
                  background   0.2s var(--oww-ease-out);
}

.oww-credentials__tag:hover {
    background:   rgba(205, 165, 100, 0.12);
    border-color: var(--oww-amber);
}

/* Growth box */
.oww-credentials__growth {
    display:       flex;
    align-items:   flex-start;
    gap:           1.125rem;
    max-width:     600px;
    margin:        0 auto;
    padding:       1.125rem;
    background:    rgba(255, 255, 255, 0.02);
    border:        1px solid var(--oww-bronze-30);
    border-radius: var(--oww-radius-md);
}

.oww-credentials__growth-icon {
    flex-shrink:   0;
    width:         38px;
    height:        38px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    rgba(205, 165, 100, 0.1);
    border-radius: 9px;
    color:         var(--oww-amber);
}

.oww-credentials__growth-icon svg { width: 20px; height: 20px; }

.oww-credentials__growth-title {
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--oww-cream);
    margin:      0 0 0.35rem;
}

.oww-credentials__growth-text {
    font-size:   0.825rem;
    color:       var(--oww-cream-muted);
    line-height: 1.55;
    margin:      0;
}

.oww-credentials__growth-text em { color: var(--oww-amber); font-style: normal; }


/* ─── 4. STORY BUTTONS ──────────────────────────────────────────────────── */
/*
 * oww-story-btn removed — was a near-duplicate of the global .oww-btn system.
 * The story page HTML widget has been updated to use .oww-btn .oww-btn--primary
 * and .oww-btn .oww-btn--outline from global.css.
 * If any CTA on this page stops rendering correctly, check that the HTML
 * widget uses oww-btn classes (not oww-story-btn).
 */


/* ─── 5. REDUCED MOTION ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .oww-story-hero__scroll-dot { animation: none; opacity: 0.4; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSING CLASS FIXES — v3.3.0
   ═══════════════════════════════════════════════════════════════════════════ */

/* .oww-story-hero__content — flex wrapper inside .oww-story-hero__content-col */
.oww-story-hero__content {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    height:          100%;
}

/* .oww-credentials__growth-content — text column beside the growth icon */
.oww-credentials__growth-content {
    flex:      1;
    min-width: 0;
}


/* ─── GSAP ANIMATION FALLBACKS ──────────────────────────────────────────── */
.oww-story-page .oww-story-hero__portrait-frame,
.oww-story-page .oww-story-hero__portrait-glow,
.oww-story-page .oww-story-hero__portrait-border,
.oww-story-page .oww-story-hero__portrait-caption,
.oww-story-page .oww-story-hero__eyebrow,
.oww-story-page .oww-story-hero__title-line,
.oww-story-page .oww-story-hero__tagline,
.oww-story-page .oww-story-hero__cred,
.oww-story-page .oww-story-hero__quote-wrap {
    opacity: 1; /* GSAP will override inline when running */
}