/*
 * PeacePoint Responsive Controls v1.3.0
 * Supports Image + Button and Image + Button + Paragraph cards.
 * v1.3 sizes the grid from the ACTUAL content width, not viewport width.
 */

.pp-auto-card-grid {
    box-sizing: border-box;
    display: grid !important;
    /* Cards stay comfortably sized and wrap only when their own row runs out of room. */
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)) !important;
    gap: clamp(18px, 2.5vw, 34px) !important;
    align-items: stretch !important;
    width: 100% !important;
}

.pp-auto-card-grid > .pp-auto-card {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex-basis: auto !important;
}

/* Image, button strip and optional description always share the card width. */
.pp-auto-card > .wp-block-image,
.pp-auto-card > figure.wp-block-image,
.pp-auto-card > .wp-block-buttons,
.pp-auto-card > p {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pp-auto-card > .wp-block-image,
.pp-auto-card > figure.wp-block-image {
    overflow: hidden;
    margin-bottom: 0 !important;
}

.pp-auto-card > .wp-block-image img,
.pp-auto-card > figure.wp-block-image img {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

.pp-auto-card > .wp-block-buttons {
    display: flex !important;
    margin-top: 0 !important;
}

.pp-auto-card > .wp-block-buttons > .wp-block-button {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.pp-auto-card > .wp-block-buttons .wp-block-button__link {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

.pp-auto-card h1,
.pp-auto-card h2,
.pp-auto-card h3,
.pp-auto-card h4,
.pp-auto-card h5,
.pp-auto-card h6,
.pp-auto-card p,
.pp-auto-card a {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* On phones, always use one full-width card per row. */
@media (max-width: 600px) {
    .pp-auto-card-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}