/*
 * Shop cards block (rackethouse/shop-cards).
 *
 * Loaded on the front end and in the block editor - registered as both 'style' and
 * 'editor_style' on the block - so editing looks like the published result.
 *
 * Kept out of the theme's style.css so the editor loads the block's styles and nothing else.
 *
 * Each card's colour arrives inline as --rh-accent, set per card in the editor.
 */

.rh-shopcards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .rh-shopcards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

.rh-shopcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 2rem 2rem 0;
    border-bottom: 4px solid var(--rh-accent, #134e4a);
}

a.rh-shopcard {
    transition: box-shadow 0.15s ease;
}

a.rh-shopcard:hover {
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.09);
}

.rh-shopcard__title {
    margin: 0 0 1.75rem;
    line-height: 1;
    text-transform: uppercase;
}

/* Sport name, in the shop's colour, sitting above the shared "SHOPPEN" word. */
.rh-shopcard__sport {
    display: block;
    color: var(--rh-accent, #134e4a);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.rh-shopcard__suffix {
    display: block;
    font-size: 2.25rem;
    margin-top: 0.25rem;
}

/*
 * Fixed ratio so the three cards line up regardless of the source photo - the stock images
 * are a mix of 1.25:1 and 1.39:1.
 */
.rh-shopcard__media {
    margin-bottom: 2rem;
}

.rh-shopcard__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/*
 * Editor only.
 *
 * The card is a block wrapper there, and the picture is a button wrapping the image so it can
 * be swapped. Neither should look any different from the published card.
 */
.editor-styles-wrapper .rh-shopcard__media-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.editor-styles-wrapper .rh-shopcards > .block-editor-inner-blocks,
.editor-styles-wrapper .rh-shopcards > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: contents;
}

.editor-styles-wrapper .rh-shopcard .components-placeholder {
    min-height: 12rem;
}

/*
 * Top of the section, on mobile.
 *
 * The block sits in a group carrying py-16, so there is 64px of background above the first
 * card while the card's own sides are 32px and the gap between cards is 24px. On a narrow
 * screen that reads as a gap rather than as the section starting, so the top comes down to
 * match the card's side padding.
 *
 * Reached from the block's own class with :has() - the padding lives on a group block in post
 * content, and this keeps the rule with the block it belongs to instead of editing the page.
 * (0,2,0) beats the py-16 utility. Bottom is left alone: it separates this section from the
 * next one, which is a different job from seating the first card.
 */
@media (max-width: 767px) {
    .wp-block-group:has(> .rh-shopcards) {
        padding-top: 2rem;

        /*
         * The group is alignfull and its constrained layout adds no horizontal padding, so on
         * mobile the cards ran edge to edge with no background showing beside them. 1rem is the
         * parent's own container gutter (.container is px-4), so the cards line up with every
         * other contained section on the page.
         */
        padding-inline: 1rem;
    }

    /*
     * Tighter card padding on a narrow screen, where 2rem eats a large share of the width.
     * Desktop keeps 2rem.
     */
    .rh-shopcard {
        padding: 1.5rem 1.25rem 0;
    }

    .rh-shopcard__media {
        margin-bottom: 1.5rem;
    }

    /*
     * Two classes deep on purpose. The parent's styles.css carries
     * .wp-blocks h3 {margin-top: 2rem}, which at (0,1,1) beats a single .rh-shopcard__title and
     * adds 32px above the heading on top of the card's own padding - so the gap over the sport
     * name comes out double every other edge. Scoped here with the rest of the mobile padding;
     * desktop still carries that extra 2rem.
     */
    .rh-shopcards .rh-shopcard__title {
        margin-top: 0;
        margin-bottom: 1.25rem;
    }
}