/* =============================================================
   Selected Pages Grid Block — Stylesheet
   ============================================================= */

/* Proper aspect ratio for image container using modern CSS */
.nhsuk-card__img-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    margin-bottom: 0;
    display: block;
}

.nhsuk-card__img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

/* Slight zoom effect on hover for better UX */
.nhsuk-card__img-container:hover img {
    transform: scale(1.05);
}

/* Spacing adjustments to match NHS design system */
.nhsuk-card-group__item {
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 24px;
}

/* Ensure proper card spacing even in grid container */
.nhsuk-grid-column-full.nhsuk-card-group__item {
    margin-bottom: 32px; /* Slightly larger margin between rows */
}

/* Fix for card display - ensure proper margins */
.nhsuk-card-group {
    display: flex;
    flex-wrap: wrap;
    margin-left: -16px;
    margin-right: -16px;
}

/* Alternate background styling */
.nhsuk-card.child-page-card-alt {
    background-color: #f0f4f5; /* NHS Grey 5 */
}

/* Equal height cards */
.nhsuk-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0; /* Let the container handle vertical spacing */
}

.nhsuk-card__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.nhsuk-card__description {
    flex-grow: 1;
    margin-bottom: 16px;
}

.nhsuk-action-link {
    margin-top: auto;
}

/* Add flex to parent row to ensure columns have equal height */
.selected-pages-custom-row {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Center the image column content vertically */
.nhsuk-grid-column-three-tenths {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rounded images that fill the container */
.nhsuk-card__img-container.is-round {
    border-radius: 100%;
    width: 80%; /* Slightly smaller than full width for better aesthetics */
    padding-bottom: 80%; /* Keep 1:1 aspect ratio */
    position: relative;
    margin: 0 auto;
}

.nhsuk-card__img-container.is-round img {
    border-radius: 100%;
}

/* Custom 30/70 column split */
.nhsuk-grid-column-three-tenths {
    width: 30%;
    float: left;
    padding: 0 16px;
}

.nhsuk-grid-column-seven-tenths {
    width: 70%;
    float: left;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
}

/* Focus states — WCAG 2.4.7 / 2.4.11 */
.nhsuk-card__link:focus,
.nhsuk-card__link:focus-visible {
    outline: 4px solid #ffeb3b;
    outline-offset: 0;
    background-color: #ffeb3b;
    color: #212b32;
    text-decoration: none;
}

.nhsuk-card__img-container a:focus,
.nhsuk-card__img-container a:focus-visible {
    outline: 4px solid #ffeb3b;
    outline-offset: 4px;
}

.nhsuk-action-link__link:focus,
.nhsuk-action-link__link:focus-visible {
    outline: 4px solid #ffeb3b;
    outline-offset: 0;
    background-color: #ffeb3b;
    color: #212b32;
}

.nhsuk-action-link__link:focus .nhsuk-action-link__text,
.nhsuk-action-link__link:focus-visible .nhsuk-action-link__text {
    text-decoration: none;
}

/* Maintain responsiveness from NHS frontend */
@media (max-width: 48.0525em) {
    .nhsuk-grid-column-three-tenths,
    .nhsuk-grid-column-seven-tenths {
        width: 100%;
        float: none;
        padding: 0 16px;
    }
    
    /* Stack items on mobile */
    .selected-pages-custom-row {
        flex-direction: column;
        min-height: auto;
    }
    
    /* Adjust image sizing on mobile */
    .nhsuk-card__img-container {
        width: 60%;
        padding-bottom: 60%;
        margin: 1rem auto;
    }
}