/* ======================================================
   INDEX214 EL MINA GUARDED FOUNDATION LAYER
   Base: Index213 / Index214 uploaded GitHub state.

   Purpose:
   - Provide a clean design-token and helper-class base for future features.
   - Avoid changing the proven Index213 live components by selector.
   - Stop foundation work from creating the old patch-over-patch problem.

   Important rule:
   This file must NOT directly restyle existing live component IDs such as:
   #elmina-memory-wall-card, #memory-wall-content, #memory-wall-text,
   #memory-wall-more, #memory-wall-bottom, #elmina-youtube-share-button,
   #elmina-photo-card, #elmina-youtube-card, #elmina-app-card, or stream/radio
   controls unless a future change is deliberately scoped and tested.

   No Go Live, OBS/YouTube stream mode, radio, KV, Web3Forms, forms,
   owner approval, carousel order, icons, or backend behavior is changed.
   ====================================================== */

:root {
    /* Brand palette */
    --elmina-brand-blue: #004aad;
    --elmina-brand-blue-deep: #003f9e;
    --elmina-brand-blue-soft: #0b5ec2;
    --elmina-brand-yellow: #ffe84d;
    --elmina-brand-yellow-soft: #fff27a;
    --elmina-page-bg: #f7fbff;
    --elmina-white: #ffffff;

    /* Shared surfaces for future modules */
    --elmina-card-gradient: linear-gradient(135deg, var(--elmina-brand-blue), var(--elmina-brand-blue-deep));
    --elmina-card-border: rgba(255, 255, 255, 0.14);
    --elmina-card-shadow: 0 16px 30px rgba(0, 74, 173, 0.13);
    --elmina-inner-border: rgba(255, 255, 255, 0.22);

    /* Shared sizing scale for future modules */
    --elmina-radius-card: clamp(1rem, 1.8vw, 1.35rem);
    --elmina-radius-inner: clamp(0.75rem, 1.2vw, 1rem);
    --elmina-gap-page: clamp(1rem, 2vw, 2rem);
    --elmina-gap-card: clamp(0.85rem, 1.45vw, 1.25rem);
    --elmina-pad-card: clamp(1rem, 1.8vw, 1.5rem);
    --elmina-pad-card-mobile: clamp(1.15rem, 4.3vw, 1.55rem);

    /* Shared type scale for future modules */
    --elmina-title-size: clamp(1.45rem, 2vw, 1.95rem);
    --elmina-title-size-mobile: clamp(1.7rem, 7vw, 2.1rem);
    --elmina-subtitle-size: clamp(0.95rem, 1.1vw, 1.08rem);
    --elmina-subtitle-size-mobile: clamp(1.05rem, 4.6vw, 1.28rem);
    --elmina-body-size: clamp(0.9rem, 1vw, 1rem);

    /* Shared control scale for future modules */
    --elmina-button-min-height: 2.7rem;
    --elmina-button-radius: 999px;
    --elmina-arrow-size: clamp(2.6rem, 5vw, 3.3rem);
    --elmina-arrow-size-mobile: clamp(3rem, 13vw, 3.75rem);
}

html,
body {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

button,
a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 232, 77, 0.26);
}

/* ======================================================
   Future feature helpers
   Use these classes for NEW sections/components only.
   Existing Index213 components should keep their current CSS until each one
   is intentionally migrated and tested by platform.
   ====================================================== */

.elmina-system-card {
    background: var(--elmina-card-gradient);
    color: var(--elmina-white);
    border: 1px solid var(--elmina-card-border);
    border-radius: var(--elmina-radius-card);
    box-shadow: var(--elmina-card-shadow);
    padding: var(--elmina-pad-card);
    overflow: hidden;
    min-width: 0;
    box-sizing: border-box;
}

.elmina-system-title {
    color: var(--elmina-brand-yellow);
    font-size: var(--elmina-title-size);
    font-weight: 900;
    line-height: 1.08;
    margin: 0;
    overflow-wrap: anywhere;
}

.elmina-system-subtitle {
    color: var(--elmina-white);
    font-size: var(--elmina-subtitle-size);
    font-weight: 700;
    line-height: 1.28;
    margin: 0.35rem 0 0;
    opacity: 0.96;
}

.elmina-system-body {
    color: var(--elmina-white);
    font-size: var(--elmina-body-size);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.elmina-system-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--elmina-button-min-height);
    padding: 0.58rem 1.1rem;
    border: 0;
    border-radius: var(--elmina-button-radius);
    background: var(--elmina-brand-yellow);
    color: var(--elmina-brand-blue);
    -webkit-text-fill-color: var(--elmina-brand-blue);
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
}

.elmina-system-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.elmina-system-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--elmina-arrow-size);
    height: var(--elmina-arrow-size);
    min-width: var(--elmina-arrow-size);
    border-radius: 999px;
    background: var(--elmina-brand-yellow);
    color: var(--elmina-brand-blue);
    -webkit-text-fill-color: var(--elmina-brand-blue);
    font-weight: 900;
}

.elmina-system-text-safe {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    min-width: 0;
}

@media (max-width: 640px) {
    .elmina-system-card {
        padding: var(--elmina-pad-card-mobile);
        border-radius: clamp(1.1rem, 5vw, 1.45rem);
    }

    .elmina-system-title {
        font-size: var(--elmina-title-size-mobile);
    }

    .elmina-system-subtitle {
        font-size: var(--elmina-subtitle-size-mobile);
    }

    .elmina-system-arrow {
        width: var(--elmina-arrow-size-mobile);
        height: var(--elmina-arrow-size-mobile);
        min-width: var(--elmina-arrow-size-mobile);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}

/* ======================================================
   INDEX216 MEMORY WALL FIXED-BOX GUARD
   Base: Index215 guarded foundation.
   Scope: Memory Wall visual sizing only.

   Purpose:
   - Stop the Memory Wall message/content box from growing or shrinking based
     on visitor memory text length.
   - Keep collapsed and expanded states the same visual size.
   - Let full text scroll only inside the internal rail after pressing More.

   No Go Live, OBS/YouTube stream mode, radio, KV, Web3Forms, forms,
   owner approval, carousel order, icons, or backend behavior is changed.
   ====================================================== */

#elmina-memory-wall-card,
#elmina-memory-wall-card * {
    box-sizing: border-box !important;
}

#memory-wall-inner {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

#memory-wall-top,
#memory-wall-bottom {
    flex: 0 0 auto !important;
}

#memory-wall-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 12.15rem !important;
    height: 12.15rem !important;
    max-height: 12.15rem !important;
    flex: 0 0 12.15rem !important;
    overflow: hidden !important;
}

#memory-wall-content.is-memory-expanded {
    min-height: 12.15rem !important;
    height: 12.15rem !important;
    max-height: 12.15rem !important;
    flex-basis: 12.15rem !important;
    overflow: hidden !important;
}

#memory-wall-scroll-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

#memory-wall-content.is-memory-expanded #memory-wall-scroll-area {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

#memory-wall-content:not(.is-memory-expanded) #memory-wall-scroll-area {
    overflow-y: hidden !important;
}

#memory-wall-meta-row {
    flex: 0 0 auto !important;
    margin-top: 0.42rem !important;
}

@media (min-width: 1024px) {
    #memory-wall-content,
    #memory-wall-content.is-memory-expanded {
        min-height: 12.25rem !important;
        height: 12.25rem !important;
        max-height: 12.25rem !important;
        flex-basis: 12.25rem !important;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    #memory-wall-content,
    #memory-wall-content.is-memory-expanded {
        min-height: 10.15rem !important;
        height: 10.15rem !important;
        max-height: 10.15rem !important;
        flex-basis: 10.15rem !important;
    }
}

@media (max-width: 640px) {
    #memory-wall-content,
    #memory-wall-content.is-memory-expanded {
        min-height: 14.8rem !important;
        height: 14.8rem !important;
        max-height: 14.8rem !important;
        flex-basis: 14.8rem !important;
    }
}

@media (max-width: 390px) {
    #memory-wall-content,
    #memory-wall-content.is-memory-expanded {
        min-height: 14.2rem !important;
        height: 14.2rem !important;
        max-height: 14.2rem !important;
        flex-basis: 14.2rem !important;
    }
}


/* ======================================================
   INDEX217 SHARED SHARE-CONTROL STRIP
   Base: Index216.
   Scope: Memory and Video carousel control strip only.

   Purpose:
   - Treat the strip as one mini-grid:
     [ left arrow ] [ share button ] [ counter + dots ] [ right arrow ].
   - Keep Memory and Video controls consistent without random per-button resizing.
   - Keep yellow-pill buttons readable: blue text on yellow.
   - Video button wording is shortened to "Share Video Link" so the design
     fits the component instead of stretching the component around long text.

   No Go Live, OBS/YouTube stream mode, radio, KV, Web3Forms, forms,
   owner approval, carousel order, icons, or backend behavior is changed.
   ====================================================== */

#memory-wall-bottom,
.elmina-youtube-controls {
    --elmina-share-arrow-size: 2.35rem;
    --elmina-share-button-width: 7.7rem;
    --elmina-share-strip-gap: 0.48rem;
    --elmina-share-center-min: 3.85rem;

    display: grid !important;
    grid-template-columns:
        var(--elmina-share-arrow-size)
        var(--elmina-share-button-width)
        minmax(var(--elmina-share-center-min), 1fr)
        var(--elmina-share-arrow-size) !important;
    align-items: center !important;
    column-gap: var(--elmina-share-strip-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#memory-wall-prev,
#memory-wall-next,
.elmina-youtube-arrow {
    width: var(--elmina-share-arrow-size) !important;
    height: var(--elmina-share-arrow-size) !important;
    min-width: var(--elmina-share-arrow-size) !important;
    max-width: var(--elmina-share-arrow-size) !important;
    min-height: var(--elmina-share-arrow-size) !important;
    max-height: var(--elmina-share-arrow-size) !important;
    justify-self: center !important;
    flex: 0 0 var(--elmina-share-arrow-size) !important;
}

#memory-wall-share-button,
#elmina-youtube-share-button.elmina-youtube-share {
    width: var(--elmina-share-button-width) !important;
    max-width: var(--elmina-share-button-width) !important;
    min-width: 0 !important;
    min-height: 2.35rem !important;
    padding: 0.42rem 0.62rem !important;
    justify-self: start !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: linear-gradient(145deg, #fff27a, #ffe84d 55%, #d8b500) !important;
    color: #004aad !important;
    -webkit-text-fill-color: #004aad !important;
    font-family: var(--elmina-font-primary, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif) !important;
    font-size: clamp(0.72rem, 0.82vw, 0.84rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: hidden !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

#memory-wall-share-button::before {
    content: none !important;
}

#elmina-youtube-share-button.elmina-youtube-share,
#elmina-youtube-share-button.elmina-youtube-share * {
    color: #004aad !important;
    -webkit-text-fill-color: #004aad !important;
}

#elmina-youtube-share-button .elmina-youtube-share-line {
    display: inline !important;
    white-space: nowrap !important;
    font: inherit !important;
    line-height: inherit !important;
}

#memory-wall-center,
.elmina-youtube-center {
    justify-self: center !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: var(--elmina-share-center-min) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.24rem !important;
    overflow: visible !important;
}

#memory-wall-count,
.elmina-youtube-count,
#elmina-youtube-current-count {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    #memory-wall-bottom,
    .elmina-youtube-controls {
        --elmina-share-arrow-size: clamp(3rem, 11vw, 4.1rem);
        --elmina-share-button-width: clamp(10.6rem, 34vw, 14.4rem);
        --elmina-share-strip-gap: clamp(0.48rem, 2vw, 0.85rem);
        --elmina-share-center-min: clamp(4.4rem, 15vw, 6.3rem);
    }

    #memory-wall-share-button,
    #elmina-youtube-share-button.elmina-youtube-share {
        min-height: clamp(3.05rem, 9vw, 4.05rem) !important;
        padding: 0.5rem 0.9rem !important;
        font-size: clamp(0.98rem, 3.6vw, 1.35rem) !important;
        line-height: 1.04 !important;
    }

    #memory-wall-count,
    .elmina-youtube-count,
    #elmina-youtube-current-count {
        font-size: clamp(1rem, 4.2vw, 1.35rem) !important;
    }
}

@media (max-width: 390px) {
    #memory-wall-bottom,
    .elmina-youtube-controls {
        --elmina-share-arrow-size: 2.72rem;
        --elmina-share-button-width: 8.9rem;
        --elmina-share-strip-gap: 0.34rem;
        --elmina-share-center-min: 3.75rem;
    }

    #memory-wall-share-button,
    #elmina-youtube-share-button.elmina-youtube-share {
        min-height: 2.82rem !important;
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
        font-size: 0.86rem !important;
    }
}