/**
 * 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;
}

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

/* Match the editorial heading-to-intro rhythm used by H03. */
.joy-fabric-ranges__intro {
    margin-top: var(--joy-space-6);
}

/* =========================================================
   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.58fr)
            minmax(0, 0.42fr);
        grid-template-rows: auto auto;
        row-gap: 2rem;
        align-items: start;
    }

    .joy-fabric-ranges.is-enhanced
    .joy-fabric-ranges__header {
        grid-column: 1;
        grid-row: 1;
    }

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

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

    .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 {
        grid-column: 2;
        grid-row: 2;
        display: grid;
        gap: 1.5rem;
        margin-top: 1.1rem;
    }

    .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__intro {
        margin-top: var(--joy-space-5);
    }

    .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
   Responsive Two-Column Layout
   ========================================================= */

.joy-about__layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.42fr)
        minmax(0, 0.58fr);
    align-items: start;
}

.joy-about__media {
    min-width: 0;
    margin: 0;
}

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

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

.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);
    }

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

}

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

@media (max-width: 767px) {

    .joy-about__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .joy-about__content {
        grid-row: 1;
    }

    .joy-about__media {
        grid-row: 2;
        width: 100%;
    }

    .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;
    display: block;
    width: 100%;
    padding-block: 2rem;
    overflow: hidden;

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

/* Entire logo strip is a navigational link. */

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

/* Moving track */

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

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

.joy-logo-strip.is-ready .joy-logo-strip__track {
    animation-play-state: running;
}

/* 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: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(
            calc(-1 * var(--joy-logo-loop-distance, 0px)),
            0,
            0
        );
    }
}

/* 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;
        --joy-logo-duration: 32s;
        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: var(--joy-space-3) 0 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);

    }

}

/* =========================================================
   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);

    }

}

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

@media (max-width: 767px) {

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

    .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;
}

/* The description stays immediately below its own H3. */

.joy-applications.is-enhanced
.joy-applications__description {
    display: none;
    margin: var(--joy-space-3) 0 var(--joy-space-5);
}

.joy-applications.is-enhanced
.joy-applications__item.is-active
.joy-applications__description {
    display: block;
}

/* 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-bottom: var(--joy-space-4);
    }
}


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

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



/* =========================================================
   Homepage — Capabilities
   Centered Header / Four Capability Icons / CTA
   ========================================================= */

/* Section Header */

.joy-capabilities__header {
    text-align: center;
}

.joy-capabilities__header .joy-section__intro {
    max-width: 760px;
    margin-inline: auto;
}

/* Capability Grid */

.joy-capabilities__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--joy-space-6);
    row-gap: var(--joy-space-7);
    align-items: start;

    margin-top: var(--joy-space-8);
}

/* Individual Capability */

.joy-capabilities__item {
    min-width: 0;
    text-align: center;
}

/* SVG Icon */

.joy-capabilities__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--joy-space-5);

    color: var(--joy-color-brand);
}

.joy-capabilities__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Description */

.joy-capabilities__item .joy-content-description {
    max-width: 23rem;
    margin-inline: auto;
}

/* CTA */

.joy-capabilities__actions {
    justify-content: center;
    margin-top: var(--joy-space-6);
}

/* Tablet */

@media (min-width: 768px) and (max-width: 999px) {
    .joy-capabilities__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--joy-space-7);
    }
}

/* Mobile */

@media (max-width: 767px) {
    .joy-capabilities__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--joy-space-7);
    }

    .joy-capabilities__icon {
        width: 4.5rem;
        height: 4.5rem;
    }

    .joy-capabilities__item .joy-content-description {
        max-width: 23rem;
    }
}


/* =========================================================
   Homepage — Final CTA Background Configuration
   Shared layout: components/final-cta.css
   ========================================================= */

.joy-final-cta--home {
    --joy-final-cta-image: url("/wp-content/uploads/2026/10/joy-tex-automated-dye-dosing-system.avif");
    --joy-final-cta-overlay: rgba(10, 18, 43, 0.62);
}

@media (max-width: 767px) {
    .joy-final-cta--home {
        --joy-final-cta-overlay: rgba(10, 18, 43, 0.68);
    }
}