/* ═══════════════════════════════════════════════
   HERO CAROUSEL — Featured posts
   Fullscreen slides with crossfade + ring-dot indicators.
═══════════════════════════════════════════════ */

/* ── Section container ── */
.homepage-section {
    position: relative;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.full-width-homepage {
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 100vw;
    min-width: 100vw;
    flex-shrink: 0;
}

/* ── Carousel wrapper ── */
.hero-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* ── Individual slide ── */
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
    text-decoration: none;
    color: inherit;
    display: block;
}

.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* Background image */
.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video slide: black background + flexbox center for letterbox */
.hero-slide[data-has-video] {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* No gradient overlay on video slides */
.hero-slide[data-has-video] .hero-slide-overlay {
    display: none;
}

/* Stage wraps the video in a 16:9 letterbox box, centered by the flex parent.
   Subtitles/controls position against this box so they align to the video. */
.hero-slide[data-has-video] .vimeo-min-stage {
    flex-shrink: 0;
    width: min(100%, 177.78vh);   /* min(100vw, 16/9 × vh) */
    height: min(100%, 56.25vw);   /* min(100vh, 9/16 × vw) */
}

.hero-slide-video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Video entry poster — shown over the slide while the video is not playing ── */
.video-poster {
    position: absolute;
    inset: 0;
    z-index: 4;
    cursor: pointer;
    background: #050505;
    overflow: hidden;
}

.video-poster-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* fill the viewport, crop overflow */
    object-position: center;
    display: block;
}

.video-poster-logo {
    position: absolute;
    top: max(40px, 6vh);
    left: 50%;
    transform: translateX(-50%);
    width: min(260px, 48vw);
    height: auto;
    z-index: 1;
}

.video-poster-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.3s ease;
    animation: posterPlayIn 0.5s ease both;
}

.video-poster-play img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Only on real pointer/hover devices — avoids the iOS "first tap = hover,
   second tap = click" double-tap behavior on touchscreens. */
@media (hover: hover) {
    .video-poster-play:hover {
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes posterPlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (max-width: 480px) {
    .video-poster-logo {
        width: min(180px, 55vw);
        top: max(28px, 4vh);
    }

    .video-poster-play {
        width: 68px;
        height: 68px;
    }
}

/* Dark gradient overlay for text readability */
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0) 60%
    );
    z-index: 1;
}

/* ── Slide text content (desktop: right-aligned) ── */
.hero-slide-content {
    position: absolute;
    bottom: max(80px, 8vh);
    right: max(28px, 3vw);
    z-index: 2;
    color: #fff;
    max-width: max(320px, calc(22vw * var(--scale)));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: max(8px, calc(0.56vw * var(--scale)));
}

.hero-slide-title {
    font-family: var(--font1);
    font-size: max(28px, calc(2vw * var(--scale)));
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: #fff;
}

.hero-slide-excerpt {
    font-family: var(--font2);
    font-size: max(13px, calc(0.9vw * var(--scale)));
    font-weight: 300;
    line-height: 1.6;
    opacity: 0.75;
    color: #fff;
    text-transform: none;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Dot indicators (Kinfolk ring-dot style) ── */
.hero-indicators {
    position: absolute;
    top: max(28px, 3vh);
    right: max(28px, 3vw);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-indicator {
    position: relative;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG ring — progress animation via stroke-dashoffset */
.hero-indicator-ring {
    width: 14px;
    height: 14px;
    transform: rotate(-90deg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-indicator-ring circle {
    stroke-dasharray: 37.7;  /* 2π × 6 */
    stroke-dashoffset: 37.7;
    transition: stroke-dashoffset 0.1s linear;
}

.hero-indicator.is-active .hero-indicator-ring {
    opacity: 1;
}

/* Center dot */
.hero-indicator-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.hero-indicator.is-active .hero-indicator-dot {
    opacity: 1;
}

.hero-indicator-ring circle {
    stroke: #fff;
}

/* ═══ MOBILE ═══ */
@media (max-width: 991px) {
    .homepage-section {
        padding: 0;
        min-width: unset;
        /* Fixed height: viewport minus topbar, won't resize when Safari bars hide */
        height: calc(100svh - var(--mobile-topbar-h));
        min-height: calc(100svh - var(--mobile-topbar-h));
        width: 100vw;
    }

    .hero-slide-content {
        bottom: max(80px, 10vh);
        left: var(--small-padding);
        right: var(--small-padding);
        max-width: none;
        align-items: center;
        text-align: center;
    }

    .hero-slide-title {
        font-size: 24px;
    }

    .hero-slide-excerpt {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .hero-indicators {
        top: max(16px, 2vh);
        right: var(--small-padding);
        left: auto;
        bottom: auto;
    }
}

@media (max-width: 479px) {
    .hero-slide-content {
        bottom: max(64px, 8vh);
    }

    .hero-slide-title {
        font-size: 22px;
    }

    .hero-indicators {
        top: 12px;
        right: var(--small-padding);
    }
}

/* ── Custom layout hero — align left edge with sidebar logo ── */
.custom-layout-hero-section .hero-text-content {
    padding-left: calc(var(--small-padding) * 1.5);
    padding-right: calc(var(--small-padding) * 4);
    width: 30vw;
}

.custom-layout-hero-section .hero-title {
    font-size: 24px;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* ── Sticky hero (inherited — keep for other layouts) ── */
.sticky-hero-section {
    width: 100vw;
    right: 0;
    left: 0;
    position: fixed;
    top: 14vh;
    padding-left: var(--small-padding);
}

.sticky-hero-section .title-and-subtitle {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row-reverse;
    width: calc(100vw - 2 * var(--small-padding));
}

.sticky-hero-section .title-and-subtitle .hero-subtitle {
    font-size: max(16px, calc(1.11vw * var(--scale)));
    margin-bottom: max(15px, calc(1.04vw * var(--scale)));
}

.sticky-posts-section {
    padding-left: var(--small-padding);
    margin-top: auto;
    margin-bottom: max(81px, calc(5.7vw * var(--scale)));
}

.sticky-posts-section .grid {
    min-width: calc(100vw - 2 * var(--small-padding));
}

.sticky-posts-section .dashed-border-outer,
.sticky-posts-section .absolute-subtitle {
    display: none;
}

.sticky-hero-section .medium-text {
    font-size: max(16px, calc(1.11vw * var(--scale)));
}

.padding-top-on-mobile .dashed-border-outer {
    display: none;
}

html[data-card-image-aspect-ratio-desktop="Alternate Align Top"][data-show-excerpt-on-cards="true"] .sticky-posts-section {
    margin-bottom: max(120px, calc(8.3vw * var(--scale)));
}

@media (max-width: 991px) {
    .sticky-hero-section {
        width: 100% !important;
        position: static !important;
        padding-left: 0px !important;
    }

    .sticky-hero-section .title-and-subtitle {
        align-items: center;
        justify-content: center;
        width: 100% !important;
    }

    .sticky-posts-section {
        padding-left: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .sticky-posts-section .grid {
        min-width: unset !important;
    }

    .sticky-posts-section .dashed-border-outer,
    .sticky-posts-section .absolute-subtitle {
        display: flex;
    }

    .padding-top-on-mobile .dashed-border-outer {
        display: block;
    }

    .custom-layout-hero-section {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .custom-layout-hero-section .hero-text-content {
        padding-left: 0;
        width: 100vw;
    }

    .custom-layout-hero-section .hero-title {
        font-size: 36px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
}

/* ── Web Store section ── */
.webstore-section {
    flex-direction: column;
    justify-content: center;
}

.webstore-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    gap: max(12px, calc(0.83vw * var(--scale)));
}

.webstore-title {
    font-family: var(--font1);
    font-size: max(28px, calc(1.94vw * var(--scale)));
    letter-spacing: -0.02em;
    line-height: 130%;
}

.webstore-description {
    max-width: 400px;
    opacity: 0.7;
}

.webstore-button {
    margin-top: max(8px, calc(0.56vw * var(--scale)));
    width: fit-content;
}

@media (max-width: 991px) {
    .webstore-content {
        padding: 0 var(--small-padding);
    }
}