/* The page gutter lives here rather than on .home-wide-container: that class is
   display: table, which sizes to its content and lets a pre-init slider (every
   slide defaults to width: 100%) blow the section out to several screens wide. */
.opac-section-wrap {
    width: 100%;
    padding: 20px 6% 5px;
}

.opac-section-slider {
    position: relative;
    padding: 0 48px;
    /* Swiper reads the container width to size slides; give it a definite one. */
    width: 100%;
}

/* Swiper ships .swiper-wrapper { height: 100% }, which resolves against the
   section box here and stretches every slide to ~890px around a ~330px card.
   Content-driven height is what this layout wants. */
.opac-section-slider .swiper,
.opac-section-slider .swiper-wrapper {
    height: auto;
}

.opac-section-slider .swiper {
    padding-bottom: 34px;
}

.opac-section-slider .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}

/* The theme rounds cards through .home-wide-container .item, which stopped
   matching when the sliders moved into their own wrapper; the card images still
   round their top corners, so keep the card itself matching. */
.opac-section-slider .item {
    border-radius: 5px;
}

/* Slides stretch to the tallest in the row; the card has to fill its slide or
   the shorter ones end mid-row, which is what row-eq-height used to handle. */
.opac-section-slider .swiper-slide > * {
    width: 100%;
    flex: 1 1 auto;
}

/* Fewer slides than fit the viewport: the track keeps its flex-start default and
   leaves the row hugging one edge, which reads as broken next to a full row. */
.opac-section-slider .swiper-wrapper.is-centered {
    justify-content: center;
}

/* The arrows are siblings of .swiper, not children, so they sit in this element's
   side padding instead of floating over the first and last slide. .swiper carries
   overflow: hidden, so anything inside it could only overlap a slide or be clipped.
   The track centre sits half the pagination strip above the box centre. */
.opac-section-slider .swiper-button-next,
.opac-section-slider .swiper-button-prev {
    color: var(--opac-slider-arrow, #5a6079);
    width: 34px;
    height: 34px;
    top: calc(50% - 17px);
    margin-top: 0;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: color 0.2s ease, box-shadow 0.2s ease;
}

/* Logical insets keep prev on the reading-start side in both LTR and RTL; the
   physical left/right resets clear Swiper's own values first. */
.opac-section-slider .swiper-button-prev {
    left: auto;
    right: auto;
    inset-inline-start: 0;
}

.opac-section-slider .swiper-button-next {
    left: auto;
    right: auto;
    inset-inline-end: 0;
}

.opac-section-slider .swiper-button-next:after,
.opac-section-slider .swiper-button-prev:after {
    font-size: 15px;
    font-weight: 700;
}

/* Swiper's RTL chevron swap lives on .swiper-rtl, which no longer wraps these
   buttons now that they sit outside the track, so flip the glyphs here to keep
   them pointing the way the text reads. */
[dir="rtl"] .opac-section-slider .swiper-button-prev:after {
    content: 'next';
}

[dir="rtl"] .opac-section-slider .swiper-button-next:after {
    content: 'prev';
}

/* Dim the arrow at the end of its run rather than hiding it, so the control pair
   stays put instead of one side vanishing mid-interaction. Fade the chevron only:
   dropping opacity on the whole control makes its white disc translucent, and the
   slide content behind then bleeds through as though the arrow sat underneath. */
.opac-section-slider .swiper-button-disabled {
    opacity: 1;
    color: #c2c5d0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* An auto-layout table grows to its content's minimum width, and a swiper track
   contributes the full width of its fixed, non-shrinking slides. In the two-column
   latest/most-issued row that pushed the second column off screen, so pin the
   column widths and let the slider fit them instead. */
.home-wide-container.is-fixed-layout {
    table-layout: fixed;
}

/* No arrows on this one, so it does not need the gutter that makes room for them. */
.opac-section-slider.has-no-nav {
    padding: 0;
}

/* A slider whose slides all fit has nothing to page through: hide both. */
.opac-section-slider .swiper-button-lock {
    display: none;
}

.opac-section-slider .swiper-pagination-bullet-active {
    background: var(--opac-slider-arrow, #5a6079);
}

/* Simple ranking paired with the latest-resource slider on the home page. */
.most-issued-list {
    padding: 0;
    margin: 0 0 34px;
    list-style: none;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    overflow: hidden;
}

.most-issued-list li + li {
    border-top: 1px solid #ededed;
}

.most-issued-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 72px;
    padding: 12px 14px;
    color: #333;
}

.most-issued-rank {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    background: var(--most-issued-accent, #5a6079);
    border-radius: 50%;
}

.most-issued-title {
    display: -webkit-box;
    overflow: hidden;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: start;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.most-issued-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 52px;
    padding: 6px 9px;
    color: #666;
    background: #f1f1f1;
    border-radius: 5px;
}

.most-issued-count strong {
    font-size: 14px;
    line-height: 1;
}

.most-issued-count i {
    font-size: 14px;
}

/* This is the last box in .home-partial-container, so a bottom *margin* collapses
   out of the section and shows the white body between sections. Pad instead. */
.section-show-all {
    text-align: center;
    margin: 0;
    padding: 4px 0 10px;
}

.section-show-all a {
    display: inline-block;
    font-size: 15px;
    color: #5a6079;
    text-decoration: none;
    padding: 6px 18px;
    border-radius: 18px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.section-show-all a:hover,
.section-show-all a:focus {
    background-color: rgba(90, 96, 121, 0.08);
    color: #2c3145;
}

.section-show-all i {
    font-size: 13px;
    margin: 0 4px;
}

@media (max-width: 767px) {
    .opac-section-wrap {
        padding: 15px 4% 5px;
    }

    .opac-section-slider {
        padding: 0 22px;
    }

    .opac-section-slider .swiper-button-next,
    .opac-section-slider .swiper-button-prev {
        display: none;
    }
}

/* The branch logos carry a wide auto margin meant for the old slick layout. */
#slider_content .lib_member {
    margin: auto 4px;
    padding: 12px 4px 16px;
}

.cards-index-page {
    padding: 0 0 60px;
}

.cards-index-search {
    display: flex;
    gap: 10px;
    max-width: 620px;
    margin: 0 auto 10px;
}

.cards-index-search input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    border: 1px solid #e4e6ec;
    height: 46px;
    padding: 0 20px;
}

.cards-index-search input:focus {
    border-color: var(--opac-theme-color, #1c637e);
    box-shadow: 0 4px 18px rgba(28, 99, 126, 0.18);
    outline: none;
}

.cards-index-search-btn {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: 22px;
    background: var(--opac-theme-color, #1c637e);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease;
}

.cards-index-search-btn:hover,
.cards-index-search-btn:focus {
    filter: brightness(0.92);
}

.cards-index-search-btn i {
    margin-inline-end: 6px;
}

.cards-index-active-search {
    text-align: center;
    margin-bottom: 30px;
}

.cards-index-active-search a {
    font-size: 15px;
    color: var(--opac-theme-color, #1c637e);
    text-decoration: none;
}

.cards-index-active-search a:hover {
    text-decoration: underline;
}

.cards-index-active-search i {
    margin-inline-end: 5px;
}

@media (max-width: 575px) {
    .cards-index-search {
        flex-direction: column;
    }

    .cards-index-search-btn {
        width: 100%;
    }
}

/* Same equal-height reason as the slider: stretch the column, then let the card
   fill it, so a short title does not leave a stubby box in the row. */
.cards-index-page .col-centered {
    display: flex;
}

.cards-index-page .col-centered > * {
    width: 100%;
}

.cards-index-page .col-centered {
    margin-bottom: 30px;
}

.cards-index-page .cards-index-empty {
    text-align: center;
    padding: 70px 20px;
    color: #5a6079;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 10px;
}

.cards-index-page .cards-index-empty i {
    display: block;
    font-size: 42px;
    margin-bottom: 14px;
    color: #b9bcc7;
}

.cards-index-page .pagination {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

/* On the home slider a post title stays on one line; the theme's .ellipsis only
   sets overflow: hidden, so the clipping parts have to be spelled out. The listing
   page keeps its own multi-line clamp. */
.opac-section-slider .post-card-title,
.opac-section-slider .post-card-title a.title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The ellipsis has to sit on the box that directly holds the text; on the inline
   anchor the glyph is not drawn, so give it a block box of its own. */
.opac-section-slider .post-card-title a.title {
    display: block;
}

/* ---------- Service and post cards ---------- */

/* The card markup ships inline box-shadow/background, so these need to win.
   Scoped to the listing pages: the home sliders keep their original card look. */
.cards-index-page .item {
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(28, 45, 74, 0.08) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.cards-index-page .item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(28, 45, 74, 0.16) !important;
}

.cards-index-page .item .home-post-img-container {
    border-radius: 0;
    margin-bottom: 0;
    position: relative;
}

.cards-index-page .item .home-post-img-container img {
    border-radius: 0;
    transition: transform 0.4s ease;
}

.cards-index-page .item:hover .home-post-img-container img {
    transform: scale(1.05);
}

.cards-index-page .item .gray.section-small {
    background: #fff;
    padding: 16px 18px 18px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cards-index-page .item h4 {
    margin: 0;
    line-height: 1.5;
}

.cards-index-page .item h4 a.title {
    font-size: 16px;
    color: #2c3145;
    text-decoration: none;
    /* Long catalogue titles must not stretch one card past the rest of the row. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cards-index-page .item:hover h4 a.title {
    color: var(--opac-theme-color, #1c637e);
}

/* ---------- Home sections on mobile ---------- */

/* The caption only exists for the touch layout, where the flip back is unreachable. */
.open-access-mobile-caption {
    display: none;
}

@media (max-width: 767px) {
    /* One statistic per row: two columns leave the numbers cramped on a phone. */
    #statisticChilds .item {
        width: 100% !important;
        float: none !important;
    }

    /* style.css gives this container max-width: max-content with inline-block,
       unsized children, which collapsed every resource tile to ~30px wide. */
    .open-acces-resources-container {
        display: flex !important;
        flex-wrap: wrap;
        max-width: none !important;
        justify-content: center;
    }

    .open-acces-resource {
        display: block !important;
        width: 50%;
        float: none !important;
        padding: 0 8px;
    }

    /* Hover cannot happen on touch, so the card stops being a flip card: the front
       sits in normal flow and the back is dropped entirely. */
    .open-access-flip-card,
    .open-access-flip-inner,
    .open-access-flip-front {
        position: static;
        min-height: 0;
        transform: none !important;
        perspective: none;
    }

    .open-access-flip-card:hover .open-access-flip-inner {
        transform: none !important;
    }

    .open-access-flip-back {
        display: none !important;
    }

    .open-access-mobile-caption {
        display: block;
        text-align: center;
        padding: 8px 4px 0;
    }

    .open-access-mobile-title {
        display: block;
        font-size: 13px;
        line-height: 1.4;
        color: #2c3145;
    }

    .open-access-mobile-lock {
        display: inline-block;
        margin-top: 4px;
        font-size: 11px;
        color: #b05a2f;
    }

    /* Restricted tiles read as locked without needing the hover-only back face. */
    .no_access .home-resource-img-container img {
        filter: grayscale(1);
        opacity: 0.65;
    }
}

/* ---------- Branch cards on /libraries ---------- */

/* The listing reuses the home slider's bare-logo partial, which is only a logo and
   a caption. On this page it should read as a card like the service and post
   entries, so the plain markup is dressed up here rather than forked into a
   second partial. Scoped to .cards-index-page: the slider keeps its bare logos. */
.cards-index-page .col-centered > a {
    display: flex;
    width: 100%;
    text-decoration: none;
}

.cards-index-page .lib_member {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(28, 45, 74, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Replaces .growdiv:hover, whose 1.15 scale is meant for a floating logo. */
.cards-index-page .lib_member:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(28, 45, 74, 0.16);
}

.cards-index-page .lib_logo_slider {
    width: 100%;
    max-width: 100%;
    height: 150px;
    margin: 0;
    padding: 24px;
    background: #f7f8fa;
    object-fit: contain;
}

.cards-index-page .text_slide {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 16px;
    border-top: 1px solid #eef0f4;
    font-size: 15px;
    line-height: 1.5;
    color: #2c3145;
    text-align: center;
}