/* ============================================================
   GENERATEPRESS SITE CSS
   Home hero highlight underline - rainbow gradient under mark
   inside an element with class "underline"
   ============================================================ */
.underline mark {
    background-color: transparent; /* Remove default yellow */

    /* The rainbow gradient */
    background-image: linear-gradient(
        to right,
        rgba(255, 0, 0, 0.4),
        rgba(255, 165, 0, 0.4),
        rgba(255, 255, 0, 0.4),
        rgba(0, 128, 0, 0.4),
        rgba(0, 0, 255, 0.4),
        rgba(75, 0, 130, 0.4),
        rgba(238, 130, 238, 0.4)
    );

    /* Height: 100% wide, 0.3em tall */
    background-size: 100% 0.3em;
    background-repeat: no-repeat;

    /* Position: 0% horizontal, 80% vertical (climbs up the text) */
    background-position: 0% 80%;

    color: inherit;
    padding: 0 2px;
}


/* ============================================================
   TABLET COLUMN STACKING UTILITY
   Add class "stack-on-tablet" to a columns block
   to force single-column layout at 1024px or below.
   ============================================================ */
@media (max-width: 1024px) {
    .stack-on-tablet {
        flex-wrap: wrap !important;
    }

    .stack-on-tablet > .wp-block-column {
        flex-basis: 100% !important;
    }
}


/* ============================================================
   CARD WITH MEDIA (image + text)
   Inner content lifts on hover; wrapper (and its background) stays put.
   Clickable behavior comes from Gutenberg's native Group link.
   ============================================================ */
.card-media > * {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-media:hover > * {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-media img {
    border-radius: 8px;
}

.card-media a {
    text-decoration: none;
    color: inherit;
}


/* ============================================================
   CARD TEXT ONLY
   Whole card lifts as one unit on hover.
   Clickable behavior comes from Gutenberg's native Group link.
   ============================================================ */
.card-text {
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-text:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-text a {
    text-decoration: none;
    color: inherit;
}