/* =====================================================================
   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);
}

/* FIXED SIZE, so one long description cannot make its card taller than the
   card beside it and leave the row ragged. The controller already cuts the
   text at 300 characters; this height is what keeps the cards level when
   two descriptions differ in length below that.

   `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;
    height: 5.25rem;
    overflow: hidden;
    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);
}

.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;
}

.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%;
    }
}