/* ==========================================================
   NEWS PAGE LAYOUT (/blogs/)
   Top row: advert strip (80%) + Explore articles menu (20%).
   Articles fill the full width, spread evenly:
   4 per row on large screens, 3 on laptops, 2 on tablets.
   Phones keep their own layout and the slide-in drawer.
   Loaded after blog.css, so these rules take priority.
   ========================================================== */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ----------------------------------------------------------
   Top row
   ---------------------------------------------------------- */

.news-top {
    position: relative;
    z-index: 30;

    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(220px, 1fr);
    gap: 20px;
    align-items: stretch;

    width: 94%;
    max-width: 1400px;

    margin: 0 auto 32px;
    padding-top: 28px;
}

.news-top-ad {
    min-width: 0;
}


/* ----------------------------------------------------------
   Explore articles menu
   Plain and quiet: white, thin grey border, dark text.
   The list rolls down under the button and rolls back up.
   ---------------------------------------------------------- */

.explore-menu {
    position: relative;
}

.explore-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    width: 100%;
    height: 92px;
    padding: 0 20px;

    background: #ffffff;
    border: 1px solid #e2e2e2;

    color: #222222;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition: border-color 0.15s ease;
}

.explore-button-text {
    display: grid;
    gap: 4px;

    min-width: 0;
}

.explore-button small {
    color: #8a8a8a;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.explore-button strong {
    overflow: hidden;

    color: #222222;

    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.explore-button svg {
    flex-shrink: 0;

    width: 18px;
    height: 18px;

    fill: none;
    stroke: #555555;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.2s ease;
}

.explore-button:hover,
.explore-menu.is-open .explore-button {
    border-color: #b9b9b9;
}

.explore-menu.is-open .explore-button svg {
    transform: rotate(180deg);
}

.explore-button:focus-visible {
    outline: 2px solid #412e03;
    outline-offset: 2px;
}

/* The list: same width as the button, rolls down from under it */
.explore-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;

    display: grid;

    padding: 6px 0;

    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-top: 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);

    clip-path: inset(0 0 100% 0);
    visibility: hidden;

    transition: clip-path 0.22s ease, visibility 0s linear 0.22s;
}

.explore-menu.is-open .explore-panel {
    clip-path: inset(0 0 0 0);
    visibility: visible;

    transition: clip-path 0.22s ease, visibility 0s;
}

/* After a choice the list goes back up at once */
.explore-menu.is-closing-now .explore-panel {
    transition: none;
}

.explore-panel-inner {
    display: grid;
}

.explore-panel a {
    position: relative;

    display: block;

    padding: 10px 20px;

    color: #333333;

    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
}

.explore-panel a:hover,
.explore-panel a:focus-visible {
    background: #f5f5f5;
    color: #111111;

    outline: none;
}

/* The list being shown now: a thin brown line and bold text */
.explore-panel a.is-current {
    color: #111111;

    font-weight: 700;
}

.explore-panel a.is-current::before {
    content: "";

    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;

    width: 3px;

    background: #412e03;
}

@media (prefers-reduced-motion: reduce) {

    .explore-panel,
    .explore-menu.is-open .explore-panel {
        transition: none;
    }
}


/* ----------------------------------------------------------
   Articles: full width, evenly spread
   ---------------------------------------------------------- */

.blog-page .blog-layout {
    grid-template-columns: minmax(0, 1fr);
}

/* Tablets and larger only; phones keep blog.css as it is */
@media (min-width: 769px) {

    .blog-page .blog-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px;
    }

    .blog-page .blog-image img {
        height: 210px;
    }

    .blog-page .blog-card h2 a {
        font-size: 1.15rem;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {

    .blog-page .blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {

    .news-top {
        grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr);
        gap: 14px;
    }

    .blog-page .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ----------------------------------------------------------
   Phones: the top menu hides and the same Explore menu
   lives in the slide-in drawer (the ">" tab on the left).
   ---------------------------------------------------------- */

@media (max-width: 768px) {

    .news-top {
        grid-template-columns: 1fr;

        width: calc(100% - 28px);
        margin-bottom: 18px;
        padding-top: 16px;
    }

    .explore-menu--top {
        display: none !important;
    }

    /* The drawer itself: plain white panel, square corners */
    .blog-page .mobile-blog-sidebar {
        width: 290px;
        max-width: 84vw;
        max-height: calc(100vh - 200px);
        padding: 14px;

        overflow-y: auto;

        border: 1px solid #e2e2e2;
        border-left: 0;
        border-radius: 0;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }

    .explore-menu--drawer .explore-button {
        height: 72px;
        padding: 0 16px;
    }

    /* In the drawer the list sits under the button and pushes
       nothing aside; it rolls down and up the same way */
    .explore-menu--drawer .explore-panel {
        position: static;

        display: grid;
        grid-template-rows: 0fr;

        padding: 0;

        box-shadow: none;
        clip-path: none;
        visibility: visible;

        transition: grid-template-rows 0.22s ease;
    }

    .explore-menu--drawer .explore-panel-inner {
        min-height: 0;
        overflow: hidden;
    }

    .explore-menu--drawer.is-open .explore-panel {
        grid-template-rows: 1fr;

        padding: 6px 0;

        transition: grid-template-rows 0.22s ease;
    }

    .explore-menu--drawer:not(.is-open) .explore-panel {
        border-color: transparent;
    }

    .explore-menu--drawer.is-closing-now .explore-panel {
        transition: none;
    }

    .explore-menu--drawer .explore-panel a {
        padding: 12px 16px;
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {

    .explore-menu--drawer .explore-panel {
        transition: none;
    }
}


/* While a new list is loading (Explore menu / page numbers) */
.blog-content {
    transition: opacity 0.15s ease;
}

.blog-content.is-loading {
    opacity: 0.45;

    pointer-events: none;
}