/* ── Hub page design system ──────────────────────────────────────────────────
 * Shared typography + structural tokens for hub landing pages
 * (/crochet-patterns/, /discover/).
 *
 * Colors reference Kadence palette CSS vars (--global-palette*) so a palette
 * change in the Customizer propagates here automatically.
 *
 * Note: Kadence's own stylesheet targets .has-theme-palette-N-background-color
 * but the WP block editor emits .has-palette-N-background-color (no "theme").
 * The rules below bridge that gap for every palette value used on hub pages.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Palette background bridges — WP block attr → Kadence CSS var */
.has-palette-1-background-color  { background-color: var(--global-palette1) !important; }
.has-palette-2-background-color  { background-color: var(--global-palette2) !important; }
.has-palette-7-background-color  { background-color: var(--global-palette7) !important; }
.has-palette-8-background-color  { background-color: var(--global-palette8) !important; }
.has-palette-9-background-color  { background-color: var(--global-palette9) !important; }

/* Orange small-caps eyebrow above H1 in the hero band. */
.mcs-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--global-palette1);
}

/* Card section: small-caps category label above the serif H3 */
.mcs-card-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--global-palette1);
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* Card section: bold "Browse [Category] →" link at the bottom of each card */
.mcs-card-link {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Card container border.
 * palette1 (accent orange) for the top accent; neutral #eee for the other
 * three sides (not a brand colour — stays hardcoded). */
.mcs-card {
    border-top: 4px solid var(--global-palette1);
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
    border-radius: 10px;
    overflow: hidden; /* clip the image to the rounded corners */
}

/* Card image: sits at the very top of the card, edge-to-edge.
 * The wp:image block is inserted as the first child of .mcs-card, with
 * negative margins to pull it past the card's internal padding so the photo
 * meets the orange top accent and the left/right card borders. Aspect ratio
 * fixed at 4:3 so cards stay uniform regardless of the source crop.
 *
 * Selector specificity bumped (.mcs-card figure.mcs-card__image) so the
 * negative top/bottom margins win against Kadence's figure.wp-block-image
 * rules — the left/right pull would otherwise still work but the photo
 * would float below the orange accent with the full card padding showing. */
.mcs-card figure.mcs-card__image {
    margin-top: -2.25rem;
    margin-right: -2rem;
    margin-bottom: 1.5rem;
    margin-left: -2rem;
}

.mcs-card .mcs-card__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Outlined orange CTA button at the foot of each post-grid section. */
.wp-block-buttons:has(.mcs-section-cta) {
    margin-top: 4rem !important;
}

.mcs-section-cta .wp-block-button__link,
.mcs-section-cta .wp-block-button__link:visited {
    background: transparent !important;
    color: var(--global-palette1) !important;
    border: 2px solid var(--global-palette1) !important;
    border-radius: 8px !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.82rem;
    padding: 0.75rem 2.5rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.mcs-section-cta .wp-block-button__link:hover {
    background: var(--global-palette1) !important;
    color: #ffffff !important;
}