/* ============================================================
   Spirits Circle - scroll-pinned rotating ring widget
   ============================================================ */

/* Scroll spacer injected by JS */
.spirits-circle__scroll-spacer {
    position: relative;
    overflow: visible !important;
}

/* Root - sticky, 600px tall, centred in viewport while pinned */
.spirits-circle {
    position: sticky;
    top: calc(50vh - 300px);
    width: 100%;
    max-width: 900px;
    height: 600px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: visible !important;
}

/* Inner container - 467x467, absolutely centred in the 600px root */
.spirits-circle__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 467px;
    height: 467px;
    overflow: visible;
}

/* SVG - fills the inner container exactly, overflow visible for dots */
.spirits-circle__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 467px;
    height: 467px;
    overflow: visible;
}

/* Polygon, ring track, progress arc */
.sc-poly        { stroke: rgba(255,255,255,.18); }
.sc-ring-track  { stroke: rgba(255,255,255,.22); }
.sc-ring-progress {
    stroke: #c8622a;
    transition: stroke-dasharray .4s ease;
}

/* Dots */
.sc-dot { cursor: default; }
.sc-dot-bg {
    fill: rgba(255,255,255,.65);
    stroke: none;
    transition: fill .35s ease;
}
.sc-dot.is-active .sc-dot-bg { fill: #c8622a; }

/* Centre image - 390x390, circular, sits inside the ring */
.spirits-circle__img-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 390px;
    height: 390px;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    background: #1a1a1a;
}
.spirits-circle__img-wrap img {
    width: 390px !important;
    height: 390px !important;
    max-width: none !important;
    object-fit: cover;
    display: block !important;
}

/* Description overlay - width and left set by JS to match viewport.
   position:absolute so it scrolls away with the section (not fixed). */
.spirits-circle__descs {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 600px;
    pointer-events: none;
    overflow: visible;
    z-index: 10;
}

/* Individual description label */
.sc-desc {
    position: absolute;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    width: 25vw;
    min-width: 200px;
    box-sizing: border-box;
}
.sc-desc.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.sc-desc__text {
    display: block;
    color: #d4cfc9;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .02em;
}

/* HTML formatting in descriptions */
.sc-desc__text strong,
.sc-desc__text b  { color: #fff; font-weight: 600; }
.sc-desc__text em,
.sc-desc__text i  { font-style: italic; }
.sc-desc__text br { display: block; margin-top: 6px; content: ''; }
.sc-desc__text a  { color: #c8622a; text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
    .spirits-circle { max-width: 100%; }
}

/* Title + description header above the circle */
.spirits-circle__header {
    text-align: center;
    margin-bottom: 0; /* gap to circle handled by HEADER_MARGIN in JS */
}
.spirits-circle__title {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    line-height: 1.2;
}
.spirits-circle__desc-text {
    color: #d4cfc9;
    font-size: 14px;
    line-height: 1.6;
    max-width: 50vw;
    margin: 0 auto;
}

/* ============================================================
   MOBILE & TABLET  (≤ 1024px)
   Single-column layout — no scroll animation, no ring/SVG.
   SEO-safe: all content is in the DOM; nothing duplicated.
   ============================================================ */

/* On mobile: hide the desktop ring/SVG/floating-desc machinery */
@media (max-width: 1024px) {

    /* Kill the sticky scroll spacer geometry — JS won't run init on mobile */
    .spirits-circle__scroll-spacer {
        height: auto !important;
        padding: 0 !important;
    }

    /* Root: natural block, full width, 20px padding all round */
    .spirits-circle {
        position: static !important;
        top: auto !important;
        height: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        text-align: center;
        overflow: hidden !important;
    }

    /* Header: full width, centred */
    .spirits-circle__header {
        width: 100%;
        margin-bottom: 24px;
    }
    .spirits-circle__title {
        font-size: 1.6rem;
    }
    .spirits-circle__desc-text {
        max-width: 100%;
        font-size: 14px;
    }

    /* Hide the entire desktop ring+SVG+image inner block */
    .spirits-circle__inner {
        display: none !important;
    }

    /* Hide desktop floating description labels */
    .spirits-circle__descs {
        display: none !important;
    }

    /* Show mobile block */
    .spirits-circle__mobile {
        display: block;
        width: 100%;
    }

    /* Mobile circular image */
    .sc-mobile__img-wrap {
        width: calc(100vw - 40px);
        max-width: 260px;
        height: calc(100vw - 40px);
        max-height: 260px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto 32px;
    }
    .sc-mobile__img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 50%;
    }

    /* Mobile dot labels — stacked list, centred */
    .sc-mobile__dots {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }
    .sc-mobile__dot {
        color: #d4cfc9;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: .02em;
    }
    .sc-mobile__dot strong,
    .sc-mobile__dot b  { color: #fff; font-weight: 600; }
    .sc-mobile__dot em,
    .sc-mobile__dot i  { font-style: italic; }
    .sc-mobile__dot a  { color: #c8622a; text-decoration: underline; }
}

/* Desktop: hide the mobile block entirely */
@media (min-width: 1025px) {
    .spirits-circle__mobile {
        display: none !important;
    }
}