/* ─────────────────────────────────────────────────────────────────────────
   Home page — "Latest from the blog" slider (index.php #section-blog)

   The cards are SERVER-RENDERED (WebsiteData::get_latest_blog_slider_posts),
   so every post link is in the HTML; Owl Carousel only adds the sliding.
   Same feature as Vape and Go's home blog slider, in Alectrofag's own
   section-head / card language (navy + teal, Inter Tight).

   Loaded non-blocking from template/head.php on the home page only.
   ───────────────────────────────────────────────────────────────────────── */

.home-blog-section {
    background: var(--ink-50, #f6f8fb);
    border-top: 1px solid var(--ink-200, #dbe1e9);
}

/* Header right side: "View all" + prev/next */
.home-blog-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-blog-nav {
    display: flex;
    gap: 8px;
}

.home-blog-nav button,
.home-blog-nav [role="presentation"] {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--ink-200, #dbe1e9);
    background: #fff;
    color: var(--navy, #0f2236);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.home-blog-nav button:hover {
    border-color: var(--teal-500, #1aa69f);
    color: var(--teal-600, #0f857f);
    box-shadow: 0 4px 14px rgba(15, 34, 54, .08);
}

.home-blog-nav button.disabled {
    opacity: .4;
    cursor: default;
    box-shadow: none;
}

/* Before Owl initialises (and with JS off) the row is a plain horizontal
   scroller, so the cards are never hidden and nothing jumps when Owl takes
   over. owl.carousel.css hides `.owl-carousel` until `.owl-loaded`; this
   selector out-ranks it. */
.home-blog-slider:not(.owl-loaded) {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
}

.home-blog-slider:not(.owl-loaded) > .home-blog-card {
    flex: 0 0 calc(25% - 15px);
    scroll-snap-align: start;
}

/* Equal-height cards inside Owl */
.home-blog-slider .owl-stage {
    display: flex;
}

.home-blog-slider .owl-item {
    display: flex;
}

.home-blog-slider .owl-item > .home-blog-card {
    width: 100%;
}

/* Card */
.home-blog-card {
    background: #fff;
    border: 1px solid var(--ink-200, #dbe1e9);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.home-blog-card:hover {
    border-color: var(--teal-200, #afeae4);
    box-shadow: 0 10px 30px rgba(15, 34, 54, .10);
    transform: translateY(-2px);
}

/* Image slot.

   The ratio is what keeps the cards aligned: every slot is the same height, so
   every card body starts on the same line and the meta row sits flush across
   the strip. Dropping the ratio lets each card size to its own image, and
   because the blog images are all different shapes the bodies then start at
   different heights — that is the misalignment.

   4/3 rather than 16/9 because the featured images are authored square or
   portrait (700x670, 900x995, 390x373 as of Sep 2026). A 16/9 slot is far wider
   than the images, so `contain` would shrink them into thin strips between wide
   empty margins. 4/3 sits close to the real shapes, so the image fills most of
   the slot. */
.home-blog-card-img {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: var(--ink-100, #eef1f5);
    overflow: hidden;
}

/* `contain`, not `cover`: the whole image is always visible. `cover` filled the
   slot edge to edge but cropped 41-49% of the height off these square images,
   which cut the headline banner out of every card. */
.home-blog-slider .home-blog-card-img img,
.home-blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* No featured image on the post — fills the same slot, so a card without an
   image is exactly as tall as one with an image and stays in line with the rest
   of the strip. */
.home-blog-card-noimg {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal-700, #0d6a66);
    background: linear-gradient(135deg, var(--teal-50, #effbfa), var(--teal-100, #d6f5f1));
}

.home-blog-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
}

.home-blog-card-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-blog-card-title a {
    color: var(--navy, #0f2236);
    text-decoration: none;
}

.home-blog-card-title a:hover {
    color: var(--teal-600, #0f857f);
}

.home-blog-card-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-500, #7089a6);
}

.home-blog-card-byline {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-blog-card-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Dots */
.home-blog-slider .owl-dots {
    margin-top: 18px;
    text-align: center;
}

.home-blog-slider .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 4px;
    background: var(--ink-300, #c3ccd9);
    transition: background .15s ease, width .15s ease;
}

.home-blog-slider .owl-dots .owl-dot.active span,
.home-blog-slider .owl-dots .owl-dot:hover span {
    background: var(--teal-500, #1aa69f);
}

.home-blog-slider .owl-dots .owl-dot.active span {
    width: 18px;
    border-radius: 6px;
}

@media (max-width: 1279px) {
    .home-blog-slider:not(.owl-loaded) > .home-blog-card {
        flex-basis: calc(33.333% - 14px);
    }
}

@media (max-width: 991px) {
    .home-blog-slider:not(.owl-loaded) > .home-blog-card {
        flex-basis: calc(50% - 10px);
    }
}

@media (max-width: 640px) {
    /* Touch devices swipe; the arrows only crowd the compact section head. */
    .home-blog-nav {
        display: none;
    }

    .home-blog-slider:not(.owl-loaded) {
        gap: 12px;
    }

    .home-blog-slider:not(.owl-loaded) > .home-blog-card {
        flex-basis: 80%;
    }

    .home-blog-card-title {
        font-size: 15px;
    }
}