/*
 * DS Home VibeEngine – mobile-first layout styles
 *
 * Sections:
 *  - .ds-home-vibe-layout
 *  - .ds-home-hero
 *  - .ds-home-trinity
 *  - .ds-home-carousel
 *  - .ds-home-discovery
 */

.ds-home-vibe-layout {
    margin: 0;
    padding: 0;
    color: inherit;
}

/*
 * Hero
 */
.ds-home-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ds-home-hero-slides {
    display: flex;
    flex-direction: column;
}

.ds-home-hero-slide {
    display: block;
    position: relative;
}

.ds-home-hero-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Lazy hero images: fade in once loaded to avoid harsh pop-in */
.ds-home-hero-img--lazy {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.ds-home-hero-img--lazy.is-loaded {
    opacity: 1;
}

.ds-home-hero-caption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    right: 16px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.ds-home-hero-heading {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

/*
 * Trinity Grid – mobile-first: stacked items
 */
.ds-home-trinity {
    /* Base padding; top/bottom will be adjusted on scroll via
     * --ds-shrink-progress for a subtle "shrink" effect. */
    --ds-shrink-progress: 0;
    padding: 32px 16px 16px;
    padding-top: calc(32px - 16px * var(--ds-shrink-progress, 0));
    padding-bottom: calc(16px - 8px * var(--ds-shrink-progress, 0));
    transition: padding 0.18s ease-out;
}

.ds-home-trinity-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
}

.ds-home-trinity-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ds-home-trinity-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
}

.ds-home-trinity-label {
    margin-top: 8px;
    font-size: 0.95rem;
    font-weight: 500;
}

/*
 * Product Carousel – horizontal scroll on mobile
 */
.ds-home-carousel {
    /* Base padding; top/bottom will be adjusted on scroll. */
    --ds-shrink-progress: 0;
    padding: 24px 0 16px;
    padding-top: calc(24px - 10px * var(--ds-shrink-progress, 0));
    padding-bottom: calc(16px - 6px * var(--ds-shrink-progress, 0));
    transition: padding 0.18s ease-out;
}

.ds-home-carousel-header {
    padding: 0 16px 8px;
}

.ds-home-carousel-title {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
}

.ds-home-carousel-track {
    overflow-x: auto;
    /* Let the track sit flush inside the section container */
    padding: 0;
}

.ds-home-carousel-list {
    display: flex;
    flex-wrap: nowrap;
    /* Reset list styling so no bullets/dots appear before slides */
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 0;
}

.ds-home-carousel-item {
    /* Mobile: show roughly 2.5 products in view */
    flex: 0 0 40%;
    margin: 0 12px 0 0;
}

/* Ensure no theme bullets or markers appear for carousel items */
.ds-home-carousel-list li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.ds-home-carousel-list li::marker,
.ds-home-carousel-list li::before {
    content: none;
}

.ds-home-carousel-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ds-home-carousel-meta {
    margin-top: 6px;
    font-size: 0.9rem;
}

.ds-home-carousel-name {
    margin: 8px 0 2px;
}

.ds-home-carousel-price {
    margin: 0;
    font-weight: 500;
}

/*
 * Discovery – last section
 */
.ds-home-discovery {
    /* Base padding; top/bottom will be adjusted on scroll. */
    --ds-shrink-progress: 0;
    padding: 32px 16px 40px;
    padding-top: calc(32px - 16px * var(--ds-shrink-progress, 0));
    padding-bottom: calc(40px - 16px * var(--ds-shrink-progress, 0));
    transition: padding 0.18s ease-out;
}

.ds-home-discovery-inner {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* When multiple discovery items are present, stack them with comfortable spacing. */
.ds-home-discovery-inner + .ds-home-discovery-inner {
    margin-top: 24px;
}

.ds-home-discovery-media {
    margin-bottom: 16px;
}

.ds-home-discovery-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.ds-home-discovery-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

.ds-home-discovery-headline {
    margin: 0 0 8px;
    font-size: 1.3rem;
}

.ds-home-discovery-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/*
 * Scroll shrink – per-item scale
 *
 * Each logical block (trinity item, carousel card, magazine tile,
 * discovery item) can shrink by up to ~30% as its top approaches
 * the top of the viewport. The custom property is driven by
 * ds-home-scroll-shrink.js.
 */
.ds-home-trinity-item,
.ds-home-carousel-item,
.ds-magazine-item,
.ds-home-discovery-inner {
    --ds-shrink-progress: 0;
    transform-origin: center top;
    /* Shrink up to ~10% as the item approaches the shrink window */
    transform: scale(calc(1 - 0.1 * var(--ds-shrink-progress, 0)));
    transition: transform 0.18s ease-out;
}

/*
 * Shop The Look – Magazine Grid
 */

.ds-home-shop-look {
    /* Base padding; top/bottom will be adjusted on scroll. */
    --ds-shrink-progress: 0;
    padding: 32px 16px 24px;
    padding-top: calc(32px - 16px * var(--ds-shrink-progress, 0));
    padding-bottom: calc(24px - 10px * var(--ds-shrink-progress, 0));
    transition: padding 0.18s ease-out;
}

.ds-home-shop-look-header {
    margin-bottom: 16px;
}

.ds-home-shop-look-title {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
}

.ds-magazine-grid {
    display: grid;
    /* Mobile-first: 2 columns per row */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 260px; /* base cell height; size-* classes span these */
    /* Let the grid back-fill gaps caused by spanning items so tiles
     * pack tightly regardless of sequence (masonry-like effect). */
    grid-auto-flow: row dense;
    grid-gap: 20px;
}

.ds-magazine-item {
    position: relative;
}

.ds-magazine-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.ds-magazine-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Size modifiers – control how many grid cells each item spans */
.ds-magazine-item.size-large {
    grid-column: span 2;
    grid-row: span 2;
}

.ds-magazine-item.size-tall {
    grid-column: span 1;
    grid-row: span 2;
}

.ds-magazine-item.size-landscape {
    grid-column: span 2;
    grid-row: span 1;
}

.ds-magazine-item.size-regular {
    grid-column: span 1;
    grid-row: span 1;
}

/* Hotspots overlay */
.ds-magazine-hotspots {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; /* hotspots themselves re-enable interactions */
}

.ds-magazine-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    pointer-events: auto;
}

.ds-magazine-hotspot:focus {
    outline: none;
}

.ds-magazine-hotspot-dot {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.ds-magazine-hotspot-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    transform: translate(-50%, -50%);
    opacity: 0.85;
    animation: ds-magazine-pulse 1.4s ease-out infinite;
}

@keyframes ds-magazine-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* Tooltip (hidden by default, toggled via JS) */
.ds-magazine-tooltip {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(16px, -50%);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.ds-magazine-hotspot.is-active .ds-magazine-tooltip,
.ds-magazine-hotspot:hover .ds-magazine-tooltip {
    opacity: 1;
    pointer-events: auto;
}

/* Flip tooltip to the left when near the right edge */
.ds-magazine-hotspot.align-left .ds-magazine-tooltip {
    left: auto;
    right: 100%;
    transform: translate(-16px, -50%);
}

.ds-magazine-tooltip-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    max-width: 240px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.ds-magazine-tooltip-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ds-magazine-tooltip-link:hover .ds-magazine-tooltip-title {
    text-decoration: underline;
}

.ds-magazine-tooltip-thumb img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
}

.ds-magazine-tooltip-title {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    font-family: "Tiempos Headline", serif;
}

.ds-magazine-tooltip-price {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 500;
}

/*
 * Tablet and up – enhance layout
 */
@media (min-width: 768px) {
    .ds-home-hero-slides {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .ds-home-hero-slide {
        flex: 1 0 100%;
    }

    .ds-home-trinity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ds-magazine-grid {
        /* Tablet: 3 columns */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 320px;
    }

    .ds-home-carousel-item {
        /* Tablet: show roughly 3.5 products in view */
        flex: 0 0 28.5%;
    }

    /* Desktop: 4-column magazine grid */
    @media (min-width: 1200px) {
        .ds-magazine-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        /* Desktop: show roughly 4.5 products in view */
        .ds-home-carousel-item {
            flex: 0 0 22%;
        }
    }

    /* On tablet/desktop, lay out discovery media + text side-by-side
     * within the clickable/link wrapper so the body can fill remaining
     * horizontal space instead of starting on a new line.
     */
    .ds-home-discovery-link {
        display: flex;
        gap: 24px;
        align-items: center;
    }

    /* Modifier: place media on the right-hand side on larger screens. */
    .ds-home-discovery-inner--media-right .ds-home-discovery-link {
        flex-direction: row-reverse;
    }

    .ds-home-discovery-media,
    .ds-home-discovery-body {
        flex: 1 1 0;
    }
}

/*
 * Align DS Home hero with fixed nav bar (mirror Product Tag behaviour)
 */

/* Let the hero go full-bleed horizontally on larger screens so it can
   sit visually behind the fixed nav bar, while other content remains
   within the usual layout width. */
@media screen and (min-width: 768px) {
    body.home .ds-home-hero {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/* Ensure the main content wrapper starts flush under the fixed nav bar
   on the homepage, so the hero section aligns at the very top. */
body.home div.site-container > div.site-inner {
    padding-top: 0;
}

/* When the admin bar is present, remove the default top margin so the
   hero can extend all the way up behind the transparent nav bar. */
body.home.admin-bar .site-container {
    margin-top: 0;
}

/* Remove generic header spacer on homepage so the hero sits directly
   behind the fixed nav bar (transparent at top). */
body.home #header-padding {
    margin-bottom: 0;
}

/* Start the home page with a transparent fixed nav bar so the hero
   image is visible behind it across breakpoints. Scroll/interaction
   behaviour (adding .ds-scrolled) is handled by DS-menu.js. */
body.home #ds-fixed-nav-bar {
    background-color: transparent;
}