/**
 * BIBLIOTECA DIGITALE — shared front-end components.
 *
 * Primitives only: the book card, the lists that hold it, badges, buttons,
 * form fields and the carousel. No page decides anything here, and nothing
 * here knows which plugin is calling — a consumer picks a modifier and adds
 * its own state class.
 *
 * Depends on `bd-tokens` for every colour, radius and size. Loading this file
 * without it still renders correctly: each token carries its own fallback
 * there, and nothing below invents a value.
 *
 * ── The three card layouts, and where each comes from ────────────────────────
 *
 *   --grid     cover on top, details below, no border and no fill, one
 *              hairline between cover and text.
 *              Grafica/7-PAGINA-LIBRI-DIGITALI_v2.jpg
 *   --row      cover on the left, details on the right, 12px radius, surface
 *              fill, 1px hairline border. This is the carousel card.
 *              Grafica/6-1_MYHOME-CATTOLICA.png, Grafica/5_HP-CATTOLICA.png
 *   --compact  a single line: small cover, title, authors, both truncated.
 *              The reader header bar and the booking page.
 *
 * ── Breakpoints ──────────────────────────────────────────────────────────────
 *
 * 980px and 767px, which are Divi 5's own two enabled breakpoints
 * (Framework/Breakpoint/Breakpoint.php). Divi carries them in no CSS variable
 * — they are baked into its generated media queries — so they are written out
 * here too, and changing Divi's breakpoint settings does not reach this file.
 *
 * @package BD_Shared
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. LISTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Why this one rule is !important ─────────────────────────────────────────
   Divi's own stylesheet carries

     #left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul,
     .et-l--header ul { list-style-type: disc; padding: 0 0 23px 1em; … }

   at (0,1,1), and this selector is a single class at (0,1,0). Inside a Divi
   layout — which is every page of this site — Divi wins, so a plain
   `list-style: none` here does nothing: the bullets stay, and the list gains a
   1em left indent and 23px of bottom padding nobody asked for.

   Raising specificity instead would mean either tying Divi at (0,1,1) and
   depending on enqueue order, which Dynamic Assets is free to change, or
   doubling the class, which reads as a trick. Divi solves the same problem in
   its own module lists the same way.

   Every <ul> this file styles carries .bd-books-list, the carousel track
   included, so one selector covers all of them. */
.bd-books-list {
    list-style: none !important;
    margin: 0;
    padding: 0 !important;
}

/* Three columns, stated and not derived. The covers are portrait and the
   column count is what sets their size, so `auto-fill` gave four on a wide
   screen and two on a narrow one; each step down is written out instead. */
.bd-books-list--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--bd-space-xl);
    row-gap: calc(var(--bd-space-xl) + var(--bd-space-md));
}

.bd-books-list--list {
    display: flex;
    flex-direction: column;
}

@media (max-width: 980px) {
    .bd-books-list--grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--bd-space-lg);
        row-gap: var(--bd-space-xl);
    }
}

@media (max-width: 767px) {
    .bd-books-list--grid {
        grid-template-columns: 1fr;
        row-gap: var(--bd-space-lg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BOOK CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.bd-book-card {
    position: relative;
    box-sizing: border-box;
    font-family: var(--bd-font-sans);
    color: var(--bd-text-slate);
}

.bd-book-card *,
.bd-book-card *::before,
.bd-book-card *::after {
    box-sizing: border-box;
}

.bd-book-card__cover {
    display: block;
    flex-shrink: 0;
}

.bd-book-card__cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--bd-radius-sm);
}

.bd-book-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--bd-space-sm);
    min-width: 0;
}

.bd-book-card__title {
    margin: 0;
    font-size: var(--bd-fs-h3);
    font-weight: var(--bd-fw-heading);
    line-height: 1.3;
    color: var(--bd-text-heading);
    overflow-wrap: anywhere;
}

.bd-book-card__title a {
    color: inherit;
    text-decoration: none;
}

.bd-book-card__title a:hover,
.bd-book-card__title a:focus-visible {
    text-decoration: underline;
}

.bd-book-card__authors {
    margin: 0;
    font-size: var(--bd-fs-sm);
    line-height: 1.4;
    color: var(--bd-text-slate);
}

.bd-book-card__meta {
    margin: 0;
    font-size: var(--bd-fs-sm);
    line-height: 1.4;
    color: var(--bd-text-slate);
}

.bd-book-card__meta--subtle {
    color: var(--bd-text-subtle);
}

.bd-book-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bd-space-sm);
}

/* ── 2a. Grid: cover on top ──────────────────────────────────────────────────
   The cover band is a fixed height with the image bottom-aligned inside it, so
   the hairline, the title and everything under it line up across a row however
   tall each jacket happens to be. */

.bd-book-card--grid {
    display: flex;
    flex-direction: column;
    gap: var(--bd-space-md);
}

.bd-book-card--grid .bd-book-card__cover {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 20em;
    padding-bottom: var(--bd-space-md);
    border-bottom: 1px solid var(--bd-border);
}

.bd-book-card--grid .bd-book-card__cover img {
    width: auto;
    max-width: 70%;
    max-height: 20em;
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .14);
}

.bd-book-card--grid .bd-book-card__authors {
    font-size: var(--bd-fs-lg);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.bd-book-card--grid .bd-book-card__meta {
    font-size: var(--bd-fs-lg);
}

.bd-book-card--grid .bd-book-card__actions {
    justify-content: flex-end;
}

/* ── 2b. Row: cover on the left ──────────────────────────────────────────── */

.bd-book-card--row {
    display: flex;
    align-items: flex-start;
    gap: var(--bd-space-md);
    height: 100%;
    padding: var(--bd-space-md);
    border: 1px solid var(--bd-border-subtle);
    border-radius: var(--bd-radius-lg);
    background-color: var(--bd-surface);
}

.bd-book-card--row .bd-book-card__cover {
    width: 110px;
}

.bd-book-card--row .bd-book-card__cover img {
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}

.bd-book-card--row .bd-book-card__body {
    flex: 1 1 auto;
    align-self: stretch;
}

.bd-book-card--row .bd-book-card__title {
    font-size: var(--bd-fs-lg);
}

.bd-book-card--row .bd-book-card__actions {
    margin-top: auto;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .bd-book-card--row .bd-book-card__cover {
        width: 84px;
    }
}

/* ── 2c. Compact: one line ───────────────────────────────────────────────── */

.bd-book-card--compact {
    display: flex;
    align-items: center;
    gap: var(--bd-space);
    min-width: 0;
}

.bd-book-card--compact .bd-book-card__cover {
    width: 44px;
}

.bd-book-card--compact .bd-book-card__cover img {
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
}

.bd-book-card--compact .bd-book-card__body {
    gap: 2px;
    overflow: hidden;
}

.bd-book-card--compact .bd-book-card__title {
    font-size: var(--bd-fs-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-book-card--compact .bd-book-card__authors {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 2d. Title clamping ──────────────────────────────────────────────────────
   Two lines in the mockups, in every layout that has room for two. Guarded so
   a browser without -webkit-line-clamp simply shows the whole title rather
   than a clipped box with no ellipsis. */

@supports (-webkit-line-clamp: 2) {
    .bd-book-card--grid .bd-book-card__title,
    .bd-book-card--row .bd-book-card__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BADGES
   State travels in the label as well as the colour — which is why an
   institution accent landing near a status colour is harmless, and why these
   tones are fixed and never derived from --bd-accent.
   ═══════════════════════════════════════════════════════════════════════════ */

.bd-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: var(--bd-radius-sm);
    font-family: var(--bd-font-sans);
    font-size: var(--bd-fs-xs);
    font-weight: var(--bd-fw-heading);
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    background-color: var(--bd-neutral-soft);
    color: var(--bd-neutral);
}

.bd-badge--success {
    background-color: var(--bd-success-soft);
    color: var(--bd-success-ink);
}

.bd-badge--warning {
    background-color: var(--bd-warning-soft);
    color: var(--bd-warning-ink);
}

.bd-badge--danger {
    background-color: var(--bd-danger-soft);
    color: var(--bd-danger);
}

.bd-badge--info {
    background-color: var(--bd-info-soft);
    color: var(--bd-info);
}

.bd-badge--neutral {
    background-color: var(--bd-neutral-soft);
    color: var(--bd-neutral);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. BUTTONS
   Two styles, which is all the mockups use — a solid navy fill and a blue
   outline on white — plus the circular icon button they use for every
   per-item action.
   ═══════════════════════════════════════════════════════════════════════════ */

.bd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bd-space-sm);
    padding: 0 var(--bd-space-lg);
    min-height: 52px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--bd-font-sans);
    font-size: var(--bd-fs-md);
    font-weight: var(--bd-fw-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Divi decorates every button with an arrow in ::after and widens its padding
   on hover, so a button would jump a few pixels under the cursor. */
.bd-btn::after {
    display: none !important;
}

/* The :not() is load-bearing, and it is here because leaving it out broke the
   "..." trigger. This rule is (0,2,0) and `.bd-btn--icon`'s own `padding: 0`
   is (0,1,0), so on hover it won and gave a 40px-wide circle 24px of padding
   on each side. The content box collapsed to zero and the icon vanished under
   the cursor — the ring stayed, the three dots did not. An icon button has no
   padding to defend against Divi in the first place: its size is fixed. */
.bd-btn:not(.bd-btn--icon):hover {
    padding: 0 var(--bd-space-lg) !important;
}

.bd-btn--primary {
    background-color: var(--bd-blue-navy);
    border-color: var(--bd-blue-navy);
    color: var(--bd-text-invert);
}

.bd-btn--primary:hover,
.bd-btn--primary:focus-visible {
    background-color: var(--bd-blue-dark);
    border-color: var(--bd-blue-dark);
    color: var(--bd-text-invert);
}

.bd-btn--ghost {
    background-color: var(--bd-white);
    border-color: var(--bd-blue);
    color: var(--bd-blue);
}

.bd-btn--ghost:hover,
.bd-btn--ghost:focus-visible {
    background-color: var(--bd-blue-tint);
    color: var(--bd-blue);
}

.bd-btn[disabled],
.bd-btn[aria-disabled="true"],
.bd-btn.is-disabled {
    border-color: var(--bd-blue-muted);
    background-color: var(--bd-white);
    color: var(--bd-blue-muted);
    cursor: not-allowed;
}

.bd-btn--primary[disabled],
.bd-btn--primary[aria-disabled="true"] {
    background-color: var(--bd-blue-muted);
    border-color: var(--bd-blue-muted);
    color: var(--bd-white);
}

/* ── 4a. Circular icon button ────────────────────────────────────────────────
   The size travels in --bd-btn-icon-size so a card modifier can set it once:
   52px in the catalogue grid, 34px in a carousel, as measured. */

.bd-btn--icon {
    --bd-btn-icon-size: 40px;

    width: var(--bd-btn-icon-size);
    height: var(--bd-btn-icon-size);
    min-height: 0;
    padding: 0 !important;
    border-radius: var(--bd-radius-pill);
    background-color: var(--bd-white);
    border-color: var(--bd-blue);
    color: var(--bd-blue);
}

.bd-btn--icon:hover,
.bd-btn--icon:focus-visible {
    background-color: var(--bd-blue-tint);
    color: var(--bd-blue);
}

.bd-btn--icon svg {
    display: block;
    width: 45%;
    height: 45%;
    fill: currentColor;
}

.bd-book-card--grid .bd-btn--icon {
    --bd-btn-icon-size: 52px;
}

.bd-book-card--row .bd-btn--icon,
.bd-book-card--compact .bd-btn--icon {
    --bd-btn-icon-size: 34px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. FORM FIELDS
   Shared by the support form, the registration and profile forms and the
   catalogue's facet panel. The border is --bd-border-strong and not
   --bd-border: a control's boundary needs 3:1 (WCAG 1.4.11), and the
   decorative hairline is at 1.29:1.
   ═══════════════════════════════════════════════════════════════════════════ */

.bd-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--bd-space-xs);
    margin-bottom: var(--bd-space-md);
}

.bd-form-field > label {
    font-family: var(--bd-font-sans);
    font-size: var(--bd-fs-sm);
    font-weight: var(--bd-fw-medium);
    color: var(--bd-text);
}

.bd-form-field input[type="text"],
.bd-form-field input[type="email"],
.bd-form-field input[type="search"],
.bd-form-field input[type="tel"],
.bd-form-field input[type="url"],
.bd-form-field input[type="password"],
.bd-form-field select,
.bd-form-field textarea {
    width: 100%;
    padding: var(--bd-space) var(--bd-space-md);
    border: 1px solid var(--bd-border-strong);
    border-radius: 8px;
    background-color: var(--bd-white);
    font-family: var(--bd-font-sans);
    font-size: var(--bd-fs-md);
    color: var(--bd-text);
}

.bd-form-field input::placeholder,
.bd-form-field textarea::placeholder {
    color: var(--bd-text-subtle);
}

.bd-form-field input:focus,
.bd-form-field select:focus,
.bd-form-field textarea:focus {
    outline: 2px solid var(--bd-accent);
    outline-offset: 1px;
    border-color: var(--bd-accent);
}

.bd-form-field--invalid input,
.bd-form-field--invalid select,
.bd-form-field--invalid textarea {
    border-color: var(--bd-danger);
}

.bd-form-field__hint {
    font-size: var(--bd-fs-sm);
    color: var(--bd-text-subtle);
}

.bd-form-field__error {
    font-size: var(--bd-fs-sm);
    color: var(--bd-danger);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. CAROUSEL
   The track alone is the whole component without JavaScript: a native
   scroll-snap strip that already works with a keyboard and a trackpad.
   bd-shared/assets/js/carousel.js adds the arrows and the dots on top and
   removes nothing.
   ═══════════════════════════════════════════════════════════════════════════ */

.bd-carousel {
    position: relative;
}

.bd-carousel__track {
    --bd-carousel-per-view: 3;

    display: flex;
    flex-wrap: nowrap;
    gap: var(--bd-space-md);
    margin: 0;
    /* !important because .bd-books-list above needs it against Divi, and the
       track carries that class too — without it this padding would lose to its
       own stylesheet and the native scrollbar would have nowhere to sit. */
    padding: 0 0 var(--bd-space-sm) !important;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.bd-carousel__track > * {
    flex: 0 0 calc(
        (100% - (var(--bd-carousel-per-view) - 1) * var(--bd-space-md))
        / var(--bd-carousel-per-view)
    );
    scroll-snap-align: start;
}

/* Only once the script has taken over: before that the strip must keep its
   own visible scrollbar, or a viewer without JS has no way to move it. */
.bd-carousel.is-enhanced .bd-carousel__track {
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bd-carousel.is-enhanced .bd-carousel__track::-webkit-scrollbar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .bd-carousel.is-enhanced .bd-carousel__track {
        scroll-behavior: auto;
    }
}

/* ── 6a. Arrows, outside the strip ───────────────────────────────────────── */

.bd-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.bd-carousel__arrow--prev {
    left: calc(-1 * var(--bd-space-xl));
}

.bd-carousel__arrow--next {
    right: calc(-1 * var(--bd-space-xl));
}

/* ── 6b. Dots ────────────────────────────────────────────────────────────── */

.bd-carousel__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bd-space-md);
    margin-top: var(--bd-space-md);
    padding: 0;
    list-style: none;
}

.bd-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--bd-radius-pill);
    background-color: #C9CEDD;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.bd-carousel__dot[aria-current="true"] {
    background-color: var(--bd-blue);
    transform: scale(1.25);
}

.bd-carousel__dot:focus-visible {
    outline: 2px solid var(--bd-blue);
    outline-offset: 3px;
}

/* The overflow marker past the eighth page. Not a control: it says the strip
   runs on, and the arrows are what reach the rest. */
.bd-carousel__dots-more {
    font-family: var(--bd-font-sans);
    font-size: var(--bd-fs-sm);
    line-height: 1;
    color: var(--bd-text-subtle);
}

@media (max-width: 980px) {
    .bd-carousel__track {
        --bd-carousel-per-view: 2;
    }

    .bd-carousel__arrow--prev {
        left: 0;
    }

    .bd-carousel__arrow--next {
        right: 0;
    }
}

@media (max-width: 767px) {
    .bd-carousel__track {
        --bd-carousel-per-view: 1;
    }
}