/* Feature selector.
   Table-like layout: the screenshot column keeps a set width, the menu column
   takes the rest and shrinks (down to 18rem) before the screenshot does. */
.feature-select {
    --fs-blue: #2185d0;
    --fs-ink: #1b1c1d;
    --fs-muted: #7b8088;
    --fs-radius: 12px;
    --fs-speed: 0.3s;

    --fs-shot-w: 640px;       /* width the screenshot column holds at full size */
    --fs-shot-ratio: 7 / 5;   /* width / height. Tune so heights match at full width */
    --fs-menu-min: 18rem;     /* the menu never gets narrower than this */
}

/* Grid (mobile first). Remove the grid-container and left-padding classes from
   this element, and delete the old .feature-grid rules from your global CSS. */
.feature-select.feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2em;
    align-items: center;
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: 1.5em;
    box-sizing: border-box;
    align-items: start;
}

@media (min-width: 900px) {
    .feature-select.feature-grid {
        grid-template-columns: minmax(0, var(--fs-shot-w)) minmax(var(--fs-menu-min), 1fr);
        padding-inline: 50px;
    }
}

@media (min-width: 1200px) {
    .feature-select.feature-grid {
        padding-left: 100px;
    }
}

.feature-select .accent {
    color: var(--fs-blue);
}

.feature-select .feature-intro {
    max-width: 34em;
    margin-bottom: 2rem;
    text-wrap: pretty;
}

/* List */
.feature-list {
    display: flex;
    flex-direction: column;
}

.feature-item {
    border-left: 3px solid transparent;
    transition: border-color var(--fs-speed);
}

.feature-item.is-active {
    border-left-color: var(--fs-blue);
}

.feature-toggle {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    color: var(--fs-muted);
    cursor: pointer;
    transition: color var(--fs-speed);
}

.feature-toggle .icon {
    flex: none;
    width: 1.6em;
    margin: 0;
    text-align: center;
}

.feature-title {
    font-size: 1.2em;
    font-weight: 700;
}

.feature-toggle:hover {
    color: var(--fs-ink);
}

.feature-toggle:focus-visible {
    outline: 2px solid var(--fs-blue);
    outline-offset: -2px;
}

.feature-item.is-active .feature-toggle {
    color: var(--fs-ink);
}

.feature-item.is-active .feature-toggle .icon {
    color: var(--fs-blue);
}

/* Expanding description (grid-rows trick animates to auto height) */
.feature-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--fs-speed) ease;
}

.feature-item.is-active .feature-body {
    grid-template-rows: 1fr;
}

.feature-body-inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    padding: 0 1rem 0 4.1rem; /* lines the text up under the title */
    transition: visibility 0s var(--fs-speed);
}

.feature-item.is-active .feature-body-inner {
    visibility: visible;
    transition-delay: 0s;
}

.feature-body-inner p {
    margin: 0 0 0.9rem;
    color: #4a4f55;
}

/* Desktop: reserve three lines per description so the menu doesn't change
   height as you click between items. */
@media (min-width: 900px) {
    .feature-body-inner p {
        /*min-height: 3lh;*/
    }
}

/* Screenshots: shared frame */
.feature-shot img,
.feature-shot-inline img {
    display: block;
    object-fit: cover;
    border-radius: var(--fs-radius);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Mobile accordion shots: fixed ratio */
.feature-shot-inline img {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-width: max(calc(100vh - 50px), 300px);
}

/* Desktop: the column's width comes from the grid, its height from the ratio,
   so the frame scales down in proportion and never crops differently.
   Every shot is stacked in the same cell and cross-faded. */
.feature-shots {
    display: grid;
    aspect-ratio: var(--fs-shot-ratio);
}

.feature-shots > .wrapper {
    min-height: 0;
}

.feature-shot {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fs-speed) ease;
}

.feature-shot.is-active {
    opacity: 1;
    pointer-events: auto;
}

.feature-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    /*height: 100%;*/
}

.feature-shot-inline {
    display: none;
}

/* Below the table layout: accordion with the shot inside each item */
@media (max-width: 899px) {
    .feature-shots {
        display: none;
    }

    .feature-shot-inline {
        display: block;
        margin-bottom: 0.5rem;
        max-width: 700px;
    }

    .feature-body-inner {
        padding-left: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-select {
        --fs-speed: 0s;
    }
}

.ui.header.balanced {
    text-wrap: balance;
}