/* ============================================================
   instrument_store — landing builder component
   Two-column layout: centered content (title + subtitle +
   musical separator + intro + 3-feature card with vertical
   dividers + CTA) on one side, instructor's clarinet image
   with a vertical product label on the other.
   No outer padding — spacing is owned by the vertical_spacer
   between blocks.
   ============================================================ */

.instrument-store-section {
    position: relative;
    overflow: hidden;
}

.instrument-store-section__row {
    position: relative;
    z-index: 1;
    align-items: stretch;
}

/* ============================================================
   Content column — centered stack
   ============================================================ */
.instrument-store-section__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 16px 8px;
}

.instrument-store-section__title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(1.6rem, 2.6vw, 2.6rem);
    line-height: 1.3;
    color: var(--dark);
}
.instrument-store-section__subtitle,
.instrument-store-section__intro {
    margin: 0;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.7;
    color: var(--gray-500);
}
.instrument-store-section__subtitle-line,
.instrument-store-section__intro-line {
    display: block;
}

body.dark-mode .instrument-store-section__title { color: #ffffff; }
body.dark-mode .instrument-store-section__subtitle,
body.dark-mode .instrument-store-section__intro { color: var(--gray-400); }

body.home-wallpaper-active:not(.dark-mode) .instrument-store-section__title {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(20, 0, 40, 0.30);
}
body.home-wallpaper-active:not(.dark-mode) .instrument-store-section__subtitle,
body.home-wallpaper-active:not(.dark-mode) .instrument-store-section__intro {
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(20, 0, 40, 0.22);
}

/* ---- Musical separator ---- */
.instrument-store-section__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 520px;
    color: var(--primary);
    margin: 4px 0;
}
.instrument-store-section__separator-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        currentColor 30%,
        currentColor 70%,
        transparent 100%
    );
    opacity: 0.6;
}
.instrument-store-section__separator-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-btn-color);
    box-shadow: 0 6px 16px rgba(62, 0, 95, 0.20);
}
body.dark-mode .instrument-store-section__separator,
body.home-wallpaper-active:not(.dark-mode) .instrument-store-section__separator {
    color: #f1c87a;
}

/* ============================================================
   Features card — single rounded card with 3 cells split by
   vertical dividers. Same palette/effect as the why_choose_us
   card (lavender bg + primary border + lift on hover).
   ============================================================ */
.instrument-store-section__features {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    border: 1.5px solid var(--primary);
    border-radius: 24px;
    background: #fbdefcf8;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 16px 36px rgba(62, 0, 95, 0.10);
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.instrument-store-section__features:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(62, 0, 95, 0.16);
}
body.dark-mode .instrument-store-section__features {
    background: rgba(31, 15, 51, 0.55);
    border-color: rgba(180, 143, 255, 0.65);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.30);
}

.is-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 22px 16px;
}
/* Vertical divider between feature cells (skip after the last). */
.is-feature:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16%;
    inset-inline-end: 0;
    width: 1px;
    height: 68%;
    background: var(--primary);
    opacity: 0.30;
}
body.dark-mode .is-feature:not(:last-child)::after {
    background: rgba(180, 143, 255, 0.40);
}

.is-feature__icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--primary);
    box-shadow: 0 6px 16px rgba(62, 0, 95, 0.20);
}
.is-feature__icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.is-feature__title {
    margin: 0;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--dark);
}
.is-feature__description {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--gray-500);
}
body.dark-mode .is-feature__title { color: #ffffff; }
body.dark-mode .is-feature__description { color: var(--gray-400); }
body.home-wallpaper-active:not(.dark-mode) .is-feature__title { color: #6a0d7a; }
body.home-wallpaper-active:not(.dark-mode) .is-feature__description { color: #bd31d6; }

/* ============================================================
   CTA
   ============================================================ */
.instrument-store-section__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 32px;
    border-radius: 100px;
    background: var(--primary);
    color: var(--primary-btn-color);
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(62, 0, 95, 0.28);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
    margin-top: 8px;
}
.instrument-store-section__cta:hover,
.instrument-store-section__cta:focus-visible {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: var(--primary-btn-color);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(255, 107, 157, 0.32);
    outline: none;
}
.instrument-store-section__cta-arrow { width: 18px; height: 18px; }
.rtl .instrument-store-section__cta-arrow { transform: rotate(180deg); }

/* ============================================================
   Image column — full-height instrument photo + vertical
   product label overlaid on the side.
   ============================================================ */
.instrument-store-section__media-col {
    display: flex;
    align-items: center;                 /* center the image vertically in the
                                             column when the content side is
                                             taller than the natural image */
    padding-left: 0;
    padding-right: 0;
}
.instrument-store-section__media {
    position: relative;                  /* anchor for the absolute labels */
    width: 100%;
    /* no fixed height — the wrapper takes the image's natural height so
       the absolutely-positioned labels always track the image, not the
       (possibly taller) content column. */
}

.instrument-store-section__image {
    width: 100%;
    height: auto;                       /* preserve natural aspect ratio so the
                                            image scales down proportionally on
                                            narrow viewports — no cropping. */
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* ============================================================
   Image labels — FOUR independent overlays.

   Each one is absolutely positioned over the image, so you can
   move it freely with `top`, `bottom`, `left`, `right`.
   - To slide LEFT/RIGHT: change `left` (or use `right`).
   - To slide UP/DOWN:    change `top`  (or use `bottom`).
   - The `transform: translateX(-50%)` recipe keeps an element
     centered horizontally on whatever `left` value you pick;
     remove it if you want a left-edge anchored layout.

   Labels (top to bottom on the photo):
   1. .__label-ar-line-1     → Arabic line #1 (e.g. "كلارينت أماتى")
   2. .__label-ar-line-2     → Arabic line #2 (e.g. "إصدار سيركان حقى")
   3. .__label-en-title      → EN model       (e.g. "AMATI ACL 640SH")
   4. .__label-en-edition    → EN edition     (e.g. "Serkan Hakki Edition")
   ============================================================ */

/* Shared baseline for all 4 labels — visual feel only.
   Position each one in its OWN rule below. */
.instrument-store-section__label-ar-line-1,
.instrument-store-section__label-ar-line-2,
.instrument-store-section__label-en-title,
.instrument-store-section__label-en-edition {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 2px 6px rgba(20, 0, 40, 0.55);
    transform: translateX(-50%);     /* center on the chosen `left` */
}

/* All four labels use clamp() so they scale smoothly across viewport
   widths instead of jumping at breakpoints. clamp() args:
     1) smallest (used on narrow screens),
     2) preferred (scales with viewport),
     3) largest  (used on wide screens). */

/* Stack order (top → bottom): EN title → EN edition → AR line 1 → AR line 2.
   Each line sits 50px above the one below it. All four share the same
   typography (size, weight, color, spacing) and just differ in vertical
   position so they read as one stacked block. */

/* Horizontal offset is now a single fixed pixel value per line so editing
   it actually moves the label. Increase to push RIGHT in RTL, decrease
   (or use a negative number) to push LEFT. */

/* Anchor — Arabic line #2 sits at the lowest position. */
.instrument-store-section__label-ar-line-2 {
    bottom: clamp(120px, 15vw, 205px);              /* ↕ ANCHOR — adjust this */
    left:   calc(50% + 90px);                       /* ↔ edit the px value */
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #f1c87a;
}

/* Arabic line #1 — 50px above line #2. */
.instrument-store-section__label-ar-line-1 {
    bottom: clamp(170px, 18vw, 230px);              /* ↕ +50 over ar-line-2 */
    left:   calc(50% + 90px);                       /* ↔ edit the px value */
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #f1c87a;
}

/* English edition line — 50px above Arabic line #1. */
.instrument-store-section__label-en-edition {
    bottom: clamp(220px, 22vw, 280px);              /* ↕ +50 over ar-line-1 */
    left:   calc(50% + 90px);                       /* ↔ edit the px value */
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #f1c87a;
}

/* English model (title) line — top of the stack, 50px above EN edition. */
.instrument-store-section__label-en-title {
    bottom: clamp(270px, 26vw, 305px);              /* ↕ +50 over en-edition */
    left:   calc(50% + 90px);                       /* ↔ edit the px value */
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #f1c87a;
}

/* ============================================================
   Animated musical separator — sits in the gap between the
   English and the Arabic label groups. Decorative only.
   Music notes flow right-to-left across two side rails, and a
   primary-coloured icon dot floats in the middle.
   ============================================================ */
.instrument-store-section__overlay-separator {
    position: absolute;
    bottom: clamp(195px, 20vw, 257px);              /* ↕ midway between EN edition + AR line 1 */
    left: 50%;
    transform: translateX(-50%);
    width: clamp(220px, 28vw, 320px);
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    color: #f1c87a;                                 /* default — overridden by
                                                       admin's inline style="color:..." */
}

/* Side rail that hosts the flowing notes. Two stacked spans loop
   seamlessly (the second is offset by half the animation cycle). */
.instrument-store-section__overlay-separator-track {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* fade the notes in/out at the edges so they don't clip abruptly */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.instrument-store-section__overlay-notes {
    position: absolute;
    top: 50%;
    left: 0;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1;
    color: currentColor;            /* inherits from .__overlay-separator */
    letter-spacing: 0.05em;
    text-shadow: 0 2px 6px rgba(20, 0, 40, 0.55);
    transform: translateY(-50%);
    animation: ai-store-notes-rtl 12s linear infinite;
    will-change: transform;
}
.instrument-store-section__overlay-notes:nth-child(2) {
    animation-delay: -6s;            /* second copy fills the loop seamlessly */
}

@keyframes ai-store-notes-rtl {
    from { transform: translate(100%, -50%); }
    to   { transform: translate(-100%, -50%); }
}

/* Standalone uploaded icon — sits ABOVE the English title, horizontally
   centered. Renders only when the admin has uploaded an image. */
.instrument-store-section__overlay-separator-icon {
    position: absolute;
    bottom: clamp(310px, 30vw, 345px);              /* ↕ above EN title */
    left: calc(50% + 85px);                          /* ↔ */
    transform: translateX(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.instrument-store-section__overlay-separator-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991px) {
    .instrument-store-section__features {
        grid-template-columns: 1fr;
    }
    .is-feature:not(:last-child)::after {
        top: auto;
        bottom: 0;
        inset-inline-end: 16%;
        inset-inline-start: 16%;
        width: auto;
        height: 1px;
    }
    .instrument-store-section__media-col {
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 24px;
    }
    .instrument-store-section__image { max-height: 480px; min-height: auto; }
    .instrument-store-section__label-ar-line-1,
    .instrument-store-section__label-ar-line-2,
    .instrument-store-section__label-en-title,
    .instrument-store-section__label-en-edition {
        position: static;
        transform: none;
        text-align: center;
        margin-top: 6px;
        white-space: normal;
    }
    /* The decorative animated separator only makes sense as an overlay
       on top of the desktop image — on stacked mobile layout it would
       float awkwardly, so hide it. */
    .instrument-store-section__overlay-separator,
    .instrument-store-section__overlay-separator-icon {
        display: none;
    }
    .instrument-store-section__separator { max-width: 360px; }
}

@media (max-width: 575px) {
    .instrument-store-section__title { font-size: clamp(1.4rem, 6vw, 1.9rem); }
    .is-feature { padding: 20px 14px; }
}