/*
 * Meridian — Homepage & Lookbook CSS
 *
 * Covers: hero animations, category tile hover effects, editorial strip layout,
 * brand story section, lookbook spread layout, newsletter form (dark bg),
 * and homepage-specific typographic polish.
 */

/* =========================================================================
 * Hero section
 * ====================================================================== */

.hero-section {
        position: relative;
        overflow: hidden;
}

/* Mobile: reduce hero height to 80vh (inline style uses 100vh — needs !important) */
@media (max-width: 600px) {
        .hero-section.wp-block-cover {
                min-height: 80vh !important;
        }
}

/* Animate hero text in on page load */
.hero-section .wp-block-cover__inner-container > .wp-block-group {
        animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: 0.15s;
}

@keyframes heroFadeUp {
        from {
                opacity: 0;
                transform: translateY(24px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}

/* Eyebrow text */
.hero-eyebrow {
        display: inline-block;
        font-size: var(--wp--preset--font-size--xs);
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
}

/* Inner hero group padding */
.hero-inner {
        padding-top: var(--wp--preset--spacing--96);
        padding-bottom: var(--wp--preset--spacing--96);
}

/* Hero h1 */
.hero-heading {
        margin-top: var(--wp--preset--spacing--16) !important;
        margin-bottom: var(--wp--preset--spacing--32) !important;
        letter-spacing: -0.02em;
        line-height: 1.0;
}

/* Hero subheading */
.hero-subtext {
        margin-bottom: var(--wp--preset--spacing--48) !important;
}

/* Outline CTA border colour */
.hero-cta-secondary .wp-block-button__link {
        border-color: var(--wp--preset--color--surface) !important;
}

/* Hero CTA buttons */
.hero-cta-primary .wp-block-button__link {
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--sm);
        font-weight: 500;
        letter-spacing: 0.04em;
        padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--48);
        transition:
                background-color var(--wp--custom--transition--base),
                color var(--wp--custom--transition--base),
                box-shadow var(--wp--custom--transition--base);
}

.hero-cta-primary .wp-block-button__link:hover {
        box-shadow: 0 4px 16px rgba(15, 15, 15, 0.2);
}

.hero-cta-secondary .wp-block-button__link {
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--sm);
        font-weight: 500;
        letter-spacing: 0.04em;
        padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--48);
}

/* =========================================================================
 * Category tiles
 * ====================================================================== */

.section-categories .wp-block-columns {
        margin: 0;
}

.category-tile {
        overflow: hidden;
        cursor: pointer;
}

/* Zoom bg image on hover */
.category-tile .wp-block-cover__image-background {
        transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: center center;
}

.category-tile:hover .wp-block-cover__image-background {
        transform: scale(1.06);
}

/* Darken overlay on hover */
.category-tile:hover .wp-block-cover__background {
        opacity: 0.45 !important;
        transition: opacity 0.4s ease;
}

/* Category tile link — underline reveal on hover */
.category-tile__link {
        color: var(--wp--preset--color--neutral-200);
        text-decoration: none;
        position: relative;
        transition: color var(--wp--custom--transition--base);
}

.category-tile__link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 1px;
        background-color: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--wp--custom--transition--smooth);
}

.category-tile:hover .category-tile__link::after {
        transform: scaleX(1);
}

/* =========================================================================
 * WooCommerce Product Categories block — full-bleed overlay tile style
 * Applied via class="category-showcase-block" on the block.
 * Category images are set in WooCommerce → Products → Categories.
 * ====================================================================== */

/* Grid lives on the <ul> WC renders, not the outer block <div> */
.category-showcase-block .wc-block-product-categories-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem; /* fixed — avoids spacing-24 resolving to ~114px */
}

.category-showcase-block .wc-block-product-categories-list-item {
        position: relative;
        overflow: hidden;
        height: 460px; /* explicit height — definite for all CSS percentage calcs */
        margin: 0;    /* override WC's margin: 4px 0 4px 60px (60px left indent) */
        border-radius: var(--wp--custom--radius--lg);
        display: block;
        cursor: pointer;
}

/* position:absolute fills the li directly — avoids height:100% cascade
   failing when li only has min-height (not an explicit height) */
.category-showcase-block .wc-block-product-categories-list-item a {
        position: absolute;
        inset: 0;
        text-decoration: none;
        color: inherit;
}

/* WC wraps <img> in <span class="...__image"> — stretch the span to fill
   the tile so the image's position:absolute resolves against it correctly.
   WooCommerce's block CSS constrains this span to max-width:50px and
   applies margin: 0 8.5px 0 -60px — we must reset all of these. */
.category-showcase-block .wc-block-product-categories-list-item__image {
        position: absolute;
        inset: 0;
        width: auto;      /* let left:0+right:0 (inset) determine the width */
        height: auto;     /* let top:0+bottom:0 (inset) determine the height */
        max-width: none;  /* override WC's max-width:50px */
        max-height: none; /* override any WC height constraint */
        margin: 0;        /* override WC's -60px left margin */
        display: block;
        overflow: hidden;
        z-index: 0;
}

/* Category image — fills tile */
.category-showcase-block .wc-block-product-categories-list-item__image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: center center;
}

.category-showcase-block .wc-block-product-categories-list-item:hover img {
        transform: scale(1.06);
}

/* Bottom gradient overlay */
.category-showcase-block .wc-block-product-categories-list-item a::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
                to top,
                rgba(15, 15, 15, 0.55) 0%,
                rgba(15, 15, 15, 0.25) 40%,
                transparent 70%
        );
        z-index: 1;
        transition: background 0.4s ease;
}

.category-showcase-block .wc-block-product-categories-list-item:hover a::after {
        background: linear-gradient(
                to top,
                rgba(15, 15, 15, 0.68) 0%,
                rgba(15, 15, 15, 0.35) 40%,
                transparent 70%
        );
}

/* Category name — positioned bottom-left over overlay */
.category-showcase-block .wc-block-product-categories-list-item__name {
        position: absolute;
        bottom: var(--wp--preset--spacing--48);
        left: var(--wp--preset--spacing--40);
        right: var(--wp--preset--spacing--40);
        z-index: 2;
        font-family: var(--wp--preset--font-family--heading);
        font-size: var(--wp--preset--font-size--2xl);
        font-weight: 400;
        letter-spacing: -0.015em;
        line-height: 1.2;
        color: var(--wp--preset--color--surface);
}

/* "Shop Now" prompt — fades in on hover */
.category-showcase-block .wc-block-product-categories-list-item a::before {
        content: 'Shop Now →';
        position: absolute;
        bottom: var(--wp--preset--spacing--32);
        left: var(--wp--preset--spacing--40);
        z-index: 2;
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--sm);
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--wp--preset--color--neutral-200);
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.3s ease, transform 0.3s ease;
}

.category-showcase-block .wc-block-product-categories-list-item:hover a::before {
        opacity: 1;
        transform: translateY(0);
}

/* Responsive: 2-col tablet, 1-col mobile */
@media (max-width: 900px) {
        .category-showcase-block .wc-block-product-categories-list {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 600px) {
        .category-showcase-block .wc-block-product-categories-list {
                grid-template-columns: 1fr;
        }

        .category-showcase-block .wc-block-product-categories-list-item {
                height: 320px;
        }
}

/* =========================================================================
 * Featured products section (homepage variant — parchment bg)
 * ====================================================================== */

.section-featured-products .wp-block-woocommerce-product-collection {
        background-color: transparent;
}

/* 4-column override for homepage (blocks.css sets 3-col default) */
.section-featured-products .wp-block-woocommerce-product-collection {
        grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
        .section-featured-products .wp-block-woocommerce-product-collection {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 600px) {
        .section-featured-products .wp-block-woocommerce-product-collection {
                grid-template-columns: repeat(2, 1fr);
        }
}

/* =========================================================================
 * Editorial strip (full-bleed cover with text panel)
 * ====================================================================== */

.editorial-strip {
        overflow: hidden;
}

.editorial-strip .wp-block-cover__image-background {
        transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.editorial-strip:hover .wp-block-cover__image-background {
        transform: scale(1.03);
}

.editorial-strip__text {
        max-width: 480px;
        margin-left: auto;
}

@media (max-width: 768px) {
        .editorial-strip {
                min-height: 480px !important;
        }

        .editorial-strip__text {
                max-width: 100%;
                margin-left: 0;
                padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--24) !important;
        }
}

/* =========================================================================
 * Brand story section
 * ====================================================================== */

.brand-story__image-col {
        position: relative;
}

@media (min-width: 768px) {
        .brand-story__image-col {
                position: sticky;
                top: calc(72px + var(--wp--preset--spacing--24));
                align-self: flex-start;
        }
}

.brand-story__image img {
        display: block;
        width: 100%;
}

.brand-story__stats {
        display: flex;
        flex-wrap: wrap;
        gap: var(--wp--preset--spacing--48);
}

/* =========================================================================
 * Homepage newsletter form (dark background variant)
 * ====================================================================== */

.homepage-newsletter {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
}

.homepage-newsletter .homepage-newsletter__row {
        display: flex;
        border: 1px solid var(--wp--preset--color--neutral-700);
        background-color: rgba(255, 255, 255, 0.05);
        transition: border-color var(--wp--custom--transition--base);
}

.homepage-newsletter .homepage-newsletter__row:focus-within {
        border-color: var(--wp--preset--color--neutral-400);
}

.homepage-newsletter input[type="email"] {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--md);
        color: var(--wp--preset--color--surface);
        padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
}

.homepage-newsletter input[type="email"]::placeholder {
        color: var(--wp--preset--color--neutral-600);
}

.homepage-newsletter button[type="submit"] {
        background: var(--wp--preset--color--accent);
        border: none;
        border-left: 1px solid var(--wp--preset--color--neutral-700);
        cursor: pointer;
        font-family: var(--wp--preset--font-family--body);
        font-size: var(--wp--preset--font-size--sm);
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--wp--preset--color--surface);
        padding: 0 var(--wp--preset--spacing--32);
        white-space: nowrap;
        transition: background-color var(--wp--custom--transition--base);
        flex-shrink: 0;
}

.homepage-newsletter button[type="submit"]:hover {
        background-color: var(--wp--preset--color--accent-deep);
}

.homepage-newsletter .homepage-newsletter__note {
        font-size: var(--wp--preset--font-size--xs);
        color: var(--wp--preset--color--neutral-600);
        margin-top: var(--wp--preset--spacing--12);
        text-align: center;
}

/* =========================================================================
 * Lookbook template
 * ====================================================================== */

.lookbook-opener {
        overflow: hidden;
}

/* Editorial spreads — flush full-bleed columns */
.lookbook-spread .wp-block-columns {
        margin: 0;
        gap: 0 !important;
}

.lookbook-spread__image-col {
        overflow: hidden;
        padding: 0 !important;
}

.lookbook-spread__cover {
        width: 100%;
        height: 100% !important;
        min-height: 600px;
}

.lookbook-spread__cover .wp-block-cover__image-background {
        transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.lookbook-spread:hover .lookbook-spread__cover .wp-block-cover__image-background {
        transform: scale(1.04);
}

/* Pull quote */
.lookbook-pullquote {
        text-align: center;
        border: none !important;
        padding: 0 !important;
}

.lookbook-pullquote p {
        position: relative;
}

.lookbook-pullquote p::before {
        content: '\201C';
        font-family: var(--wp--preset--font-family--heading);
        font-size: 5rem;
        line-height: 0;
        vertical-align: -0.5em;
        color: var(--wp--preset--color--neutral-200);
        margin-right: 0.1em;
}

.lookbook-pullquote cite {
        display: block;
        margin-top: var(--wp--preset--spacing--24);
}

/* Lookbook product cards — larger, editorial */
.lookbook-products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--wp--preset--spacing--48) var(--wp--preset--spacing--48) !important;
}

.lookbook-product-card .wp-block-woocommerce-product-image {
        overflow: hidden;
}

.lookbook-product-card .wp-block-woocommerce-product-image img {
        transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.lookbook-product-card:hover .wp-block-woocommerce-product-image img {
        transform: scale(1.04);
}

/* Mobile — stack lookbook spreads */
@media (max-width: 768px) {
        .lookbook-spread .wp-block-columns {
                flex-direction: column !important;
        }

        .lookbook-spread .wp-block-column {
                width: 100% !important;
                flex-basis: 100% !important;
        }

        .lookbook-products {
                grid-template-columns: 1fr !important;
        }
}

/* =========================================================================
 * Featured products — horizontal scroll on mobile (3-up on desktop)
 *
 * .featured-products-scroll applies to the outer Product Collection wrapper.
 * On desktop: flex 3-column grid (WooCommerce block handles columns:3).
 * On mobile: overflow-x scroll so all 3 cards are accessible without
 * collapsing to a stacked single-column that loses the row context.
 * ====================================================================== */

@media (max-width: 600px) {
        /* WooCommerce renders the product list inside .wc-block-product-template —
           NOT .wp-block-woocommerce-product-template (that is the outer block wrapper) */
        .featured-products-scroll .wc-block-product-template {
                display: flex !important;
                flex-wrap: nowrap !important;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                gap: var(--wp--preset--spacing--32);
                padding-bottom: var(--wp--preset--spacing--16);
        }

        .featured-products-scroll .wc-block-product-template > li {
                flex: 0 0 72%;
                scroll-snap-align: start;
        }
}

/* =========================================================================
 * Lookbook inline "Shop This Look" product card
 *
 * .lookbook-shop-this-look — the bordered container within each spread's
 * text column that separates editorial copy from the product inset.
 * .lookbook-product-inset — horizontal flex: 72px thumbnail + info stack.
 * .lookbook-atc-btn — minimal ATC button, matches outline style.
 * ====================================================================== */

.lookbook-shop-this-look {
        background-color: transparent;
}

.lookbook-inline-product {
        width: 100%;
}

.lookbook-product-inset {
        display: flex;
        align-items: center;
        gap: 0;
        width: 100%;
}

.lookbook-product-inset .wp-block-woocommerce-product-image {
        flex: 0 0 72px;
        width: 72px !important;
        border-radius: var(--wp--custom--border-radius--sm, 4px);
        overflow: hidden;
}

.lookbook-product-inset .wp-block-woocommerce-product-image img {
        width: 72px;
        height: 72px;
        object-fit: cover;
        display: block;
}

.lookbook-product-inset__info {
        flex: 1;
        min-width: 0;
}

.lookbook-product-inset__info .wp-block-post-title {
        margin: 0 0 var(--wp--preset--spacing--4, 4px) !important;
        font-size: var(--wp--preset--font-size--sm) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.lookbook-product-inset__info .wp-block-woocommerce-product-price {
        margin: 0 0 var(--wp--preset--spacing--12, 8px) !important;
        font-size: var(--wp--preset--font-size--sm) !important;
}

/* ATC button — compact, full width, matches the outline style */
.lookbook-atc-btn .wp-block-button__link,
.lookbook-product-inset__info .wp-block-woocommerce-product-button .wp-block-button__link {
        font-size: var(--wp--preset--font-size--xs) !important;
        padding: var(--wp--preset--spacing--8, 6px) var(--wp--preset--spacing--16, 12px) !important;
        letter-spacing: 0.04em;
        width: 100%;
        text-align: center;
}