/* ---------------------------------------------------------------------------
 * Site styles written for this project.
 *
 * Kept separate from the ported theme (styles.css) so our own work stays
 * obvious while the theme is trimmed down.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

/* The address links to Google Maps but should still read as the plain text it
   was, rather than picking up the teal the theme gives every footer link. This
   is the same treatment the theme already applies to .link-list a: inherit the
   muted body colour, and brighten on hover so it stays discoverable. */
.s-footer .link-muted {
    color: inherit;
}

.s-footer .link-muted:focus,
.s-footer .link-muted:hover {
    color: var(--color-3);
}

/* ---------------------------------------------------------------------------
 * FAQ filtering
 *
 * The old page filtered by full reload through ?category= links and had no
 * search at all. The controls below drive a Turbo Frame instead, so the same
 * markup keeps working without JavaScript.
 * ------------------------------------------------------------------------ */

/* A frame is an unknown element, so it has no display of its own. Left inline
   it would collapse the results layout. */
turbo-frame {
    display: block;
}

.faq-controls {
    margin-bottom: var(--vspace-1_5);
}

.faq-search {
    margin-bottom: var(--vspace-1);
}

.faq-search__label {
    display: block;
    margin-bottom: var(--vspace-0_25);
    font-family: var(--font-1);
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

/* The submit button sits inside the field rather than beside it. As a separate
   button it took horizontal space the field could not spare on a phone, and
   its label was clipped. */
.faq-search__field {
    position: relative;
    max-width: 52rem;
}

.faq-search__field input[type="search"] {
    width: 100%;
    margin-bottom: 0;
    /* Room for the icon, so long queries never run underneath it. */
    padding-right: 4.4rem;
}

/* Chrome draws its own clear cross inside a search input, which would sit just
   left of ours and read as two competing controls. */
.faq-search__field input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.faq-search__submit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: var(--color-gray-12);
    cursor: pointer;
    transition: color 0.2s ease;
}

.faq-search__submit:hover,
.faq-search__submit:focus {
    color: var(--color-1);
    background: none;
}

/* Keyboard users need to see where they are; the button has no border of its
   own to carry the usual outline. */
.faq-search__submit:focus-visible {
    outline: 2px solid var(--color-1);
    outline-offset: -4px;
    border-radius: 3px;
}

/* A segmented control, not free-flowing pills. As pills the four full labels
   wrapped onto three lines on a phone; equal segments carrying short labels fit
   one row at every width, so the whole filter reads at a glance. */
.faq-categories {
    display: flex;
    width: 100%;
    max-width: 52rem;
    padding: 0.3rem;
    gap: 0.2rem;
    border: 1px solid var(--color-gray-6);
    border-radius: 100px;
}

.faq-categories__link {
    /* 1 1 0 rather than auto: segments share the width evenly instead of being
       sized by their text, so the control does not shift as labels change. */
    flex: 1 1 0;
    padding: var(--vspace-0_25) var(--vspace-0_25);
    border-radius: 100px;
    font-family: var(--font-1);
    font-size: var(--text-sm);
    line-height: 1.8;
    text-align: center;
    /* Segments are already narrow; a wrapped label would break the row height. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.faq-categories__link:hover,
.faq-categories__link:focus {
    background-color: var(--color-gray-3);
    color: var(--color-text-dark);
}

.faq-categories__link--active,
.faq-categories__link--active:hover,
.faq-categories__link--active:focus {
    background-color: var(--color-1);
    color: #fff;
}

@media screen and (max-width: 600px) {
    .faq-categories__link {
        /* Buys the couple of pixels that keep "Adultes" off the ellipsis on a
           360px phone. */
        font-size: calc(var(--text-sm) * 0.95);
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
}

/* The frame keeps its previous height while a request is in flight, so a slow
   response reads as a deliberate pause rather than a blank page. */
turbo-frame[busy] {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.pgn__summary {
    margin: 0;
    font-family: var(--font-1);
    font-size: var(--text-sm);
    color: var(--color-text-light);
    text-align: center;
}

.faq-empty {
    padding: var(--vspace-2) 0;
}

/* The theme coloured the title through the <a> the old markup wrapped it in.
   Those anchors pointed at "#", so they are gone and the colour moves here. */
.blog-card__title {
    color: var(--color-text-dark);
}

.faq-empty__message {
    margin-bottom: var(--vspace-0_75);
    font-family: var(--font-2);
    font-size: var(--text-lg);
}

/* ---------------------------------------------------------------------------
 * Team cards
 *
 * Staff photos arrive in mixed shapes and sizes - some are square cut-outs on
 * transparent backgrounds, newer ones are 2:3 portraits - so the card locks a
 * single portrait ratio and crops to fill. Without this the grid looked ragged,
 * with each card a different height.
 * ------------------------------------------------------------------------ */

.staff-card {
    --staff-card-radius: 6px;

    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--staff-card-radius);

    /* Cut-outs are transparent, so the card supplies the surface behind them. */
    background: linear-gradient(160deg, var(--color-gray-2) 0%, var(--color-gray-4) 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.staff-card:hover,
.staff-card:focus-within {
    transform: translateY(-4px);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.12);
}

.staff-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor to the top so a crop never cuts off someone's head. */
    object-position: center top;
    transition: transform 0.5s ease;
}

.staff-card:hover .staff-card__image {
    transform: scale(1.03);
}

/* Frosted panel behind the text. The photos vary too much for a plain tint to
   stay legible, so the blur does most of the work and the tint stays light. */
.staff-card__header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
    padding: var(--vspace-0_75) var(--vspace-0_5) var(--vspace-1);
    pointer-events: none;
}

/* The frosted layer is a pseudo-element so it can be masked to fade out
   without taking the text with it. */
.staff-card__header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(18, 20, 19, 0.82) 0%,
        rgba(18, 20, 19, 0.6) 45%,
        rgba(18, 20, 19, 0) 100%
    );
    /* The blur softens busy photo detail behind the text; the mask fades the
       blurred region out, otherwise it would end on a visible hard edge where
       the gradient has already gone transparent. */
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.staff-card__role,
.staff-card__name {
    position: relative; /* stack above the frosted layer */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.staff-card__role {
    margin: 0 0 0.15em;
    font-family: var(--font-1);
    font-size: calc(var(--text-size) * 0.95);
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-1);
}

.staff-card__name {
    margin: 0;
    font-family: var(--font-2);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-3);
}

/* The theme's default gap below the page header is --vspace-4, which leaves too
   much air above the cards. Scoped to the team page rather than changed on
   .s-pagecontent itself, which the FAQ and contact pages also use. Two classes
   outrank the theme's single-class rule, so this also replaces its narrow-screen
   --vspace-3 override. */
/* Two classes so this also beats the theme's own narrow-screen rule, which
   would otherwise put the padding back up to --vspace-3 on a phone - the very
   place the gap was most excessive. */
.pagecontent--tight.s-pagecontent {
    padding-top: var(--vspace-2);
}

.pagecontent--team.s-pagecontent {
    /* Cream rather than white, so the cards read as objects on a surface
       instead of floating on the page. */
    background-color: var(--color-3);
}

/* The theme's grid gives us the columns, but its 360px track minimum was sized
   for the old short cards. A 2:3 portrait at that width is far taller, so on a
   tablet the grid stayed single-column and each card rendered ~660x990 - taller
   than the screen. 300px is the window that keeps three across on desktop
   (a fourth would need 4x300 + gaps > the content width) while letting a tablet
   fit two. */
.staff-grid {
    --min-width: 300px;
    row-gap: var(--vspace-1);
}

/* Below the two-column threshold a lone card would stretch to the full content
   width - about 530px at 600px viewport - so cap it and centre it. Wider
   screens are already multi-column and never reach this rule. */
@media screen and (max-width: 800px) {
    .staff-card {
        max-width: 42rem;
        margin-inline: auto;
    }
}

@media screen and (max-width: 600px) {
    .staff-card__name {
        font-size: var(--text-md);
    }
}