/**
 * The catalogue grid on the "Каталоги" page.
 *
 * Every rule is scoped under `.siggi-catalogues-grid`, and the file is enqueued
 * from the shortcode's own render, so it reaches no page that has no grid on it.
 *
 * A card is one link — cover, title, size and button all inside the same `<a>`
 * (see kute_boutique_catalogue_grid_shortcode() for why) — so the hover state
 * belongs to the link and every child is `pointer-events` transparent by simply
 * not being interactive. Nothing here needs JavaScript.
 *
 * **The cover is fitted, never cropped.** That is the opposite of what
 * assets/css/clients.css does with a photograph and the same as what
 * assets/css/partners.css does with a logo, for the same reason: a catalogue
 * cover is a designed page with type at its edges, and a crop that takes 8 % off
 * the top takes the title of the catalogue with it. The box therefore carries
 * the A4 ratio the three PDFs share (1 / 1.414) and a cover of any other shape
 * sits inside it with white on two sides, which is what a printed cover looks
 * like on a shelf anyway.
 *
 * There is no RTL section and no entry in the theme's RTL sheet: `auto-fill`
 * plus `minmax` mirrors on its own, and nothing here is positioned to a side.
 */

/* -------------------------------------------------------------------------
 * The grid
 * ---------------------------------------------------------------------- */

.siggi-catalogues-grid {
    display: grid;
    /* `auto-fit`, not `auto-fill`. The difference is the whole layout: with
       `auto-fill` a 1170px content column reserves four 240px tracks and the
       three catalogues sit in the first three, leaving a card's worth of empty
       page on the right — which is exactly what it looked like. `auto-fit`
       collapses the tracks nothing occupies, so three cards divide the full
       width between them and the row ends where the text above it does. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px 30px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
}

.siggi-catalogues-grid .siggi-catalogue {
    /* The ceiling `auto-fit` needs. A single catalogue would otherwise be one
       track the width of the page, and an A4 cover 1100px wide is a poster, not
       a card. At three catalogues the tracks are ~360px and this never applies;
       it only catches the one- and two-record cases, which are the normal state
       of the Hebrew and Russian pages until their editions exist. */
    max-width: 460px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* -------------------------------------------------------------------------
 * The card
 * ---------------------------------------------------------------------- */

.siggi-catalogues-grid .siggi-catalogue__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* The theme's `a` colour is its accent; a card is a surface, and its title
       reads as body copy until the pointer is over it. */
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid #ececec;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.siggi-catalogues-grid .siggi-catalogue__link:hover,
.siggi-catalogues-grid .siggi-catalogue__link:focus-visible {
    color: inherit;
    text-decoration: none;
    border-color: #d8d8d8;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.09);
    transform: translateY(-3px);
}

/* A focus ring of the theme's own kind: the card is one big link and a keyboard
   user gets no other signal, since the hover shadow alone is too subtle at the
   moment of arrival. */
.siggi-catalogues-grid .siggi-catalogue__link:focus-visible {
    outline: 2px solid #222;
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * The cover
 * ---------------------------------------------------------------------- */

.siggi-catalogues-grid .siggi-catalogue__cover {
    display: block;
    position: relative;
    /* A4 portrait, the shape all three catalogues are printed at. A cover of
       another ratio is letterboxed inside it rather than cropped to it. */
    aspect-ratio: 1 / 1.414;
    overflow: hidden;
    background: #f6f6f6;
}

.siggi-catalogues-grid .siggi-catalogue__cover img {
    display: block;
    width: 100%;
    height: 100%;
    /* `contain`, not `cover` — see this file's header. */
    object-fit: contain;
    object-position: center;
}

/* The state where Ghostscript was unavailable and nobody has uploaded a cover:
   a plain grey plate with the word PDF, which reads as "no picture yet" rather
   than as a broken image. */
.siggi-catalogues-grid .siggi-catalogue__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #b5b5b5;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 2px;
}

/* -------------------------------------------------------------------------
 * The words
 * ---------------------------------------------------------------------- */

.siggi-catalogues-grid .siggi-catalogue__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
}

.siggi-catalogues-grid .siggi-catalogue__title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.siggi-catalogues-grid .siggi-catalogue__text {
    display: block;
    color: #777;
    font-size: 13px;
    line-height: 1.5;
}

.siggi-catalogues-grid .siggi-catalogue__meta {
    display: block;
    color: #999;
    font-size: 12px;
    /* Pushed to the bottom of the card so the buttons of a row line up however
       long each description is. */
    margin-top: auto;
}

.siggi-catalogues-grid .siggi-catalogue__button {
    display: inline-block;
    align-self: flex-start;
    padding: 9px 22px;
    color: #fff;
    background: #222;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background-color 0.25s ease;
}

.siggi-catalogues-grid .siggi-catalogue__link:hover .siggi-catalogue__button,
.siggi-catalogues-grid .siggi-catalogue__link:focus-visible .siggi-catalogue__button {
    background: #c39b6a;
}

/* -------------------------------------------------------------------------
 * Phones
 * ---------------------------------------------------------------------- */

@media (max-width: 575px) {
    .siggi-catalogues-grid {
        /* Two columns rather than one: a cover is recognisable at 160px and a
           single column turns three catalogues into three screens of scrolling.
           The same call assets/css/clients.css makes at this width. */
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 24px 14px;
    }

    .siggi-catalogues-grid .siggi-catalogue__body {
        padding: 12px 14px 14px;
    }

    .siggi-catalogues-grid .siggi-catalogue__title {
        font-size: 14px;
    }

    .siggi-catalogues-grid .siggi-catalogue__text {
        /* The description is the first thing to go at this width: two cards
           side by side leave room for the name, the size and the button, and a
           paragraph under each one pushes the button off the screen. */
        display: none;
    }

    .siggi-catalogues-grid .siggi-catalogue__button {
        width: 100%;
        padding: 10px 12px;
        text-align: center;
    }
}