/* =============================================================================
   Getting started page (/getting-started, views/site/getting-started.php)
   Every tutorial video of the User Guide and the website builder manual, grouped
   by topic. The video cards and the player come from the doc builds
   (docs/<dir>/embed/), so this file only lays out the page and sizes the cards
   for a grid; the card look itself stays the docs' own (video-player.css).
   ============================================================================= */

.site-getting-started .gs-hero {
    padding-bottom: 24px;
}

.site-getting-started .gs-hero-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.site-getting-started .gs-hero-stats {
    display: flex;
    gap: 0.5rem 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1.25rem 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.site-getting-started .gs-topics {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.site-getting-started .gs-topics .grove-chip {
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.site-getting-started .gs-topics .grove-chip:hover,
.site-getting-started .gs-topics .grove-chip:focus-visible {
    background: rgba(var(--color-primary-500-rgb), 0.2);
    transform: translateY(-1px);
}

/* --- One topic --------------------------------------------------------------- */

.site-getting-started .gs-section {
    padding-block: 40px;
    scroll-margin-top: 90px;
}

.site-getting-started .gs-section + .gs-section {
    border-top: 1px solid var(--border-default);
}

.site-getting-started .gs-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.site-getting-started .gs-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-500-rgb), 0.12);
    color: var(--grove-accent-ink, var(--color-primary-700));
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.site-getting-started .gs-head h2 {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    margin: 0.2rem 0 0.35rem;
}

.site-getting-started .gs-icon {
    font-size: 0.8em;
    margin-right: 0.5rem;
    color: var(--color-primary-500);
}

.site-getting-started .gs-intro {
    margin: 0;
    color: var(--text-secondary);
}

/* --- Card grid: 1 / 2 / 3 per row ------------------------------------------- */

.site-getting-started .gs-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}

@media (min-width: 620px) {
    .site-getting-started .gs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .site-getting-started .gs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.site-getting-started .gs-grid .vid {
    margin: 0;
}

.site-getting-started .gs-grid .vid-card,
.site-getting-started .gs-grid .vid-soon-box {
    max-width: none;
}

/* Smaller cards than in the docs. The poster is the video's own title card, so
   the overlay keeps only CC and the length, and the play button moves to the
   top-right corner where it never covers the poster's title. A card without a
   poster keeps its title in the overlay. */
.site-getting-started .gs-grid .vid-meta {
    left: 12px;
    right: 12px;
    bottom: 10px;
    gap: 0.45rem;
    justify-content: flex-end;
}

.site-getting-started .gs-grid .vid-card .vid-kicker,
.site-getting-started .gs-grid .vid-card:has(img) .vid-title {
    display: none;
}

.site-getting-started .gs-grid .vid-card:not(:has(img)) .vid-meta {
    justify-content: flex-start;
}

.site-getting-started .gs-grid .vid-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
}

.site-getting-started .gs-grid .vid-cc,
.site-getting-started .gs-grid .vid-dur {
    flex: none;
}

/* Only the bottom strip needs the shade behind CC and the length. */
.site-getting-started .gs-grid .vid-card::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.45));
}

.site-getting-started .gs-grid .vid-play {
    left: auto;
    top: 12px;
    right: 12px;
    width: 46px;
    height: 46px;
    margin: 0;
}

.site-getting-started .gs-grid .vid-card:hover .vid-play,
.site-getting-started .gs-grid .vid-card:focus-visible .vid-play {
    transform: scale(1.1);
}

.site-getting-started .gs-grid .vid-play svg {
    width: 18px;
    height: 18px;
    margin-left: 3px;
}

.site-getting-started .gs-grid .vid-soon-box {
    padding: 14px;
}

.site-getting-started .gs-grid .vid-soon-top {
    left: 14px;
    right: 14px;
    top: 12px;
}

.site-getting-started .gs-grid .vid-soon-title {
    font-size: 0.98rem;
    color: var(--text-primary);
}

.site-getting-started .gs-grid .vid-soon-label {
    color: var(--text-secondary);
}

@media (max-width: 575.98px) {
    .site-getting-started .gs-head {
        gap: 0.75rem;
    }
    .site-getting-started .gs-num {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.85rem;
    }
}