/* ft-eventcard.css -- footballtickets.es
 *
 * ONE event card, used by every surface that lists fixtures:
 *   - the listing pages          <ul id="matchlist" class="evlist">   (functions/ft_listing.php
 *                                                                      + functions/newfixturesajax.php)
 *   - WP search /?s=             <ul class="sr-list evlist">          (search.php + functions/yy_supersearch.php)
 *   - the advanced search page   <ul class="evlist">                  (js/sr_search.js renderCard)
 *
 * Why this file exists: the card shipped on 2026-08-14 inside assets/css/fixtures.css, which is
 * enqueued on listing templates only, and every rule was scoped to "#matchlist". The two search
 * pages drew the same fixtures with a completely different row (.sr-match-card), so one site drew
 * one fixture three ways. Lifting the block here, keyed on the .evlist container class instead of
 * the listing's id, lets all three share it. It is NOT in css/ft-components.css on purpose: that
 * file loads on every page and this is ~14 KB that the homepage and the event page never need.
 *
 * THE ONE THING TO KNOW BEFORE EDITING: de-scoping cost specificity. "#matchlist .ev" was (1,0,1);
 * ".evlist .ev" is (0,2,0). Any theme rule sitting between those two weights that used to lose now
 * wins. The rules known to be load-bearing here are marked in place; if you add a declaration and
 * it silently does nothing, check what in css/mystyle2.css or style.css is outranking it before
 * assuming the value is wrong. Do not "fix" it by adding an id back: the search containers have
 * their own ids and reusing #matchlist would put the same id on the page twice.
 *
 * Enqueued as handle 'football-eventcard' from FOUR places, always before the sheet that overrides
 * it: functions/ft_listing.php, functions/newfixturesajax.php, functions/yy_supersearch.php
 * (is_search) and functions.php (advanced-search page). Bump the ?ver in all four together.
 *
 * Artifact the card came from:
 * https://claude.ai/code/artifact/a38b24fe-77da-4d21-a0dc-2438eca158b2
 *
 * 768px, not the artifact's 700px container query: container queries are a mockup-frame device,
 * and 767 is the width at which the listing already restacked. One breakpoint, the one the page
 * already had.
 */

ul.evlist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
}
ul.evlist > li { list-style: none; margin: 0; }

/* ---------- the card ---------- */
.evlist .ev {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
    background: #fff;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(19, 39, 77, .05);
    transition: border-color .15s ease, box-shadow .15s ease;
    /* The theme's body line-height is 2.0, which is right for prose and wrong for
       a card: inherited onto the 22px price it produced a 44px line box and a
       150px card against the 106px an unpriced one measured. Reset here and pinned
       per element below. Measured, not guessed - remove this and the priced rows
       grow ~40px each again.
       Deliberately NO overflow:hidden. The kickoff tooltip is absolutely
       positioned inside the card and any clipping context here eats it. */
    line-height: 1.35;
    /* The legacy .summary cell set hyphens:none and the class rename lost it, so
       at 375px the theme's auto-hyphenation broke team and stadium names mid-word
       ("Stadio Giuseppe Meaz-za", "Wolverhampton Wande-rers"). Proper nouns must
       never hyphenate. Restored here, on the card, so it covers the title, the
       meta line and the flags at once. */
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
.evlist .ev:hover {
    border-color: #c9d4e4;
    box-shadow: 0 4px 12px rgba(19, 39, 77, .09);
}

/* ---------- date block ---------- */
/* Neutral tint in EVERY state, including tbc and postponed: the only amber or
   red on a card is the marker on the kickoff line, so there is exactly one
   signal per card instead of two saying the same thing. */
.evlist .ev-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f2f5fa;
    border-radius: 9px;
    padding: 7px 4px;
    line-height: 1.1;
    min-height: 58px;
}
.evlist .ev-dow,
.evlist .ev-mon {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5f6f82;
}
.evlist .ev-dnum {
    font-size: 19px;
    font-weight: 800;
    color: #13274d;
    font-variant-numeric: tabular-nums;
}
/* Season-ticket and undated rows have no day number, so the block carries the
   season instead. 9px on the label keeps "Temporada" inside 56px. */
/* nowrap + no tracking on both lines: at 62px wide the label otherwise
   hyphenates to "TEMPORA-DA" and the year span breaks after the dash. */
.evlist .ev-date--season .ev-dow {
    font-size: 8.5px;
    letter-spacing: 0;
    white-space: nowrap;
}
.evlist .ev-date--season .ev-season {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    color: #13274d;
    text-align: center;
    white-space: nowrap;
}

/* ---------- title, flags ---------- */
.evlist .ev-info { min-width: 0; }
.evlist .ev-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 9px;
}
/* Full row by default so the derby pill drops UNDER the name on a phone rather
   than squeezing it; on desktop the title shrinks to its text and the pill sits
   beside it. */
.evlist .ev-head .ev-title { flex: 1 1 100%; }
.evlist a.ev-title {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #13274d;
    letter-spacing: -.01em;
    line-height: 1.25;
    text-decoration: none;
}
/* The stretched pseudo-element is what makes the whole card one click target.
   .ev-cta sits above it on z-index, so there is no anchor inside an anchor. */
.evlist a.ev-title::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
}
.evlist a.ev-title:hover { color: #185c8a; text-decoration: none; }
.evlist a.ev-title:focus-visible {
    outline: 2px solid #185c8a;
    outline-offset: 2px;
    border-radius: 3px;
}
/* Outline only, no fill, so a derby name labels the fixture instead of reading
   as one more filled chip. */
/* inline-BLOCK, not inline-flex. .ev-flag is a flex item of .ev-head, so an
   inline-flex here blockifies to `flex` and its OWN children become flex items -
   and whitespace between flex items is discarded. ft.club's "1<sup>st</sup> home
   match" rendered as "1sthome match" because of exactly that. inline-block
   blockifies to `block`, the children stay inline, and the space survives.
   There is no icon inside the pill any more, so nothing needed centring. */
.evlist .ev-flag {
    display: inline-block;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    color: #ff5300;
    background: none;
    border: 1px solid #ff5300;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}
.evlist .ev-flag-alt { color: #5f6f82; border-color: #c8d2e0; }

/* ---------- kickoff line ---------- */
.evlist .ev-kick {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #3d4d63;
    margin: 3px 0 0;
}
.evlist .ok { display: inline-flex; line-height: 0; vertical-align: -2px; }
.evlist .ok svg { width: 13px; height: 13px; }
.evlist .ev-mark {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 11.5px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .02em;
}
.evlist .ev-mark-tbc { color: #8a5d00; background: #fdf4e3; border: 1px solid #eedcb2; }
.evlist .ev-mark-off { color: #b3261e; background: #fdecea; border: 1px solid #f3c9c5; }

/* ---------- meta line ---------- */
.evlist .ev-meta {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: #5f6f82;
    margin-top: 5px;
}
.evlist .ev-dot { margin: 0 3px; color: #c2ccda; }

/* ---------- offer ---------- */
/* Mobile: price and button sit TOGETHER at the right end, not pushed to opposite
   edges. Split apart, the price read as a label belonging to the card's left
   column and the eye had to travel the full width to pair it with the action.
   Only affects the phone layout: the desktop block below switches this to a
   column, where justify-content governs the (auto-height) vertical axis and so
   has no effect. */
.evlist .ev-offer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 2px;
    padding-top: 11px;
    border-top: 1px solid #e4e8ef;
}
/* Wraps, and shrinks below its content width. Found on ft.fr at 375px: the
   French prefix + CTA ("a partir de 129.90 EUR" + "Voir les offres") is ~37px
   wider than the offer row, and because the row is justify-content:flex-end the
   overflow went off the LEFT edge, silently clipping "a partir de". Nothing
   scrolled, so it read as a missing word rather than a layout bug. Short
   prefixes (desde / From) never hit it, which is why only ft.fr showed it.
   The label now drops above the amount, still right-aligned; the amount itself
   keeps nowrap so a price never breaks across lines. */
.evlist .ev-price {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0 5px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    color: #076f58;
    text-align: right;
}
.evlist .ev-price b { white-space: nowrap; }
.evlist .ev-price b {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.evlist .ev-soon { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: #5f6f82; }
.evlist a.ev-cta {
    position: relative;
    z-index: 2;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    background: #185c8a;
    color: #fff;
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
    border-radius: 9px;
    white-space: nowrap;
    transition: background .15s ease;
}
.evlist a.ev-cta:hover { background: #12466a; color: #fff; text-decoration: none; }
/* No price yet: the row keeps its shape and only the offer block changes, so a
   fixture without tickets never looks broken. */
.evlist a.ev-cta.ghost {
    background: none;
    color: #185c8a;
    border: 1.5px solid #b8cfe0;
}
.evlist a.ev-cta.ghost:hover { background: #eaf2f8; border-color: #185c8a; color: #185c8a; }

/* ---------- tooltips ---------- */
/* The card's own bubble, NOT the site-wide .tooltip / data-text box in
   mystyle2.css. That one is white, :hover only and therefore unreachable on
   touch and on the keyboard. This one opens on focus too and drops BELOW the
   trigger: above, it would cover the card's own title and you would lose track
   of which match you are reading the time of. Below, it only covers the meta
   line. Wording comes from the site (the timezone string the listing already
   emitted, and the event page's own tbc phrasing) - only the presentation is
   from the artifact. */
.evlist .tt {
    position: relative;
    z-index: 2;
    cursor: help;
    font-weight: 700;
    border-bottom: 1px dotted currentColor;
    text-decoration: none;
}
.evlist .tt-tz { color: #4a5c74; }
.evlist .tt-tz:hover { color: #13274d; }
.evlist .tt-tbc {
    color: #8a5d00;
    background: #fdf4e3;
    border: 1px solid #eedcb2;
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 11.5px;
    line-height: 1.5;
    letter-spacing: .02em;
}
.evlist .tt-tbc:hover { background: #f8e9cd; border-color: #e2c98d; }
.evlist .tt:focus-visible { outline: 2px solid #185c8a; outline-offset: 2px; border-radius: 3px; }
.evlist .tt-b {
    position: absolute;
    left: -4px;
    top: calc(100% + 9px);
    width: 198px;
    background: #13274d;
    color: #e7edf9;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    border-radius: 9px;
    padding: 9px 11px;
    box-shadow: 0 8px 20px rgba(11, 25, 48, .32);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    z-index: 9;
}
.evlist .tt-b::after {
    content: "";
    position: absolute;
    left: 14px;
    top: -4px;
    width: 9px;
    height: 9px;
    background: #13274d;
    transform: rotate(45deg);
}
.evlist .tt:hover .tt-b,
.evlist .tt:focus .tt-b,
.evlist .tt:focus-visible .tt-b {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ---------- separators that survived the month headers ---------- */
.evlist .ev-sep,
.evlist .ev-note {
    background: #f2f5fa;
    border: 1px solid #e4e8ef;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13px;
    line-height: 1.45;
    color: #3d4d63;
    /* same reason as the card: the theme hyphenates, and "se confir-mará" in the
       release sentence reads as a typo. Pre-existing on the old monthwarning row,
       fixed here because this block now owns the styling. */
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
.evlist .ev-sep {
    font-weight: 700;
    color: #5f6f82;
}
.evlist .ev-note #warning-fixt-next-season { margin: 0; }
/* .ev-empty is deliberately a BARE <li>: the "no matches" box it carries is
   #warning-container, which already owns its yellow-panel look site-wide. Giving
   the li a card of its own would draw a box inside a box, and restyling
   #warning-container here would silently change every other place it appears. */
.evlist .ev-empty { list-style: none; }

/* ---------- the local-time note, between list and pagination ---------- */
.evlist-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #5f6f82;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH-SURFACE ADDITIONS
   Three things a search result needs that a listing row does not. A listing is
   scoped to one team, league or venue; a search result set spans seasons and
   competitions, so it has to say more per card.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Year in the date badge. NOT emitted on listings (single scope, so the year is
   noise) and not on every search card either: only when the fixture falls
   outside the current calendar year, which is the only time the day + month are
   ambiguous. Sized like .ev-mon so the badge keeps one type scale. */
.evlist .ev-yr {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #5f6f82;
    font-variant-numeric: tabular-nums;
}

/* Past clasicos, which the search pages list after the upcoming fixtures.
   Opacity rather than a grey palette: it dims the whole card uniformly,
   including the date badge and the chips, without needing a second colour set
   for every element. Carried over from .sr-match-card.sr-match-past. */
.evlist .ev-past { opacity: .65; }

/* Ticket-type chips. The pills themselves are styled site-wide in
   css/ft-components.css (.sr-match-types / .sr-type-pill) because the event
   page's price rows use them too; only their spacing inside a card belongs
   here. They sit last in .ev-info, under the meta line.
   Listings emit no chips yet: the listing SQL has three price buckets and no
   VIP signal, so it cannot say what a card would claim. That is the ONE
   deliberate difference between the two card flavours. */
.evlist .ev .sr-match-types { margin-top: 6px; }

/* ---------- pagination ---------- */
/* Two builders, one look. The class names are deliberately NOT unified, because
   each is a JS contract:
     - listings: assets/js/fixtures-ajax.js delegates on
       "#pagination-bottom a.pagination-link" and finds the current page with
       a[aria-current="page"].
     - /?s=: js/ft_search_pagination.js emits <a class="sr-page-link"> and
       delegates on ".sr-page-link".
     - advanced search: js/sr_search.js emits <SPAN class="sr-page-link"> and
       binds ".sr-page-link[data-page]".
   So .sr-page-link is an anchor on one page and a span on the other: every rule
   below has to work on both, which is why the base rule carries cursor:pointer
   (a span has none) and text-decoration:none (an anchor has one).
   Only the look and the source order changed here, never a class name. */
#pagination-bottom.pagination-controls,
.sr-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    height: auto;
    margin: 20px 0 0;
    padding: 0;
    text-align: center;
}
#pagination-bottom a.pagination-link,
.sr-pagination .sr-page-link {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 11px;
    border: 1px solid #e4e8ef;
    border-radius: 9px;
    background: #fff;
    color: #13274d;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
#pagination-bottom a.pagination-link:hover,
#pagination-bottom a.pagination-link:focus,
.sr-pagination .sr-page-link:hover,
.sr-pagination .sr-page-link:focus {
    background: #fff;
    color: #13274d;
    border-color: #13274d;
    text-decoration: none;
}
#pagination-bottom a.pagination-link:focus-visible,
.sr-pagination .sr-page-link:focus-visible { outline: 2px solid #185c8a; outline-offset: 2px; }
#pagination-bottom a.pagination-link.active,
#pagination-bottom a.pagination-link.active:hover,
#pagination-bottom a.pagination-link:active,
.sr-pagination .sr-page-link.sr-page-active,
.sr-pagination .sr-page-link.sr-page-active:hover {
    background: #13274d;
    color: #fff;
    border-color: #13274d;
    pointer-events: none;
}
#pagination-bottom a.pagination-link.prev,
#pagination-bottom a.pagination-link.next,
.sr-pagination .sr-page-link.sr-page-prev,
.sr-pagination .sr-page-link.sr-page-next { color: #185c8a; }
#pagination-bottom a.pagination-link.is-disabled,
#pagination-bottom a.pagination-link.is-disabled:hover,
.sr-pagination .sr-page-link.sr-page-disabled,
.sr-pagination .sr-page-link.sr-page-disabled:hover {
    opacity: .45;
    background: #fff;
    color: #185c8a;
    border-color: #e4e8ef;
    cursor: not-allowed;
    pointer-events: none;
}
/* The ellipsis carries .sr-page-link too, so without this reset it renders as
   one more clickable-looking pill. It is a gap marker, not a control. */
#pagination-bottom .pagination-ellipsis,
.sr-pagination .sr-page-link.sr-page-ellipsis,
.sr-pagination .sr-page-link.sr-page-ellipsis:hover {
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0 2px;
    border: none;
    background: none;
    color: #5f6f82;
    pointer-events: none;
    cursor: default;
}

/* ---------- desktop ---------- */
@media only screen and (min-width: 768px) {
    .evlist .ev {
        grid-template-columns: 62px minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 16px;
        padding: 14px 16px;
    }
    .evlist .ev-head .ev-title { flex: 0 1 auto; }
    /* The match name is the row's headline and there is room for it once the card
       is three columns; 16px is a phone size. Kept off mobile, where a longer
       fixture already runs to three lines at 16px. */
    .evlist a.ev-title { font-size: 18px; }
    .evlist .ev-offer {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-end;
        gap: 9px;
        margin: 0;
        padding: 0;
        border-top: 0;
    }
    .evlist .ev-price { flex-direction: column; align-items: flex-end; gap: 0; }
    .evlist .ev-price b { font-size: 22px; }
    .evlist .tt-b { width: 250px; }
}

/* The arrow words are the first thing to go when 7 pagination controls have to
   share a 375px line. The search builders emit glyphs, not words, so they have
   no .pag-t to hide; they only need the smaller pill. */
@media only screen and (max-width: 420px) {
    #pagination-bottom .pag-t { display: none; }
    #pagination-bottom a.pagination-link,
    .sr-pagination .sr-page-link { min-width: 34px; height: 34px; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .evlist .ev,
    .evlist a.ev-cta,
    .evlist .tt-b { transition: none; }
}