/* components-interactive.css — the two interior components with behaviour: the services
   accordion and the case-study gallery/lightbox. Split out of components-content.css to
   keep both files under the 600-line soft limit (engineering §3) and because only two
   pages load them. Tokens only; js/shared/ui.js drives the state attributes. */

/* =====================================================================
   Accordion — disclosure list. The panels are open in the markup and are
   collapsed by CSS only where scripting is enabled, so the content is
   readable without JavaScript and nothing shifts on load.
   ===================================================================== */
.accordion { display: grid; gap: var(--space-md); }
.accordion__item {
    background-color: var(--color-bg);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-card);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.accordion__item>div {
    cursor: pointer;
}

.section--raised .accordion__item { background-color: var(--color-surface); }
.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    inline-size: 100%;
    min-block-size: var(--touch-target);
    padding: var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    text-align: start;
    color: var(--color-text);
    transition: color var(--transition-fast);
}
.accordion__trigger:focus-visible { border-radius: var(--radius-card); }
.accordion__number {
    font-weight: var(--fw-light);
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}
.accordion__icon {
    inline-size: var(--icon-md);
    block-size: var(--icon-md);
    color: var(--color-accent);
    transition: transform var(--transition-base);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }

.accordion__panel {
    display: none;
    gap: var(--space-md);
    padding-inline: var(--space-lg);
    padding-block-end: var(--space-lg);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

/* the trigger is wrapped in its heading, so the panel is the heading's sibling, not the
   button's: :has() reads the state from the item instead of a sibling combinator */
@media screen and (scripting: enabled) {
    .accordion__item:has(.accordion__trigger[aria-expanded="true"]) .accordion__panel { display: grid; }
}

@media (hover: hover) {
    .accordion__item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-ring-gold); }
    .accordion__trigger:hover { color: var(--color-accent-highlight); }
}

/* =====================================================================
   Gallery + lightbox — native <dialog>, so focus is trapped, Escape closes
   and focus returns to the thumbnail the browser opened it from.
   ===================================================================== */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}
.gallery__button {
    position: relative;
    display: block;
    inline-size: 100%;
    overflow: hidden;
    border: var(--hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.gallery__image {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.gallery__zoom {
    position: absolute;
    inset-block-end: var(--space-sm);
    inset-inline-end: var(--space-sm);
    display: grid;
    place-items: center;
    inline-size: var(--icon-xl);
    block-size: var(--icon-xl);
    background-color: var(--color-scrim-badge);
    border: var(--hairline) solid var(--color-border);
    color: var(--color-accent);
}
.gallery__zoom-icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

@media (hover: hover) {
    .gallery__button:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-ring-gold); }
    .gallery__button:hover .gallery__image { transform: scale(1.05); }
}

@media (min-width: 992px) {
    .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lightbox {
    inline-size: min(92vw, var(--container-max));
    max-inline-size: min(92vw, var(--container-max));
    padding: 0;
    background-color: var(--color-surface);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text);
    overflow: hidden;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.lightbox::backdrop { background-color: var(--color-backdrop); }
.lightbox__figure { display: grid; margin: 0; }
.lightbox__image {
    inline-size: 100%;
    max-block-size: 70vh;
    object-fit: contain;
    background-color: var(--color-bg);
}
.lightbox__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.lightbox__controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.lightbox__button {
    display: grid;
    place-items: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    background-color: var(--color-bg);
    border: var(--hairline) solid var(--color-border);
    border-radius: var(--radius-button);
    color: var(--color-accent);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.lightbox__button-icon { inline-size: var(--icon-md); block-size: var(--icon-md); }
.lightbox__close {
    position: absolute;
    inset-block-start: var(--space-md);
    inset-inline-end: var(--space-md);
    background-color: var(--color-scrim-badge);
}

@media (hover: hover) {
    .lightbox__button:hover { border-color: var(--color-border-strong); color: var(--color-accent-highlight); }
}