/**
 * JOY-TEX — Homepage Page Styles
 *
 * Scope:
 * - Homepage-specific section layouts
 * - Homepage-specific visual treatments
 * - Homepage-specific responsive behavior
 *
 * Shared typography, links and section foundations
 * are maintained in components/.
 *
 * @version 1.0.0
 */

/* =========================================================
   01. Section Foundation
   ========================================================= */

.joy-fabric-ranges__layout {
    min-width: 0;
}

.joy-fabric-ranges__panel {
    min-width: 0;
}

/* =========================================================
   02. Shared Editorial Link
   ========================================================= */

.joy-fabric-ranges__actions {
    margin-top: 1.5rem;
}

/* =========================================================
   03. Default Linear Layout
   ========================================================= */

.joy-fabric-ranges__accordion {
    display: none;
}

.joy-fabric-ranges__list {
    display: grid;
    gap: 3rem;
    margin-top: 3rem;
}

.joy-fabric-ranges__item {
    min-width: 0;
}

.joy-fabric-ranges__information {
    min-width: 0;
}

.joy-fabric-ranges__description {
    max-width: 42rem;
}

.joy-fabric-ranges__media {
    margin: 1.5rem 0 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #E7E8E8;
}

.joy-fabric-ranges__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.joy-fabric-ranges__placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: #E7E8E8;
}

/* =========================================================
   04. Desktop Enhanced Layout
   ========================================================= */

@media (min-width: 1000px) {

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__layout {
        display: grid;
        grid-template-columns:
            minmax(0, 0.45fr)
            minmax(0, 0.55fr);
        column-gap: clamp(3rem, 5vw, 5rem);
        align-items: start;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__panel {
        position: sticky;
        top: 7rem;
        align-self: start;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__accordion {
        display: block;
        margin-top: 2rem;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__information {
        border-bottom: 1px solid rgba(69, 74, 80, 0.22);
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__information:last-child {
        border-bottom: 0;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 1.1rem 0;
        border: 0;
        background: transparent;
        color: var(--joy-color-text-muted);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__trigger[aria-expanded="true"] {
        color: var(--joy-color-editorial-heading);
        padding-bottom: 0.375rem;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__trigger:hover {
        color: var(--joy-color-accent-red);
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__trigger:focus-visible {
        outline: 2px solid var(--joy-color-brand);
        outline-offset: 4px;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__description {
        margin: 0;
        padding-bottom: 1.1rem;
        font-size: 0.9375rem;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__description[hidden] {
        display: none;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__actions {
        margin-top: 2rem;
    }

    /*
     * JS moves information into Accordion.
     * Articles retain one media element each.
     */
    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__list {
        display: grid;
        gap: 1.5rem;
        margin-top: 0;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__item {
        display: block;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__media {
        margin: 0;
    }
}

/* =========================================================
   05. Narrow Layout
   ========================================================= */

@media (max-width: 999px) {

    .joy-fabric-ranges__list {
        gap: 2.5rem;
    }

}

/* =========================================================
   06. Mobile
   ========================================================= */

@media (max-width: 767px) {

    .joy-fabric-ranges__list {
        gap: 2rem;
        margin-top: 2.5rem;
    }
}



/* =========================================================
   07. Homepage — About JOY
   Editorial Asymmetric Composition
   ========================================================= */

.joy-about__layout {
    display: grid;
    align-items: start;
}


@media (min-width: 1000px) {

    .joy-about__layout {
        width: 100%;
        margin-inline: 0;

        grid-template-columns:
            minmax(0, 480px)
            minmax(0, 440px);

        column-gap: clamp(5rem, 8vw, 8rem);

        justify-content: end;
        align-items: start;
    }

}


.joy-about__media {
    min-width: 0;
    margin: clamp(6rem, 8vw, 8rem) 0 0;
}


.joy-about__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.joy-about__content {
    min-width: 0;
    padding-bottom: var(--joy-space-7);
}

.joy-about__description {
    margin: var(--joy-space-6) 0 0;
    color: var(--joy-color-editorial-secondary);
    font-size: 1rem;
    font-weight: var(--joy-font-weight-regular);
    line-height: 1.7;
}



/* =========================================================
   08. About JOY — Tablet
   ========================================================= */

@media (min-width: 768px) and (max-width: 999px) {

    .joy-about__layout {
        grid-template-columns:
            minmax(0, 0.46fr)
            minmax(0, 0.54fr);
        column-gap: var(--joy-space-6);
    }

    .joy-about__media {
        margin-top: var(--joy-space-9);
    }

    .joy-about__content {
        padding-bottom: var(--joy-space-5);
    }

    .joy-about__description {
        margin-top: var(--joy-space-5);
    }

}


/* =========================================================
   09. About JOY — Mobile
   ========================================================= */

@media (max-width: 767px) {

    .joy-about__layout {
        display: flex;
        flex-direction: column;
        gap: var(--joy-space-6);
    }

    .joy-about__content {
        order: 1;
        padding-bottom: 0;
    }

    .joy-about__media {
        order: 2;
        width: 100%;
        margin: 0;
    }

    .joy-about__description {
        margin-top: var(--joy-space-5);
        line-height: 1.65;
    }

}


/* =========================================================
   10. Homepage — Logo Strip
   Continuous Certification & Membership Marquee
   ========================================================= */

.joy-logo-strip {
    --joy-logo-gap: 4rem;
    --joy-logo-duration: 48s;

    width: 100%;
    padding-block: 2rem;
    overflow: hidden;

    background: var(--joy-color-surface);
}

/* Moving track */

.joy-logo-strip__track {
    display: flex;
    width: max-content;
    align-items: center;

    animation: joy-logo-scroll var(--joy-logo-duration) linear infinite;
    will-change: transform;
}

/* Each repeated group */

.joy-logo-strip__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--joy-logo-gap);

    padding-right: var(--joy-logo-gap);
}

/* Individual logos */

.joy-logo-strip__logo {
    display: block;
    flex: 0 0 auto;

    width: auto;
    height: auto;
    max-width: 240px;
    max-height: 112px;

    object-fit: contain;
}

/* Logo-specific visual balancing */

.joy-logo-strip__logo[src*="oeko-tex-standard-100"],
.joy-logo-strip__logo[src*="oeko-tex-step"] {
    max-height: 105px;
    max-width: 100px;
}

.joy-logo-strip__logo[src*="iso-9001"],
.joy-logo-strip__logo[src*="iso-14001"] {
    max-height: 100px;
    max-width: 110px;
}

.joy-logo-strip__logo[src*="global-recycled-standard"],
.joy-logo-strip__logo[src*="sedex"],
.joy-logo-strip__logo[src*="better-cotton"],
.joy-logo-strip__logo[src*="amfori"],
.joy-logo-strip__logo[src*="zdhc"] {
    max-height: 64px;
    max-width: 220px;
}

/* Continuous leftward movement */

@keyframes joy-logo-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Pause on hover */

@media (hover: hover) {
    .joy-logo-strip:hover .joy-logo-strip__track {
        animation-play-state: paused;
    }
}

/* Tablet */

@media (min-width: 768px) and (max-width: 999px) {

    .joy-logo-strip {
        --joy-logo-gap: 3rem;

        padding-block: 1.75rem;
    }

    .joy-logo-strip__logo {
        max-height: 100px;
    }

}

/* Mobile */

@media (max-width: 767px) {

    .joy-logo-strip {
        --joy-logo-gap: 2.25rem;

        padding-block: 1.25rem;
    }

    .joy-logo-strip__logo {
        max-height: 88px;
        max-width: 190px;
    }

    .joy-logo-strip__logo[src*="oeko-tex-standard-100"],
    .joy-logo-strip__logo[src*="oeko-tex-step"] {
        max-height: 82px;
    }

    .joy-logo-strip__logo[src*="iso-9001"],
    .joy-logo-strip__logo[src*="iso-14001"] {
        max-height: 80px;
    }

    .joy-logo-strip__logo[src*="global-recycled-standard"],
    .joy-logo-strip__logo[src*="sedex"],
    .joy-logo-strip__logo[src*="better-cotton"],
    .joy-logo-strip__logo[src*="amfori"],
    .joy-logo-strip__logo[src*="zdhc"] {
        max-height: 52px;
    }

}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .joy-logo-strip {
        overflow-x: auto;
    }

    .joy-logo-strip__track {
        animation: none;
        will-change: auto;
    }

    .joy-logo-strip__group[aria-hidden="true"] {
        display: none;
    }

}



/* =========================================================
   11. Homepage — Applications
   Editorial Application Selector
   ========================================================= */

.joy-applications__layout {
    display: grid;
    align-items: start;
}

.joy-applications__content,
.joy-applications__selector {
    min-width: 0;
}

/* Left editorial content */

.joy-applications__content {
    max-width: 440px;
}

/* Right application selector */

.joy-applications__items {
    min-width: 0;
}

.joy-applications__item {
    min-width: 0;
}

.joy-applications__heading {
    margin: 0;
}

.joy-applications__trigger {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 3.5rem;

    padding: 1rem 0;

    border: 0;
    border-bottom: 1px solid var(--joy-color-rule);

    background: transparent;
    color: var(--joy-color-editorial-heading);

    font: inherit;
    text-align: left;
    cursor: pointer;

    transition: color 180ms ease;
}

.joy-applications__trigger:hover,
.joy-applications.is-enhanced
.joy-applications__trigger:hover {
    color: var(--joy-color-accent-red);
}

.joy-applications__trigger:focus-visible {
    outline: 2px solid var(--joy-color-brand);
    outline-offset: 4px;
}

/* Placeholder media */

.joy-applications__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.joy-applications__media--workwear {
    background: #DCE3E6;
}

.joy-applications__media--public-safety {
    background: #DDE1D7;
}

.joy-applications__media--outdoor {
    background: #E2E4DB;
}

/* Application description */

.joy-applications__description {
    margin-top: var(--joy-space-5);
}

/* Default: all application content remains readable.
   JS enhancement will control active panel visibility. */

.joy-applications__panel {
    padding-top: var(--joy-space-5);
    padding-bottom: var(--joy-space-6);
}

/* =========================================================
   12. Applications — Desktop
   ========================================================= */

@media (min-width: 1000px) {

    .joy-applications__layout {
        grid-template-columns:
            minmax(0, 440px)
            minmax(0, 1fr);

        column-gap: clamp(5rem, 8vw, 8rem);
    }

}

/* =========================================================
   13. Applications — Tablet
   ========================================================= */

@media (min-width: 768px) and (max-width: 999px) {

    .joy-applications__layout {
        grid-template-columns:
            minmax(0, 0.44fr)
            minmax(0, 0.56fr);

        column-gap: var(--joy-space-6);
    }

}

/* =========================================================
   14. Applications — Mobile
   ========================================================= */

@media (max-width: 767px) {

    .joy-applications__layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--joy-space-6);
    }

    .joy-applications__content {
        max-width: none;
    }

    .joy-applications__description {
        margin-top: var(--joy-space-4);
    }

    .joy-applications__panel {
        padding-top: var(--joy-space-5);
        padding-bottom: var(--joy-space-5);
    }

}

/* =========================================================
   15. Applications — Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .joy-applications__trigger {
        transition: none;
    }

}


/* =========================================================
   16. Applications — Enhanced Interaction
   ========================================================= */

/* Inactive application headings */

.joy-applications.is-enhanced
.joy-applications__trigger {
    color: var(--joy-color-text-muted);
}

/* Active application heading */

.joy-applications.is-enhanced
.joy-applications__item.is-active
.joy-applications__trigger {
    color: var(--joy-color-editorial-heading);
}

/* Panels are moved below the heading list by JS. */

.joy-applications.is-enhanced
.joy-applications__display {
    display: grid;
    min-width: 0;
    margin-top: var(--joy-space-5);
}

/*
 * All panels occupy the same grid cell.
 * Their natural dimensions determine container height,
 * avoiding layout shifts during transitions.
 */

.joy-applications.is-enhanced
.joy-applications__display
.joy-applications__panel {
    grid-area: 1 / 1;

    min-width: 0;
    padding: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 1000ms ease,
        visibility 1000ms;
}

.joy-applications.is-enhanced
.joy-applications__display
.joy-applications__panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Preserve description spacing. */

.joy-applications.is-enhanced
.joy-applications__description {
    margin-top: var(--joy-space-5);
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .joy-applications.is-enhanced
    .joy-applications__display
    .joy-applications__panel {
        transition: none;
    }

}

@media (max-width: 767px) {
    .joy-applications.is-enhanced
    .joy-applications__description {
        margin-top: var(--joy-space-4);
    }
}


/* =========================================================
   Homepage Applications — Real Images
   ========================================================= */

.joy-applications__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



/* =========================================================
   17. Homepage — Technical Expertise
   Centered Editorial Background Section
   ========================================================= */

.joy-home-technical {
    background-color: #E7E9EC;
}

/* Content alignment */

.joy-home-technical__content {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 760px;
    margin-inline: auto;

    text-align: center;
}

/* Introduction width */

.joy-home-technical__content .joy-section__intro {
    max-width: 660px;
}

/* CTA alignment */

.joy-home-technical__actions {
    justify-content: center;
}

/* =========================================================
   18. Technical Expertise — Tablet
   ========================================================= */

@media (min-width: 768px) and (max-width: 999px) {

    .joy-home-technical__content {
        max-width: 680px;
    }

}

/* =========================================================
   19. Technical Expertise — Mobile
   ========================================================= */

@media (max-width: 767px) {

    .joy-home-technical__content {
        max-width: 100%;
    }

}



/* =========================================================
   20. Homepage — Capabilities
   Editorial Image & Bottom-Aligned Content
   ========================================================= */

.joy-capabilities__layout {
    display: grid;
    min-width: 0;
}

.joy-capabilities__media {
    min-width: 0;
    margin: 0;
    overflow: hidden;
}

.joy-capabilities__placeholder,
.joy-capabilities__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
}

.joy-capabilities__placeholder {
    background-color: #DCE0E2;
}

.joy-capabilities__image {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.joy-capabilities__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
}

/* =========================================================
   21. Capabilities — Desktop
   ========================================================= */

@media (min-width: 1000px) {

    .joy-capabilities__layout {
        grid-template-columns:
            minmax(0, 0.44fr)
            minmax(0, 0.56fr);

        column-gap: clamp(5rem, 8vw, 8rem);

        align-items: stretch;
    }

    .joy-capabilities__media {
        width: 100%;
        max-width: 520px;
    }

    .joy-capabilities__content {
        max-width: 540px;
    }

}

/* =========================================================
   22. Capabilities — Tablet
   ========================================================= */

@media (min-width: 768px) and (max-width: 999px) {

    .joy-capabilities__layout {
        grid-template-columns:
            minmax(0, 0.44fr)
            minmax(0, 0.56fr);

        column-gap: var(--joy-space-6);
        align-items: stretch;
    }

}

/* =========================================================
   23. Capabilities — Mobile
   ========================================================= */

@media (max-width: 767px) {

    .joy-capabilities__layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--joy-space-6);
    }

    .joy-capabilities__media {
        width: 100%;
    }

    .joy-capabilities__placeholder,
    .joy-capabilities__image {
        aspect-ratio: 4 / 3;
    }

    .joy-capabilities__content {
        justify-content: flex-start;
    }

}


/* =========================================================
   24. Homepage — Final CTA
   Two-Column Conversion Section
   Authentic Fabric Photography Background
   ========================================================= */

.joy-home-final-cta {
    min-height: 420px;

    background-color: #182345;
    background-image:
        linear-gradient(
            rgba(10, 18, 43, 0.62),
            rgba(10, 18, 43, 0.62)
        ),
        url("/wp-content/uploads/2026/10/joy-tex-functional-fabric-close-up.avif");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.joy-home-final-cta__content {
    max-width: 800px;
    margin-inline: auto;
}

.joy-home-final-cta__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    align-items: start;
}

.joy-home-final-cta__heading,
.joy-home-final-cta__details {
    min-width: 0;
}

/* Align the first lines of both columns */

.joy-home-final-cta__details .joy-section__intro {
    margin-top: 0;
}

/* =========================================================
   25. Final CTA — Tablet
   ========================================================= */

@media (min-width: 768px) and (max-width: 999px) {

    .joy-home-final-cta {
        min-height: 380px;
    }

    .joy-home-final-cta__layout {
        column-gap: 32px;
    }

}

/* =========================================================
   26. Final CTA — Mobile
   ========================================================= */

@media (max-width: 767px) {

    .joy-home-final-cta {
        min-height: 420px;
    }

    .joy-home-final-cta__layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

}

/* =========================================================
   27. Final CTA — Photographic Treatment
   ========================================================= */

/* Fixed background on desktop only */

@media (min-width: 1000px) {

    .joy-home-final-cta {
        background-attachment: fixed;
    }

}