/* ==========================================================================
   Public site — the few things style.css does not already have.
   --------------------------------------------------------------------------
   Deliberately small. style.css is the design; anything that could be written
   with its classes is written with its classes. What is left is the handful of
   cases the static prototype never had, because it had no server:

     - an avatar for a row with no uploaded image (the prototype's demo data
       always had one)
     - the follow button being a <form>, which the prototype did not need
       because nothing was ever submitted
     - a couple of layout helpers for server-rendered lists

   If you find yourself adding a component here, check style.css first.
   ========================================================================== */

/* ---- Avatars without an image ------------------------------------------- */

/* Initials in place of a photo. Same box as .avatar so a grid of cards does
   not jump when one player has a picture and the next does not. */
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2, #eef1f4);
    color: var(--subtle, #6b7280);
    font-family: Archivo, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    overflow: hidden;
}

/* The avatar sizes used on this site, so a caller picks a class rather than
   writing inline width/height on every card. */
.avatar-sm  { width: 32px; height: 32px; border-radius: 50%; font-size: 12px; }
.avatar     { width: 48px; height: 48px; border-radius: 50%; font-size: 15px; }
.avatar-lg  { width: 72px; height: 72px; border-radius: 50%; font-size: 22px; }
.avatar-xl  { width: 112px; height: 112px; border-radius: 50%; font-size: 34px; }

.avatar-square,
.avatar-square.avatar-initials { border-radius: 12px; }


/* ---- The follow button --------------------------------------------------- */

/* It posts, so it is a form. Without this the form is a block element and the
   button drops onto its own line inside every card header. */
.follow-form {
    display: inline-block;
    margin: 0;
}

/* The pressed state. style.css styles .btn-follow; this is only what it looks
   like once you are following, which the prototype had no state for. */
.btn-follow.is-following {
    background: var(--surface-2, #eef1f4);
    border-color: transparent;
    color: var(--subtle, #6b7280);
}

/* Hovering a Following button offers the opposite action, so the label is
   swapped in CSS rather than by script — no JavaScript, no layout shift. */
@media (hover: hover) {
    .btn-follow.is-following:hover {
        background: color-mix(in srgb, var(--danger, #d64550) 12%, transparent);
        color: var(--danger, #d64550);
    }
}


/* ---- Server-rendered list helpers --------------------------------------- */

.d-inline { display: inline; }

/* A row of meta facts under a heading: "Bangalore · T20 · 8 teams". */
.meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    color: var(--subtle, #6b7280);
    font-size: 14px;
}

.meta-row > * + *::before {
    content: '·';
    margin-right: 10px;
    color: var(--line, #dfe3e8);
}

/* The toolbar above a list: filters left, result count right. */
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
}

.list-toolbar form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

/* Keeps a wide scorecard or points table from widening the page itself. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The two-column match header: teams either side of the result. */
.vs-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
}

.vs-row .vs-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vs-row .vs-team:last-child { flex-direction: row-reverse; text-align: right; }
.vs-row .vs-mid { text-align: center; color: var(--subtle, #6b7280); font-weight: 700; }

@media (max-width: 560px) {
    .vs-row { grid-template-columns: 1fr; }
    .vs-row .vs-team:last-child { flex-direction: row; text-align: left; }
    .vs-row .vs-mid { text-align: left; }
}


/* ---- Comments ------------------------------------------------------------ */

.comment {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line, #e8ebee);
}

.comment:last-child { border-bottom: 0; }

.comment-body { min-width: 0; }

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 2px;
}

.comment-meta b { font-size: 14px; }

.comment-meta time { color: var(--subtle, #6b7280); font-size: 12px; }

/* Long single-word input — a pasted URL — must not widen the page. */
.comment-text {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ---- Media bands with no image ------------------------------------------ */

/* The prototype's demo data always had a picture. Real news and real grounds
   often do not, and a broken <img> is worse than an honest placeholder. */
.nc-media-empty {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background: var(--surface-2, #eef1f4);
    color: var(--subtle, #9aa3ad);
    font-size: 30px;
}

/* The video thumbnail is a link, so it needs to behave like the <div> the
   design styles. */
a.vc-media { display: block; position: relative; }

/* -----------------------------------------------------------------------------
   Brand tagline — "Namma Cricket · Namma Squad" under the CRIC SQUAD wordmark.
   Small spaced capitals so it reads as a signature, not a second heading: a
   short green rule leads in, a green dot separates the two halves, and the
   second half picks up the wordmark's green.
   ----------------------------------------------------------------------------- */
.brand-text { display: inline-flex; flex-direction: column; gap: 5px; line-height: 1; }
.brand-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.brand-tag::before {
    content: "";
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary-light));
}
.brand-tag i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-light);
    box-shadow: 0 0 0 3px var(--primary-soft, rgba(34, 197, 94, .15));
}
.brand-tag b { font-weight: 800; color: var(--primary-light); }
.brand:hover .brand-tag::before { width: 20px; }
.brand-tag::before { transition: width .25s ease; }

.footer-brand .brand-tag { font-size: 10.5px; }

@media (max-width: 400px) {
    .brand-tag { font-size: 8px; letter-spacing: .16em; gap: 5px; }
    .brand-tag::before { width: 10px; }
}