/**
 * Card Row — Dance Quest home section 2. Live values: row 80% wide with 104px
 * top / 48px bottom padding, 28px titles, 16px blue subtitles, 16px Times New
 * Roman body, buttons right-aligned and pulled up 20px.
 */
.cardrow {
    padding: 104px var(--section-hr-padding, 64px) 48px;
    background: var(--background, #ffffff);
}

.cardrow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5.5%;
    width: 89%; /* measured on the live page: 80px-1360px of 1440 */
    max-width: none;
    margin-inline: auto;
}

.cardrow-card { display: flex; flex-direction: column; }

.cardrow-title {
    margin: 0;
    font-family: var(--font-heading, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-weight: var(--font-heading-weight, 500);
    font-size: 28px;
    line-height: 1.2;
    color: var(--foreground, #333333);
}

.cardrow-subtitle {
    margin: 0 0 10px;
    font-family: var(--font-heading, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-weight: var(--font-heading-weight, 500);
    font-size: 16px;
    line-height: 1.4;
    color: var(--primary, #325cb2);
}

.cardrow-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.cardrow-text {
    margin: 0;
    font-family: var(--font-display, "Times New Roman", Georgia, Times, serif);
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted-foreground, #666666);
}

.cardrow-action { margin-top: 10px; text-align: right; }

@media (max-width: 980px) {
    .cardrow-grid { grid-template-columns: 1fr; width: 100%; gap: 48px; }
    .cardrow { padding-top: 64px; }
}

/* DANCEQUEST column — the grid sets its own width, so no side padding. */
.cardrow { padding-inline: 0; }
@media (max-width: 980px) {
    .cardrow-grid { width: 80%; }
}