/* =========================================
   Editorly — Elementor Custom Widgets CSS
   ========================================= */

/* ---- Post Grid Widget ---- */
.editorly-post-grid {
    box-sizing: border-box;
    display: grid;
    gap: 24px;
    /* A grid track is free to be narrower than its content, but only if the
       grid itself is allowed to shrink. */
    min-width: 0;
    max-width: 100%;
}

.editorly-post-grid * {
    box-sizing: border-box;
}

.editorly-post-grid.layout-list {
    display: block;
}

.editorly-post-grid.layout-list .editorly-post-card {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.editorly-post-grid.layout-list .post-thumb {
    flex: 0 0 240px;
    aspect-ratio: 1.5;
}

/* The card is a flex column so that, when cards in a row are stretched to a
   common height, the body fills the remaining space instead of leaving the
   shortest card with a block of empty white below its text. */
.editorly-post-card {
    box-sizing: border-box;
    background: var(--ed-panel-bg, #fff);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Thumbnails are cropped to one shared shape, set by the widget's Image Ratio
   control (default 3:2). Without this every image keeps its own proportions,
   so a portrait photo makes one card far taller than the rest and the row
   never lines up. object-fit:cover crops rather than distorts.

   aspect-ratio is only a fallback here; the real value is written by Elementor
   from the control, and the Original option sets it to 0, which is invalid and
   therefore ignored, letting the image fall back to its natural height. */
.editorly-post-card .post-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1.5;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
}

.editorly-post-card .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.editorly-post-card .post-card-body {
    box-sizing: border-box;
    padding: 16px;
    flex: 1 1 auto;
}

.editorly-post-card .post-title {
    margin: 0 0 8px;
    font-size: 1.2em;
}

.editorly-post-card .post-title a {
    text-decoration: none;
    color: inherit;
}

.editorly-post-card .post-meta {
    font-size: 0.85em;
    color: var(--ed-text-muted, #888);
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.editorly-post-card .post-read-more {
    display: inline-block;
    margin-top: 8px;
    font-weight: 600;
    text-decoration: none;
}

/* ---- Carousel layout ----
   The track is a scroll-snap flex row, so it is fully usable by touch,
   trackpad and keyboard on its own. The previous/next buttons are added by
   post-carousel.js in the Editorly Core plugin; if that script never runs the
   carousel simply stays a horizontal scroller rather than breaking.

   display:flex is declared with !important because Elementor writes
   grid-template-columns onto the same element from the Columns control, and
   the base rule above sets display:grid. Without the override the two fight
   and the cards stack in a single column. */


.editorly-post-carousel {
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Side gutters that give the nav buttons somewhere to live. Without them
       the buttons sit on top of the first and last cards and cover the title,
       which is exactly what they are meant to help the visitor read. */
    padding: 0 52px;
    max-width: 100%;
}

.editorly-post-grid.layout-carousel {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    /* Room for the focus ring, and stops the scrollbar cropping the cards. */
    padding: 4px 4px 12px;
    scrollbar-width: thin;
    /* Same reasoning as above: the track must be allowed to be narrower than
       its own content, otherwise it never scrolls, it just overflows. */
    max-width: 100%;
    /* Keeps a swipe that reaches the end of the carousel from continuing into
       the page behind it. Without this, swiping past the last card drags the
       whole document sideways on a phone, which reads as the page breaking. */
    overscroll-behavior-x: contain;
    /* Momentum scrolling on iOS. */
    -webkit-overflow-scrolling: touch;
}

/* A slim, unobtrusive scrollbar. The chunky default one reads as a page
   element rather than part of the carousel. */
.editorly-post-grid.layout-carousel::-webkit-scrollbar {
    height: 6px;
}

.editorly-post-grid.layout-carousel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

.editorly-post-grid.layout-carousel::-webkit-scrollbar-track {
    background: transparent;
}

.editorly-post-grid.layout-carousel .editorly-post-card {
    flex: 0 0 280px;
    min-width: 0;
    scroll-snap-align: start;
}

/* Nav buttons are hidden until the script confirms the track actually
   overflows, so a carousel with three cards on a wide screen shows no
   pointless arrows. */
.editorly-carousel-nav {
    display: none;
}

.editorly-post-carousel.has-overflow .editorly-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* Vertically centred on the whole track. transform is used rather than a
       percentage top so the buttons stay centred whatever the card height
       works out to be. */
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--ed-primary, #1a1a1a);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: opacity 0.2s ease;
}

/* Positioned just inside the track rather than hanging off its edges: a
   negative offset here would stick out of the container and could itself
   create horizontal page overflow on a narrow viewport. */
/* Placed inside the gutters created by the wrapper padding, so they never
   overlap a card. */
.editorly-post-carousel .editorly-carousel-prev {
    left: 4px;
}

.editorly-post-carousel .editorly-carousel-next {
    right: 4px;
}

.editorly-carousel-nav[disabled] {
    opacity: 0.35;
    cursor: default;
}

@media (max-width: 782px) {
    /* Narrower gutters on a phone: enough room to keep the arrows clear of the
       cards, without giving up too much of an already narrow screen. */
    .editorly-post-carousel {
        padding: 0 34px;
    }

    .editorly-post-carousel.has-overflow .editorly-carousel-nav {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    .editorly-post-carousel .editorly-carousel-prev {
        left: 0;
    }

    .editorly-post-carousel .editorly-carousel-next {
        right: 0;
    }

    /* Date and author stack instead of sitting side by side. On a card this
       narrow a flex row leaves each item too little space and both wrap
       mid-value, so a single date reads as two broken lines. */
    .editorly-post-card .post-meta {
        flex-direction: column;
        gap: 2px;
    }

    /* A percentage basis, so the next card peeks in at the right edge and the
       carousel reads as scrollable without any arrows. min-width:0 stops a
       long unbroken title from widening the card past its basis. */
    .editorly-post-grid.layout-carousel .editorly-post-card {
        flex: 0 0 78%;
        min-width: 0;
    }
}

/* ---- Banner / CTA Widget ---- */
.editorly-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    overflow: hidden;
}

.editorly-banner-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
}

.editorly-banner-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 40px;
    text-align: center;
}

.editorly-banner-title {
    color: #fff;
    font-size: 2.2em;
    margin: 0 0 16px;
}

.editorly-banner-desc {
    color: #f0f0f0;
    margin-bottom: 24px;
}

.editorly-banner-button {
    display: inline-block;
    background: #0073aa;
    color: #fff;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

/* ---- Hero Slider Widget ---- */
.editorly-hero-slider {
    position: relative;
    overflow: hidden;
}

.editorly-hero-slide {
    position: relative;
    height: 550px;
    background-size: cover;
    background-position: center;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.editorly-hero-slide.is-active {
    display: flex;
}

.editorly-hero-slide-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.editorly-hero-slide-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.editorly-hero-slide-title {
    color: #fff;
    font-size: 2.6em;
    margin: 0 0 16px;
}

.editorly-hero-slide-subtitle {
    color: #f0f0f0;
    font-size: 1.1em;
    margin-bottom: 24px;
}

.editorly-hero-slide-button {
    display: inline-block;
    background: #0073aa;
    color: #fff;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

.editorly-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    font-size: 1.1em;
}

.editorly-hero-nav.prev {
    left: 20px;
}

.editorly-hero-nav.next {
    right: 20px;
}

.editorly-hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.editorly-hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
}

.editorly-hero-dot.is-active {
    background: #ffffff;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .editorly-hero-slide-title {
        font-size: 1.6em;
    }

    .editorly-hero-slide {
        height: 400px;
    }

    .editorly-post-grid.layout-list .editorly-post-card {
        flex-direction: column;
    }

    .editorly-post-grid.layout-list .post-thumb {
        flex: none;
    }
}