/* =====================================================================
   Guild Teams — the public team summary page (/GuildTeams).

   Page-scoped. Nothing here is a global: the card is this page's own, and
   .team-selection-card in site.css stays what the eight team pickers use.
   ===================================================================== */

/* Two cards per row, wrapping.

   The width is `calc(50% - <half the gap>)` rather than a bare 50% because
   the gap sits BETWEEN the two cards and would otherwise push the second
   one onto its own line. flex-basis carries the width and flex-grow is 0,
   so a lone card on the last row stays half width instead of stretching
   across — a stretched odd card reads as a different kind of item. */
.guild-teams-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}

.guild-team-card {
    flex: 0 0 calc(50% - 0.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.15s, box-shadow 0.15s;
}

/* Same lift and accent ring as .team-selection-card, so a team card behaves
   the same way wherever the reader meets one. */
.guild-team-card:hover {
    transform: translateY(-0.125rem);
    box-shadow:
        0 0.063rem 0 rgba(255,255,255,0.04) inset,
        0 0.25rem 1rem rgba(0,0,0,0.4),
        0 1rem 2.5rem rgba(0,0,0,0.5),
        0 0 0 0.063rem var(--accent),
        0 0 1.5rem color-mix(in oklch, var(--accent) 35%, transparent);
}

.guild-team-card-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.guild-team-logo,
.guild-team-logo-placeholder {
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    border-radius: var(--r-sm);
}

.guild-team-logo {
    object-fit: contain;
}

/* The placeholder holds the row's height so a team with no logo does not
   sit shorter than the one beside it. */
.guild-team-logo-placeholder {
    background: var(--bg-3);
    border: 1px solid var(--line);
}

.guild-team-heading {
    min-width: 0;
}

.guild-team-name {
    font-weight: 600;
    font-size: 1.05rem;
}

/* .guild-team-count {
    font-size: 0.813rem;
    color: var(--ink-2);
} */
/*  Slightly smaller and one step dimmer (instructed 2026-09-29), so the name leads and the progress
    badges below carry the colour. The ink scale, not opacity (Conventions 5.6). */
.guild-team-count {
    font-size: 0.75rem;
    color: var(--ink-3);
}

/*  The raid progress badges, one per difficulty, on their own line under the count (2026-09-29,
    Session 235). .gp-badge-row supplies the flex row and the gap; this only sets it off from the
    count line above, which carries no margin of its own. */
.guild-team-progress {
    margin-top: 0.375rem;
}

/*  SUPERSEDED 2026-08-24 (Session 208) — the fixed height is removed and the description now takes
    its natural size.

    WHAT THE HEIGHT WAS FOR, AND WHY REMOVING IT IS SAFE. Its comment said it kept two cards in a row
    level when their descriptions differed. It is not what does that: the grid's align-items: stretch
    makes every card in a row the height of the tallest, and .guild-team-schedule's margin-top: auto
    pins the lower blocks to the bottom of each card — which is the mechanism that actually lines the
    raid nights up across a row, and the reason the schedule block was deliberately NOT given a fixed
    height. Both still hold.

    What changes is that a description under 300 characters no longer reserves 5.25rem it does not
    use, and one at the limit is no longer clipped mid-line. The controller's 300-character cut is
    unaffected and is still what bounds the text.

    `overflow: hidden` GOES WITH IT rather than being left behind: with no height there is nothing to
    overflow, so it would be an inert declaration that reads as though it were still clipping
    something.

.guild-team-description {
    margin: 0;
    height: 5.25rem;
    overflow: hidden;
    white-space: pre-line;
    font-size: 0.813rem;
    line-height: 1.5;
    color: var(--ink-2);
}
*/

/*  `white-space: pre-line` is what restores the author's line breaks. The description is PLAIN TEXT
    rendered encoded — the page never builds markup out of it, so CSS is the only thing that may
    shape it. */
.guild-team-description {
    margin: 0;
    white-space: pre-line;
    font-size: 0.813rem;
    line-height: 1.5;
    color: var(--ink-2);
}

.guild-team-description-empty {
    font-style: italic;
    opacity: 0.7;
}

/* Raid nights. A team may have one night or four, so this block is NOT given a
   fixed height the way the description is — instead the grid's align-items:
   stretch keeps two cards in the same row level regardless, which is the right
   mechanism when the varying part is a list rather than free text.

   margin-top: auto pushes the block to the bottom of the card, so the schedules
   of two side-by-side cards line up with each other even when their
   descriptions differ. */
.guild-team-schedule {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
    font-size: 0.813rem;
}

.guild-team-schedule-label {
    font-weight: 600;
    margin-bottom: 0.375rem;
}

/* .guild-team-schedule-hint {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--ink-2);
} */
/*  One step dimmer (instructed 2026-09-29), with the text now in brackets: "(realm time)". */
.guild-team-schedule-hint {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--ink-3);
}

.guild-team-schedule-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--ink-2);
}

/* Tabular figures so the times line up column-wise down the list rather than
   drifting with the width of each digit. */
.guild-team-schedule-time {
    font-variant-numeric: tabular-nums;
}

/*  RECRUITING — what the team is currently open for. Added 2026-08-24 (Session 208).

    Deliberately the SAME BLOCK SHAPE as the schedule above it, so the card carries two facts of the
    same kind rather than one fact and one feature. It reuses .guild-team-schedule-label and
    .guild-team-schedule-empty outright — those two say "this block's heading" and "this block has
    nothing", which is not schedule-specific, and giving the recruiting block its own copies would be
    two names for one treatment.

    !! margin-top: auto IS NOT REPEATED HERE, and that is the whole reason this needs a rule at all.
    The schedule block carries it to push itself to the bottom of the card; a second element also
    claiming the free space would split the gap between them and detach the pair. This one simply
    follows the schedule. */
.guild-team-recruiting {
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--line);
    font-size: 0.813rem;
}

/*  Class on the left, its specs on the right — the same two-column split the schedule rows use, so
    the eye reads both blocks the same way. The specs are allowed to wrap; a class with four open
    specialisations is a real and useful answer and must not be clipped. */
.guild-team-recruiting-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--ink-2);
    margin-bottom: 0.125rem;
}

.guild-team-recruiting-class {
    font-weight: 600;
    flex-shrink: 0;
}

.guild-team-recruiting-specs {
    text-align: right;
}

.guild-team-schedule-empty {
    color: var(--ink-2);
    font-style: italic;
    opacity: 0.7;
}

/* One card per row on a phone. 48em is the breakpoint the rest of the site
   already uses; a second value would be a second definition of "narrow". */
@media (max-width: 48em) {
    .guild-team-card {
        flex: 0 0 100%;
    }
}