/* Hover Reveal Cards — frontend. Everything scoped under .hrc-grid to limit theme bleed. */

.hrc-grid {
    --hrc-accent: #2563eb;
    --hrc-cols: 3;
    --hrc-overlay: 0.55;
    --hrc-radius: 22px;

    display: grid;
    grid-template-columns: repeat(var(--hrc-cols), 1fr);
    gap: 22px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.hrc-grid * { box-sizing: border-box; }

/* ---------- Card shell ---------- */
.hrc-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--hrc-radius);
    min-height: var(--hrc-card-h, 460px);
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    cursor: default;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    transform: translateZ(0);
}
.hrc-card:focus { outline: 3px solid var(--hrc-accent); outline-offset: 3px; }

/* ---------- Clickable card (whole card is a link) ---------- */
.hrc-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--hrc-radius);
    outline: none;
}
.hrc-card-link:focus-visible { outline: 3px solid var(--hrc-accent); outline-offset: 3px; }
.hrc-card-link .hrc-card { cursor: pointer; }

/* ---------- Background (parallax + zoom target) ---------- */
.hrc-card__bg {
    position: absolute;
    /* Oversized so the parallax shift never exposes an edge. */
    inset: -8%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    transform: scale(1);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.hrc-card:hover .hrc-card__bg,
.hrc-card:focus .hrc-card__bg {
    transform: scale(1.08);
}

/* ---------- Dark gradient for legibility ---------- */
.hrc-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, calc(var(--hrc-overlay) + 0.25)) 0%,
            rgba(0, 0, 0, var(--hrc-overlay)) 45%,
            rgba(0, 0, 0, calc(var(--hrc-overlay) * 0.35)) 100%
        );
    transition: background .45s ease;
}
.hrc-card:hover .hrc-card__overlay,
.hrc-card:focus .hrc-card__overlay {
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, calc(var(--hrc-overlay) + 0.35)) 0%,
            rgba(0, 0, 0, calc(var(--hrc-overlay) + 0.1)) 60%,
            rgba(0, 0, 0, calc(var(--hrc-overlay) * 0.5)) 100%
        );
}

/* ---------- Text content ---------- */
.hrc-card__content {
    position: relative;
    z-index: 2;
    padding: 30px;
    color: #fff;
    width: 100%;
    /* Logical alignment: flips automatically with dir="rtl". */
    text-align: start;
}
.hrc-grid[dir="rtl"] { direction: rtl; }
.hrc-grid[dir="ltr"] { direction: ltr; }

.hrc-card__title {
    margin: 0 0 10px;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.hrc-card__subtitle {
    margin: 0;
    font-size: clamp(15px, 1.4vw, 19px);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* ---------- Hover-revealed paragraph ---------- */
.hrc-card__body {
    /* Collapsed by default; animate both height and opacity. */
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(8px);
    margin-top: 0;
    transition:
        grid-template-rows .45s cubic-bezier(.22, .61, .36, 1),
        opacity .4s ease,
        transform .45s ease,
        margin-top .45s ease;
}
.hrc-card__body > * {
    margin: 0;
    overflow: hidden;
    min-height: 0;
    font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.hrc-card__body > * + * { margin-top: .6em; }

.hrc-card.has-body:hover .hrc-card__body,
.hrc-card.has-body:focus .hrc-card__body {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
    margin-top: 16px;
}

/* ---------- Responsive ----------
   The column count is applied inline (so it always takes effect); below we
   only stack to a single column on phones, using !important so it overrides
   the inline grid value. */
@media (max-width: 640px) {
    .hrc-grid { grid-template-columns: 1fr !important; gap: 18px; }
    /* On touch devices there is no hover — reveal the paragraph by default. */
    .hrc-card.has-body .hrc-card__body {
        grid-template-rows: 1fr;
        opacity: 1;
        transform: none;
        margin-top: 14px;
    }
}

/* Respect users who prefer no motion. */
@media (prefers-reduced-motion: reduce) {
    .hrc-card__bg,
    .hrc-card__body,
    .hrc-card__overlay {
        transition: opacity .2s ease;
    }
    .hrc-card:hover .hrc-card__bg,
    .hrc-card:focus .hrc-card__bg { transform: none; }
}