/* ---------- Hero (homepage) ---------- */
.hero {
    position: relative;
    min-height: 540px;
    display: flex; align-items: center;
    /* Colour only. The image now lives on .hero__slide, so a slow or failed image
       load leaves a solid brand-coloured hero rather than a white gap. */
    background: var(--color-secondary);
    color: #fff;
    text-align: center;
}
.hero__slides { position: absolute; inset: 0; overflow: hidden; }
.hero__slide {
    position: absolute; inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }
.hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(29,40,52,.72) 0%, rgba(29,40,52,.82) 100%);
}

/* A cross-fade behind text is exactly the kind of motion this setting is for.
   The slider also stops advancing in JS, so this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
    .hero__slide { transition: none; }
}
.hero__content {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding: 5rem 20px;
}
.hero__tagline {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 1rem;
}
.hero__heading { font-size: 3.1rem; color: #fff; margin-bottom: .5em; letter-spacing: -.02em; }
.hero__subtitle { font-size: 1.12rem; color: rgba(255,255,255,.88); max-width: 620px; margin: 0 auto 2rem; }
.hero__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.step__number {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-weight: 800; font-size: 1.1rem;
    margin-bottom: .9rem;
}
.step__title { font-size: 1.05rem; }
.step p { color: var(--color-text-muted); font-size: .93rem; margin: 0; }

/* ---------- Tile grids (sports / cities) ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
/* The eight cities are a fixed set, so pin them to two even rows of four rather
   than letting auto-fill wrap them unevenly as the viewport changes. */
.tile-grid--cities { grid-template-columns: repeat(4, 1fr); }
.tile {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: 1.5rem 1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-border);
    text-decoration: none;
}
.tile__icon { font-size: 2.2rem; line-height: 1; }
.tile__label { font-weight: 700; color: var(--color-heading); font-size: .98rem; }
.tile__meta { font-size: .82rem; color: var(--color-text-subtle); }
/* City tiles carry an icon like the sport tiles do, so they share the same padding.
   The pin is an SVG that inherits currentColor, so it picks up the brand blue and
   deepens on hover with the rest of the tile. */
/* Height matches the emoji icons' line box (2.2rem) so city and sport tiles
   come out the same height side by side. */
.tile__icon--pin {
    color: var(--color-primary);
    display: inline-flex; align-items: center; justify-content: center;
    height: 2.2rem; line-height: 1;
}
.tile--city:hover .tile__icon--pin { color: var(--color-primary-dark); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-primary-soft); border-top: 1px solid var(--color-primary-border); padding: 3rem 0; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-band h2 { font-size: 1.5rem; margin-bottom: .25em; }
.cta-band p { color: var(--color-text-muted); margin: 0; }

/* Quieter than the recruiting band directly above it. Two bands in the brand
   colour back to back read as one long stripe and compete for the same click;
   this one steps back to the muted surface so the primary call to action still
   wins the page. */
.cta-band--support {
    background: var(--color-bg-muted);
    border-top: 1px solid var(--color-border);
    padding: 2.25rem 0;
}
.cta-band--support h2 { font-size: 1.2rem; }
/* Stacked and left-aligned at every width, rather than the text-left/button-right
   split the recruiting band uses. Different shape as well as different colour, so
   the two bands do not read as a repeat of each other. This is what .cta-band__inner
   already collapses to on narrow screens — here it is the layout throughout. */
.cta-band--support .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

/* Thread notice when the other side deleted their account. */
.chat__notice {
    margin: auto;
    max-width: 34rem;
    padding: .8rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: .88rem;
    text-align: center;
}
.chat__composer--closed { margin: 0; font-size: .9rem; text-align: center; }

/* ---------- Danger zone (delete account) ----------
   Collapsed to a single quiet button so it can't be mistaken for part of the
   profile form above it. The consequences and the typed confirmation only
   appear once the person opens it. */
.danger-zone { margin-top: 2.5rem; }
/* Only the marker is removed — summary keeps its default display, or the
   <details> stops collapsing. */
.danger-zone__summary,
.account-email__summary { list-style: none; cursor: pointer; }
.danger-zone__summary::-webkit-details-marker,
.account-email__summary::-webkit-details-marker { display: none; }
.danger-zone__summary::marker,
.account-email__summary::marker { content: ''; }

/* ---------- Sign-in email (profile) ----------
   Collapsed until asked for, and deliberately far from the delete disclosure:
   the gap is the point, not decoration. Two collapsed panels sitting flush
   against each other is how a mis-aimed click deletes an account. */
.account-email { margin-top: 1.5rem; margin-bottom: 3.5rem; }
/* Current address on the left, the control on the right — the address stays
   readable without opening anything, which is what most visits need. */
.account-email__current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.account-email__disclosure { margin-left: auto; }
/* Opened, the panel drops below the row and spans the card. */
.account-email__disclosure[open] { width: 100%; margin-left: 0; }
.account-email__detail {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border-soft);
}

/* The red framing arrives with the warning, not before it. */
.danger-zone__detail {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-danger);
}
.danger-zone__list { margin: 0 0 1rem; padding-left: 1.1rem; list-style: disc; }
.danger-zone__list li { margin-bottom: .3rem; font-size: .92rem; color: var(--color-text-muted); }
.danger-zone__form { margin-top: 1.25rem; max-width: 340px; }

/* ---------- Page header ---------- */
.page-header { background: var(--color-bg-muted); border-bottom: 1px solid var(--color-border); padding: 2.5rem 0; }
.page-header__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.page-header h1 { font-size: 1.9rem; margin-bottom: .2em; }
.page-header p { color: var(--color-text-muted); margin: 0; }

.page-body { padding: 2.5rem 0 4rem; }

/* ---------- Browse filters ---------- */
.filters {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.15rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.75rem;
}
.filters__grid { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: .75rem; align-items: end; }
.filters .field { margin-bottom: 0; }
.filters__meta {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1rem; flex-wrap: wrap;
}

/* ---------- Listing cards ---------- */
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.25rem; }
.listing-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.listing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-primary-border); }
.listing-card__top { padding: 1.15rem 1.25rem .75rem; }
.listing-card__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.listing-card__title { font-size: 1.12rem; margin-bottom: .15em; }
.listing-card__title a { color: var(--color-heading); }
.listing-card__title a:hover { color: var(--color-primary-dark); text-decoration: none; }
.listing-card__city { color: var(--color-text-subtle); font-size: .87rem; margin: 0; }
.listing-card__facts {
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--color-border-soft);
    display: grid; gap: .4rem;
    font-size: .88rem;
    margin-top: auto;
}
.listing-card__fact { display: flex; gap: .5rem; align-items: baseline; }
.listing-card__fact dt { color: var(--color-text-subtle); min-width: 76px; }
.listing-card__fact dd { margin: 0; color: var(--color-text); font-weight: 600; }
.listing-card__footer {
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--color-border-soft);
    background: var(--color-bg-muted);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.listing-card__spots { font-size: .85rem; font-weight: 700; color: var(--color-accent-dark); }

/* ---------- Listing detail ---------- */
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
.detail-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; margin: 0; }
.detail-facts dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); }
.detail-facts dd { margin: .15rem 0 0; font-weight: 600; color: var(--color-heading); }
.detail-sidebar { position: sticky; top: calc(var(--navbar-height) + 20px); display: grid; gap: 1.25rem; }

.captain-card { display: flex; align-items: center; gap: .85rem; }
.captain-card__name { font-weight: 700; color: var(--color-heading); }
.captain-card__meta { font-size: .85rem; color: var(--color-text-subtle); }

/* ---------- Profile ---------- */
.profile-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: start; }
.photo-panel { text-align: center; }
.photo-panel .avatar { margin: 0 auto .9rem; }
.photo-preview {
    width: 160px; height: 160px; border-radius: 50%;
    object-fit: cover; margin: 0 auto .9rem; display: block;
    border: 3px solid var(--color-border);
    background: var(--color-bg-muted);
}
.avatar-placeholder {
    width: 160px; height: 160px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .9rem;
    background: var(--color-primary); color: #fff;
    font-size: 3.5rem; font-weight: 700;
}
.skill-rows { display: grid; gap: .6rem; }
.skill-row {
    display: grid; grid-template-columns: 1fr 170px; gap: .75rem; align-items: center;
    padding: .55rem .75rem;
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
}
.skill-row__label { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.skill-row .select { padding: .35rem .5rem; font-size: .85rem; }

.profile-view__header { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.profile-view__sports { display: grid; gap: .5rem; }
.profile-view__sport {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* ---------- Cropper ---------- */
.cropper__stage {
    position: relative;
    width: 100%; height: 320px;
    background: #21262d;
    border-radius: var(--radius-sm);
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}
.cropper__stage.is-dragging { cursor: grabbing; }
.cropper__canvas { display: block; width: 100%; height: 100%; }
.cropper__controls { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; }
.cropper__controls input[type="range"] { flex: 1; accent-color: var(--color-primary); }

/* ---------- Applications / applicants ---------- */
.stack { display: grid; gap: 1rem; }
.row-card { display: flex; align-items: center; gap: 1.25rem; padding: 1.15rem 1.25rem; flex-wrap: wrap; }
.row-card__main { flex: 1; min-width: 220px; }
.row-card__title { font-size: 1.05rem; margin-bottom: .2em; }
.row-card__meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .87rem; color: var(--color-text-muted); }
.row-card__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.applicant-card { display: flex; gap: 1.25rem; padding: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.applicant-card__body { flex: 1; min-width: 240px; }
.applicant-card__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.applicant-card__bio { font-size: .9rem; color: var(--color-text-muted); margin: .5rem 0 0; }

/* ---------- Dropdown menu (⋮) ---------- */
.menu { position: relative; }
.menu__trigger {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff; cursor: pointer; color: var(--color-text-muted);
    font-size: 1.1rem; line-height: 1;
}
.menu__trigger:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.menu__dropdown {
    position: absolute; right: 0; top: calc(100% + 6px);
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .35rem;
    z-index: 40;
}
.menu__item {
    display: block; width: 100%; text-align: left;
    padding: .5rem .7rem;
    border: 0; background: none;
    border-radius: var(--radius-sm);
    color: var(--color-text); font-size: .9rem; cursor: pointer;
}
.menu__item:hover { background: var(--color-bg-muted); text-decoration: none; }
.menu__item--danger { color: var(--color-danger); }
.menu__item--danger:hover { background: var(--color-danger-soft); }

/* ---------- Messages ---------- */
.messages-layout {
    display: grid; grid-template-columns: 320px 1fr;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
    height: calc(100vh - var(--navbar-height) - 180px);
    min-height: 480px;
}
.conversation-list { border-right: 1px solid var(--color-border); overflow-y: auto; background: var(--color-bg-muted); }
.conversation {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--color-border-soft);
    position: relative;
}
.conversation:hover { background: #fff; }
.conversation.is-active { background: #fff; box-shadow: inset 3px 0 0 var(--color-primary); }
.conversation__link { flex: 1; min-width: 0; color: inherit; }
.conversation__link:hover { text-decoration: none; }
.conversation__name { font-weight: 700; color: var(--color-heading); font-size: .93rem; }
.conversation__team { font-size: .82rem; color: var(--color-text-subtle); }
.conversation__preview {
    font-size: .84rem; color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: .2rem;
}
.conversation__time {
    font-size: .75rem; color: var(--color-text-subtle);
    margin-top: .15rem;
}
.conversation__delete {
    background: none; border: 0; cursor: pointer;
    color: var(--color-text-subtle); font-size: 1rem; padding: .15rem .3rem; border-radius: var(--radius-sm);
}
.conversation__delete:hover { color: var(--color-danger); background: var(--color-danger-soft); }

/* min-height matters as much as min-width here, and for the same reason.
   A grid item defaults to min-height:auto and so refuses to shrink below its
   own content: a long thread made this column grow to the height of every
   message at once, past the fixed height of .messages-layout. That container
   clips with overflow:hidden, so the end of the conversation and the composer
   under it were cut off with no way to scroll to them.

   It belongs here rather than on .chat__messages, which needs nothing. The
   automatic minimum size only applies to a box whose overflow is visible, and
   .chat__messages is already a scroll container — its minimum is 0 either way.
   It could not shrink only because this element would not. Same reason
   .conversation-list beside it never had the bug despite the identical shape:
   it scrolls, so it was always free to shrink. Verified by removing each
   declaration in turn. */
.chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat__header {
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; gap: .75rem;
}
.chat__header-name { font-weight: 700; color: var(--color-heading); }
.chat__header-meta { font-size: .83rem; color: var(--color-text-subtle); }
.chat__messages { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.bubble {
    max-width: 72%;
    padding: .6rem .9rem;
    border-radius: var(--radius-lg);
    font-size: .92rem;
    line-height: 1.5;
    word-wrap: break-word;
}
.bubble__time { display: block; font-size: .72rem; opacity: .7; margin-top: .25rem; }
.bubble--own { align-self: flex-end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }
.bubble--other { align-self: flex-start; background: var(--color-bg-muted); color: var(--color-text); border-bottom-left-radius: 4px; }

/* Edit/delete on your own bubbles. Positioned relative so the actions can sit
   outside the bubble without widening it, and revealed on hover or keyboard
   focus — always-visible controls on every message you ever sent would make the
   thread read like a toolbar. focus-within keeps them reachable by Tab, which
   hover alone would not. */
.bubble { position: relative; }
.bubble__actions {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; gap: .3rem;
    opacity: 0; pointer-events: none;
    transition: opacity .12s ease;
}
/* The offset is padding, never margin. Margin would leave a few pixels between
   the bubble and the buttons belonging to neither, and crossing that corridor
   drops :hover — which sets pointer-events:none and takes the buttons away
   exactly as you reach for them. Padding keeps the gap inside the hover target,
   so the pointer never leaves. */
.bubble--own .bubble__actions { right: 100%; padding-right: .4rem; }
.bubble:hover .bubble__actions,
.bubble:focus-within .bubble__actions { opacity: 1; pointer-events: auto; }
.bubble__action {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    padding: .12rem .4rem;
    font-size: .72rem; font-weight: 600; line-height: 1.4;
    white-space: nowrap; cursor: pointer;
}
.bubble__action:hover { background: var(--color-bg-muted); color: var(--color-heading); }

/* Touch devices have no hover at all, so a reveal-on-hover control is simply
   unreachable there. Show them permanently instead, and in the flow of the
   bubble rather than beside it — there is no room outside a 72%-wide bubble on
   a phone. */
@media (hover: none) {
    .bubble__actions {
        position: static; transform: none;
        opacity: 1; pointer-events: auto;
        margin-top: .4rem; justify-content: flex-end;
    }
    .bubble--own .bubble__actions { right: auto; padding-right: 0; }
}

/* A deleted message keeps its place in the thread but stops looking like speech:
   no fill, muted italic text, so it reads as an absence rather than something
   somebody said. */
.bubble--deleted { background: transparent !important; border: 1px dashed var(--color-border); }
.bubble--deleted .bubble__gone { font-style: italic; color: var(--color-text-subtle); font-size: .86rem; }
.bubble--deleted .bubble__time { color: var(--color-text-subtle); opacity: .8; }

/* The inline editor replaces the bubble's text in place, so the message stays
   where it is in the thread while being rewritten. */
.bubble__edit { display: flex; flex-direction: column; gap: .4rem; }
.bubble__edit textarea {
    width: 100%; min-width: 14rem; resize: vertical;
    font: inherit; color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    padding: .4rem .5rem; background: var(--color-bg);
}
.bubble__edit-actions { display: flex; gap: .4rem; justify-content: flex-end; }
.chat__composer {
    display: flex; gap: .6rem; align-items: flex-end;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-muted);
}
.chat__composer .textarea { min-height: 44px; max-height: 140px; background: #fff; }
.chat__empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; text-align: center; color: var(--color-text-subtle); }

/* ---------- Admin ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.stat-card { padding: 1.4rem 1.5rem; }
.stat-card__value { font-size: 2.1rem; font-weight: 800; color: var(--color-heading); line-height: 1.1; }
.stat-card__label { font-size: .85rem; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Auth pages ---------- */
.auth-shell { display: flex; align-items: center; justify-content: center; padding: 4rem 20px; min-height: 70vh; }
.auth-card { width: 100%; max-width: 420px; padding: 2.25rem; text-align: center; }
.auth-card h1 { font-size: 1.6rem; margin-bottom: .3em; }
.auth-card__sub { color: var(--color-text-muted); margin-bottom: 1.75rem; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0; color: var(--color-text-subtle); font-size: .82rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.btn--google { background: #fff; border-color: var(--color-border); color: var(--color-text); width: 100%; }
.btn--google:hover { border-color: var(--color-text-subtle); background: var(--color-bg-muted); }
.auth-card .field { text-align: left; }
.auth-note { font-size: .82rem; color: var(--color-text-subtle); margin-top: 1.5rem; }
.auth-legal {
    font-size: .78rem; color: var(--color-text-subtle);
    margin: .75rem 0 0; line-height: 1.5;
}
.auth-legal a { color: var(--color-primary-dark); }

/* ---------- Error pages ---------- */
.error-page { text-align: center; padding: 6rem 20px; }
.error-page__code { font-size: 4.5rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
.error-page h1 { font-size: 1.5rem; margin: .5rem 0; }
.error-page p { color: var(--color-text-muted); margin-bottom: 1.75rem; }

/* Five selects plus the button crowd each other below ~1300px, so wrap to a
   3-up grid before the tablet breakpoint takes over at 980px. */
@media (max-width: 1300px) {
    .filters__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-sidebar { position: static; }
    .profile-layout { grid-template-columns: 1fr; }
    .filters__grid { grid-template-columns: 1fr 1fr; }
    .messages-layout { grid-template-columns: 1fr; height: auto; }
    .conversation-list { max-height: 280px; border-right: 0; border-bottom: 1px solid var(--color-border); }
    .chat { min-height: 420px; }
}

@media (max-width: 720px) {
    .hero { min-height: 460px; }
    .hero__heading { font-size: 2.1rem; }
    .steps { grid-template-columns: 1fr; }
    .filters__grid { grid-template-columns: 1fr; }
    .detail-facts { grid-template-columns: 1fr; }
    .skill-row { grid-template-columns: 1fr; }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
    .bubble { max-width: 85%; }
    /* Four city tiles need ~690px; below that fall back to two even rows-of-two. */
    .tile-grid--cities { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Legal pages (privacy policy) ---------- */
/* These tables hold sentences, not data. The global `white-space: nowrap` keeps
   admin tables scannable on one line, but in a document it forces a horizontal
   scroll nobody expects while reading prose. */
.legal .table th,
.legal .table td { white-space: normal; vertical-align: top; }
.legal .table td:first-child { width: 34%; font-weight: 600; }

.legal h2 { font-size: 1.25rem; margin: 1.75rem 0 .6rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1rem; margin: 1.25rem 0 .4rem; }
.legal p { margin: 0 0 .85rem; }
.legal ul { margin: 0 0 .85rem; padding-left: 1.15rem; }
.legal li { margin-bottom: .35rem; }
.legal .card__body > :last-child { margin-bottom: 0; }

/* ---------- Cookie consent banner ---------- */
/* Fixed to the bottom rather than centred over the page: it asks a question, it
   does not need to block reading a listing while the visitor decides. */
.consent {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(29, 40, 52, .10);
    padding: 1rem 20px;
}
.consent__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.consent__text {
    margin: 0;
    flex: 1 1 32rem;
    font-size: .88rem;
    color: var(--color-text-muted);
}
.consent__actions { display: flex; gap: .6rem; margin-left: auto; }

@media (max-width: 720px) {
    .consent__inner { gap: .9rem; }
    /* Full-width targets rather than two small buttons squeezed onto one line. */
    .consent__actions { margin-left: 0; width: 100%; }
    .consent__actions .btn { flex: 1; }
}