/*
 * MageOS Blog Hyvä Yoga portfolio band — scoped under .hyva-yoga.
 * Accent colours follow Hyvä design tokens (--color-primary). Merchant themes
 * override those tokens (e.g. brand pink); the module itself ships no brand hue.
 */

.hyva-yoga {
    --hyva-yoga-accent: var(--color-primary);
    --hyva-yoga-accent-soft: color-mix(in srgb, var(--color-primary) 14%, white);
    --hyva-yoga-ink: #1a1a1a;
    --hyva-yoga-muted: #666;
    --hyva-yoga-border: rgba(0, 0, 0, 0.08);
    /* Keep in sync with .hyva-yoga__band tracks + gap (desktop peeks). */
    --hyva-yoga-rail-left: 180px;
    --hyva-yoga-rail-right: 240px;
    --hyva-yoga-band-gap: 1rem;
    --hyva-yoga-section-pad-x: 1rem;
    color: var(--hyva-yoga-ink);
    /* Full main column — match .hyva-yoga-blog (no 1120px centered cap). */
    max-width: none;
    margin: 0;
    padding: 1rem var(--hyva-yoga-section-pad-x) 2.5rem;
}

/*
 * Clip page-level horizontal overflow from the desktop full-bleed peeks
 * (left/right: calc(50% - 50vw)). On browsers where vw includes the
 * scrollbar gutter, that breakout is ~8–15px wider than the layout
 * viewport and otherwise introduces a page scrollbar.
 *
 * MUST live on body (viewport-sized), NOT on .hyva-yoga / .hyva-yoga__stage:
 * those boxes are narrower than the viewport, so overflow-x there would
 * clip the peeks and kill the WP-style edge-to-hero effect.
 */
body:has(.hyva-yoga) {
    overflow-x: clip;
}

/* Stage wraps band + desktop prev/next peeks (edge → carousel). */
.hyva-yoga__stage {
    position: relative;
}

.hyva-yoga__peeks {
    display: none;
}

.hyva-yoga__band {
    display: grid;
    grid-template-columns: minmax(140px, var(--hyva-yoga-rail-left)) minmax(0, 1fr) minmax(200px, var(--hyva-yoga-rail-right));
    gap: var(--hyva-yoga-band-gap);
    /* Side rails stretch to hero height; hero itself does not stretch. */
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.hyva-yoga__left {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    min-width: 0;
}

.hyva-yoga__left-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    padding: 1rem;
    background: var(--hyva-yoga-accent);
    color: var(--color-on-primary, #fff);
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0.25rem;
    transition: filter 0.15s ease;
}

.hyva-yoga__left-tile:hover {
    filter: brightness(1.05);
    text-decoration: none;
    color: var(--color-on-primary, #fff);
}

.hyva-yoga__left-tile--disabled {
    opacity: 0.85;
    cursor: default;
}

.hyva-yoga__hero {
    position: relative;
    min-width: 0;
    width: 100%;
    background: #111;
    border-radius: 0.25rem;
    overflow: hidden;
    /* Height follows the aspect-ratio viewport, not the right-rail stack. */
    align-self: start;
}

.hyva-yoga__hero-viewport {
    position: relative;
    aspect-ratio: 790 / 530;
    background: #111;
}

.hyva-yoga__slide {
    margin: 0;
    position: absolute;
    inset: 0;
}

.hyva-yoga__slide-media {
    display: block;
    width: 100%;
    height: 100%;
}

.hyva-yoga__slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hyva-yoga__slide-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem 1.5rem 2.75rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
    color: #fff;
}

.hyva-yoga__slide-title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.hyva-yoga__slide-desc {
    font-size: 0.95rem;
    line-height: 1.45;
    opacity: 0.95;
}

.hyva-yoga__slide-cta {
    display: inline-block;
    margin-top: 0.5rem;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hyva-yoga__hero-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    z-index: 2;
}

.hyva-yoga__hero-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.hyva-yoga__hero-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.hyva-yoga__hero-dots {
    display: flex;
    gap: 0.4rem;
}

.hyva-yoga__hero-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0;
}

.hyva-yoga__hero-dot.is-active {
    background: var(--hyva-yoga-accent);
}

.hyva-yoga__right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    min-width: 0;
}

.hyva-yoga__right-tile {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 0.15rem;
    text-decoration: none;
    color: inherit;
    background: transparent;
}

.hyva-yoga__right-tile:hover {
    text-decoration: none;
    color: inherit;
}

.hyva-yoga__right-tile:hover .hyva-yoga__right-info {
    background: color-mix(in srgb, var(--hyva-yoga-right-caption-bg, #e276dc) 88%, black);
}

.hyva-yoga__right-tile--disabled {
    cursor: default;
    opacity: 0.95;
}

.hyva-yoga__right-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 225 / 120;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.hyva-yoga__right-info {
    /* WP portfolio caption pink (#e276dc) — theme --color-primary-lighter */
    --hyva-yoga-right-caption-bg: var(--color-primary-lighter, #e276dc);
    background: var(--hyva-yoga-right-caption-bg);
    padding: 0.7rem 0.55rem 0.8rem;
    text-align: center;
}

.hyva-yoga__right-title {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* Theme token for text on primary; large/bold for WCAG-friendly contrast on pink. */
    color: var(--color-on-primary, #fff);
}

.hyva-yoga__right-sub {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px dashed color-mix(in srgb, var(--color-on-primary, #fff) 75%, transparent);
    font-size: 0.72rem;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    /* Dark on pink — better contrast than white for the smaller subtitle. */
    color: var(--hyva-yoga-ink);
}

.hyva-yoga__below {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    align-items: start;
}

.hyva-yoga__blurb-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: var(--hyva-yoga-accent);
}

.hyva-yoga__blurb-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--hyva-yoga-muted);
}

.hyva-yoga__recent {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.hyva-yoga__recent-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hyva-yoga-muted);
    margin-bottom: 0.5rem;
}

.hyva-yoga__recent-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.hyva-yoga__recent-link:hover .hyva-yoga__recent-title {
    color: var(--hyva-yoga-accent);
}

.hyva-yoga__recent-img {
    width: 100%;
    aspect-ratio: 320 / 220;
    /* Keep fixed frame; show full image (no crop). Side/letterbox gaps use WP pink. */
    object-fit: contain;
    object-position: center;
    border-radius: 0.25rem;
    display: block;
    margin-bottom: 0.65rem;
    background: var(--color-primary-lighter, #e276dc);
}

.hyva-yoga__recent-title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

@media (min-width: 1101px) {
    /*
     * Desktop: prev/next grayscale rails full-bleed from the viewport edge
     * up against the carousel (WP armonia.yoga effect). Peeks wrapper is
     * display:contents so prev/next resolve `%` against .hyva-yoga__stage
     * (position:relative); that way calc((50vw - 50%) + rail + gap) yields
     * "distance from stage edge to viewport edge + intra-stage rail + gap"
     * and the peek rectangles stretch from viewport edge to hero edge
     * without cropping the WP-style off-screen part of the neighbor slides.
     */
    .hyva-yoga__peeks {
        display: contents;
    }

    .hyva-yoga__peek {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 0;
        pointer-events: none;
        background-color: #1a1a1a;
        background-size: cover;
        background-repeat: no-repeat;
        filter: grayscale(1);
        opacity: 0.55;
    }

    .hyva-yoga__peek--prev {
        left: calc(50% - 50vw);
        width: calc(
            (50vw - 50%)
            + var(--hyva-yoga-rail-left)
            + var(--hyva-yoga-band-gap)
        );
        background-position: left center;
    }

    .hyva-yoga__peek--next {
        right: calc(50% - 50vw);
        width: calc(
            (50vw - 50%)
            + var(--hyva-yoga-rail-right)
            + var(--hyva-yoga-band-gap)
        );
        background-position: right center;
    }

    .hyva-yoga__left,
    .hyva-yoga-blog__left-nav,
    .hyva-yoga__right {
        position: relative;
        z-index: 1;
    }

    .hyva-yoga__hero {
        z-index: 2;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.12);
        /*
         * Right column (3 tiles + captions) is typically taller than the
         * hero's 790/530 aspect ratio at desktop widths — align-items:
         * stretch on .hyva-yoga__band makes the band grow to that height
         * while hero (align-self: start earlier) leaves a gap. Stretch
         * hero to the band height and let the viewport flex-grow; slides
         * already use position:absolute+inset:0 with object-fit:cover so
         * they fill the taller viewport without distortion.
         */
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    .hyva-yoga__hero-viewport {
        aspect-ratio: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
}

@media (max-width: 1100px) {
    /*
     * Below ~1100px the 3-column band squeezes the carousel into a tall
     * sliver. Stack: left nav → full-width hero → right tiles.
     * Peeks stay display:none (messy on tablet/mobile).
     */
    .hyva-yoga__band {
        grid-template-columns: 1fr;
        align-items: start;
    }

    /*
     * Portfolio band left *tiles* may sit 2-up on tablet.
     * Blog left-nav (.hyva-yoga-blog__left-nav) must stay a single column
     * at every viewport — never inherit this grid.
     */
    .hyva-yoga__band > .hyva-yoga__left:not(.hyva-yoga-blog__left-nav) {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hyva-yoga__right {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }

    .hyva-yoga__below {
        grid-template-columns: 1fr;
    }

    .hyva-yoga__recent {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .hyva-yoga__right {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .hyva-yoga__band > .hyva-yoga__left:not(.hyva-yoga-blog__left-nav) {
        grid-template-columns: 1fr;
    }
}

/* Blog / post / archive left column: always one stacked column */
.hyva-yoga-blog__left-nav {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
    grid-template-columns: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .hyva-yoga__slide {
        transition: none !important;
    }
}

/* Left nav (nested band menu) */
.hyva-yoga__nav-list,
.hyva-yoga__nav-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hyva-yoga__nav-item {
    margin-bottom: 0.5rem;
}
.hyva-yoga__nav-link,
.hyva-yoga__nav-label {
    display: block;
    padding: 0.65rem 0.75rem;
    /* Match WP / portfolio caption pink (#e276dc) */
    background: var(--color-primary-lighter, #e276dc);
    color: var(--color-on-primary, #fff);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0.25rem;
}
.hyva-yoga__nav-link:hover {
    filter: brightness(1.05);
    color: var(--color-on-primary, #fff);
    text-decoration: none;
}
.hyva-yoga__nav-children {
    /*
     * Sub-links (e.g. Chi siamo → Chiara Abeni / Yoga Ratna / …) sit on top
     * of the desktop grayscale peeks and become unreadable without a light
     * backdrop. Match the page surface (white) and tuck the block just
     * below the parent pink tile with the same rounded corners.
     */
    margin-top: 0.35rem;
    padding: 0.4rem 0.5rem;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.hyva-yoga__nav-children a,
.hyva-yoga__nav-children span {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    color: var(--hyva-yoga-ink);
    text-decoration: none;
}
.hyva-yoga__nav-children a:hover {
    color: var(--color-primary-lighter, var(--hyva-yoga-accent));
}

/* Follow / RSS strip (shared left sidebar — portfolio, blog, posts) */
.hyva-yoga__follow {
    margin-top: 0.75rem;
}
.hyva-yoga__follow .hyva-yoga__nav-label {
    margin-bottom: 0.5rem;
}
.hyva-yoga__follow-icons {
    /*
     * Convey "sub-item of Follow us" the same way Chi siamo's
     * .hyva-yoga__nav-children does: white backdrop tucked just below the
     * pink parent tile. Also keeps the icon(s) readable when the desktop
     * grayscale peek sits behind the sidebar column.
     */
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.4rem 0.5rem;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.hyva-yoga__follow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.2rem;
    background: var(--color-primary-lighter, #e276dc);
    color: var(--color-on-primary, #fff);
    text-decoration: none;
}
.hyva-yoga__follow-icon:hover {
    filter: brightness(1.05);
    color: var(--color-on-primary, #fff);
    text-decoration: none;
}

/* Sidebar widgets under band nav (/blog + posts) — reuse nav chrome */
.mageos-blog-sidebar-widgets {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.mageos-blog-sidebar-widgets__section {
    margin: 0;
}
.mageos-blog-sidebar-widgets__title {
    margin: 0 0 0.35rem;
}
.mageos-blog-sidebar-widgets__list {
    margin: 0;
    padding-left: 0.5rem;
}
.mageos-blog-sidebar-widgets__list a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

/* Tag cloud — optional pink pills when Show as Buttons = Yes */
.mageos-blog-sidebar-widgets__section[data-widget="tag_cloud"][data-tag-style="buttons"] .mageos-blog-sidebar-widgets__list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 0;
    margin-top: 0.5rem;
}
.mageos-blog-sidebar-widgets__section[data-widget="tag_cloud"][data-tag-style="buttons"] .mageos-blog-sidebar-widgets__list li {
    margin: 0;
    flex: 0 0 auto;
    width: auto;
}
.mageos-blog-sidebar-widgets__section[data-widget="tag_cloud"][data-tag-style="buttons"] .mageos-blog-sidebar-widgets__list a {
    display: inline-block;
    width: auto;
    padding: 0.3rem 0.65rem;
    border-radius: 0.25rem;
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
    font-size: 0.875rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.25;
    text-transform: lowercase;
    text-decoration: none;
}
.mageos-blog-sidebar-widgets__section[data-widget="tag_cloud"][data-tag-style="buttons"] .mageos-blog-sidebar-widgets__list a:hover {
    background: var(--color-primary-lighter, var(--color-primary));
    color: var(--color-on-primary, #fff);
    filter: none;
}

/* Mobile accordion (gacom footer-links pattern) */
.mageos-blog-left-nav-accordion__section {
    margin: 0;
}
.mageos-blog-left-nav-accordion__section > summary {
    list-style: none;
    cursor: pointer;
}
.mageos-blog-left-nav-accordion__section > summary::-webkit-details-marker {
    display: none;
}
.mageos-blog-left-nav-accordion__section > summary::after {
    content: "+";
    float: right;
    font-weight: 700;
    opacity: 0.85;
}
.mageos-blog-left-nav-accordion__section[open] > summary::after {
    content: "−";
}
@media (min-width: 768px) {
    .mageos-blog-left-nav-accordion__section > summary {
        pointer-events: none;
        cursor: default;
    }
    .mageos-blog-left-nav-accordion__section > summary::after {
        display: none;
    }
    .mageos-blog-left-nav-accordion__section > ul {
        display: block !important;
    }
}