/* Home of the Federación Andaluza de Billar (Stitch design "Andalusian Billiards Precision").
   Template: application/third_party/fab/views/landing/home-portal.php. Everything is scoped by the "fab-" prefix.
   The public header and footer (layouts/menu-not-logged.php and layouts/footer-custom.php) are ".fab-chrome": they also
   show on every page seen without logging in, whose own styles must not reach them. */

.fab-page,
.fab-chrome {
    --fab-primary: #004526;
    --fab-primary-container: #1b5e3a;
    --fab-emerald: #2fa866;
    --fab-dark: #0b2618;
    --fab-slate: #191c21;
    --fab-surface: #f7faf6;
    --fab-surface-low: #f1f4f0;
    --fab-surface-high: #e6e9e5;
    --fab-felt: #f2f7f4;
    --fab-card: #ffffff;
    --fab-border: #e1e6e2;
    --fab-text: #181c1a;
    --fab-text-soft: #404942;
    --fab-outline: #707971;
    --fab-mint: #aef2c2;
    --fab-mint-dim: #92d5a8;
    --fab-mint-bg: #a9f3c3;
    --fab-mint-text: #29714b;
    --fab-gold: #e5b83b;
    --fab-gold-bg: rgba(229, 184, 59, .2);
    --fab-gold-text: #4c3900;
    --fab-red: #d63426;
    --fab-yellow: #f4c430;
    --fab-radius: .25rem;
    --fab-radius-card: .5rem;
    --fab-shadow: 0 2px 4px rgba(18, 22, 20, .04);
    --fab-shadow-hover: 0 8px 16px -4px rgba(27, 94, 58, .12);
    --fab-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --fab-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    scroll-behavior: smooth;
}

.fab-page *, .fab-page *::before, .fab-page *::after,
.fab-chrome, .fab-chrome *, .fab-chrome *::before, .fab-chrome *::after { box-sizing: border-box; }
.fab-chrome {
    color: var(--fab-text);
    font: 400 1rem/1.5 var(--fab-font-body);
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
.fab-page body {
    margin: 0;
    background: var(--fab-surface);
    color: var(--fab-text);
    font: 400 1rem/1.5 var(--fab-font-body);
    -webkit-font-smoothing: antialiased;
}
:where(.fab-page, .fab-chrome) a { color: inherit; text-decoration: none; }
:where(.fab-page, .fab-chrome) img { max-width: 100%; display: block; }
:where(.fab-page, .fab-chrome) ul { margin: 0; padding: 0; list-style: none; }
:where(.fab-page, .fab-chrome) :is(h1, h2, h3, h4, p, dl, dd) { margin: 0; }
.fab-chrome :where(h1, h2, h3, h4, p, ul, li) { margin: 0; padding: 0; }
.fab-chrome :where(ul, li) { list-style: none; }
.fab-chrome :where(h1, h2, h3, h4, p, li) { color: inherit; }
.fab-chrome :where(img) { border: 0; }
:is(.fab-page, .fab-chrome) [hidden] { display: none !important; }
:is(.fab-page, .fab-chrome) :focus-visible { outline: 2px solid var(--fab-emerald); outline-offset: 2px; }

:is(.fab-page, .fab-chrome) .material-symbols-outlined {
    font-size: 1.25rem;
    line-height: 1;
    vertical-align: middle;
    flex: none;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.fab-skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--fab-primary); color: #fff; padding: .5rem 1rem; }
.fab-skip:focus { left: 0; }

.fab-container { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 1024px) { .fab-container { padding: 0 2rem; } }

/* Typography */
.fab-display, .fab-h2, .fab-h3, .fab-h4, .fab-player__name, .fab-stats dd, .fab-brand__name {
    font-family: var(--fab-font-display);
    text-transform: uppercase;
}
.fab-display { font-size: 2.5rem; line-height: 1.05; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.fab-highlight { display: block; color: var(--fab-emerald); }
.fab-h2 { font-size: 2rem; line-height: 1.15; font-weight: 700; letter-spacing: -.005em; margin-top: .25rem; }
.fab-h2--card { font-size: 1.75rem; line-height: 1.15; color: var(--fab-primary); }
.fab-h3 { font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: .02em; color: var(--fab-primary); }
.fab-h4 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: .02em; }
@media (min-width: 1024px) {
    .fab-display { font-size: 4rem; letter-spacing: -.02em; }
    .fab-h2 { font-size: 2.75rem; }
}
.fab-eyebrow { color: var(--fab-primary); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fab-lead { font-size: 1.125rem; line-height: 1.6; color: var(--fab-surface-high); max-width: 42rem; }
.fab-empty { padding: 2rem; text-align: center; color: var(--fab-text-soft); background: var(--fab-card); border: 1px dashed var(--fab-border); border-radius: var(--fab-radius-card); }

/* Buttons, badges, links */
.fab-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .5rem .875rem; border: 0; border-radius: var(--fab-radius); cursor: pointer;
    font: 600 .875rem/1.2 var(--fab-font-body); letter-spacing: .05em; text-transform: uppercase;
    transition: background-color .15s ease, color .15s ease;
}
.fab-button--primary { background: var(--fab-primary); color: #fff; }
.fab-button--primary:hover { background: var(--fab-emerald); }
.fab-button--ghost { background: transparent; color: var(--fab-primary); text-transform: none; letter-spacing: 0; }
.fab-button--ghost:hover { background: var(--fab-felt); }
.fab-button--emerald { background: var(--fab-emerald); color: var(--fab-dark); padding: .75rem 1.5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.fab-button--emerald:hover { background: var(--fab-mint); }
.fab-button--glass { background: rgba(242, 247, 244, .1); color: #fff; padding: .75rem 1.5rem; }
.fab-button--glass:hover { background: rgba(242, 247, 244, .2); }
.fab-button--soft { background: var(--fab-felt); color: var(--fab-primary); font-size: .75rem; letter-spacing: .08em; }
.fab-button--soft:hover { background: var(--fab-primary-container); color: #fff; }
.fab-button--outline { border: 1.5px solid var(--fab-primary); color: var(--fab-primary); background: transparent; }
.fab-button--outline:hover { background: var(--fab-felt); }

.fab-badge {
    display: inline-block; padding: .125rem .5rem; border-radius: var(--fab-radius);
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}
.fab-badge--season { background: var(--fab-primary); color: var(--fab-mint); letter-spacing: .12em; }
.fab-badge--dark { background: var(--fab-primary-container); color: var(--fab-mint); }
.fab-badge--primary { background: var(--fab-primary-container); color: #fff; }
.fab-badge--gold { background: var(--fab-gold-bg); color: var(--fab-gold-text); }
.fab-badge--mint { background: var(--fab-mint-bg); color: var(--fab-mint-text); }
.fab-badge--neutral { background: var(--fab-surface-high); color: var(--fab-text-soft); }
.fab-badge--soft { background: var(--fab-felt); color: var(--fab-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fab-badge--dark.fab-badge--dark { background: var(--fab-primary-container); }
.fab-hub .fab-badge--dark { background: var(--fab-dark); color: var(--fab-gold); }

.fab-link {
    display: inline-flex; align-items: center; gap: .25rem; color: var(--fab-primary);
    font-size: .875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; transition: color .15s ease;
}
.fab-link:hover { color: var(--fab-emerald); }
.fab-link .material-symbols-outlined { font-size: 1.125rem; }

.fab-dot { width: .625rem; height: .625rem; border-radius: 50%; background: var(--fab-red); flex: none; }

/* Header */
.fab-header { background: rgba(247, 250, 246, .96); backdrop-filter: blur(8px); box-shadow: 0 1px 8px rgba(0, 0, 0, .04); }
/* On the home it sticks by itself; on the other pages the site's header container does. */
.fab-page .fab-header { position: sticky; top: 0; z-index: 50; }
.fab-topbar { background: var(--fab-dark); color: #fff; font-size: .875rem; }
.fab-topbar__inner { height: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fab-topbar__group { display: flex; align-items: center; gap: 1rem; }
.fab-topbar__official, .fab-topbar__phone, .fab-topbar__link { display: inline-flex; align-items: center; gap: .25rem; }
.fab-topbar__official { color: var(--fab-mint-dim); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fab-topbar__phone, .fab-topbar__link { color: #c0c9bf; transition: color .15s ease; }
.fab-topbar__link { color: var(--fab-mint-dim); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fab-topbar__phone:hover, .fab-topbar__link:hover { color: #fff; }
.fab-topbar .material-symbols-outlined { font-size: 1rem; }
.fab-topbar__lang { background: var(--fab-primary-container); color: var(--fab-mint); border-radius: var(--fab-radius); padding: 0 .5rem; font-size: .75rem; font-weight: 700; }
@media (max-width: 767px) {
    .fab-topbar__official span:last-child, .fab-topbar__phone, .fab-topbar__link span:last-child { display: none; }
}

.fab-navbar { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fab-brand { display: inline-flex; align-items: center; gap: .75rem; }
.fab-brand img { height: 2rem; width: auto; object-fit: contain; }
.fab-brand__text { display: flex; flex-direction: column; }
.fab-brand__name { font-size: 1.25rem; font-weight: 600; letter-spacing: .02em; line-height: 1; color: var(--fab-primary); }
.fab-brand__tagline { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fab-text-soft); }
.fab-navbar__toggle { display: inline-flex; padding: .5rem; border: 0; border-radius: var(--fab-radius); background: var(--fab-felt); color: var(--fab-primary); cursor: pointer; }
.fab-navbar__menu { display: none; width: 100%; flex-direction: column; gap: .75rem; padding-bottom: 1rem; }
.fab-navbar__menu.fab-is-open { display: flex; max-height: calc(100vh - 8rem); overflow-y: auto; }
.fab-nav { display: flex; flex-direction: column; gap: .25rem; }
.fab-nav__link {
    display: flex; align-items: center; gap: .25rem; padding: .5rem .625rem; border: 0; border-radius: .5rem; background: none; cursor: pointer;
    color: var(--fab-text-soft); font: 600 .875rem/1.2 var(--fab-font-body); letter-spacing: .02em; width: 100%; text-align: left; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.fab-nav__link:hover { background: var(--fab-surface-high); color: var(--fab-text); }
.fab-nav__link.fab-is-current { background: var(--fab-primary-container); color: #fff; }
.fab-nav__group { position: relative; }
.fab-nav__submenu { display: none; flex-direction: column; gap: .125rem; padding: .25rem 0 .25rem 1rem; }
.fab-nav__group.fab-is-open .fab-nav__submenu { display: flex; }
.fab-nav__submenu a { padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; letter-spacing: .05em; color: var(--fab-text-soft); }
.fab-nav__submenu a:hover { background: var(--fab-felt); color: var(--fab-primary); }
.fab-navbar__actions { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }

@media (min-width: 1280px) {
    .fab-navbar { flex-wrap: nowrap; }
    .fab-navbar__toggle { display: none; }
    .fab-navbar__menu, .fab-navbar__menu.fab-is-open { display: flex; width: auto; flex-direction: row; align-items: center; gap: 1rem; padding: 0; max-height: none; overflow: visible; }
    .fab-nav { flex-direction: row; align-items: center; gap: .25rem; }
    .fab-nav__link { width: auto; }
    .fab-nav__submenu {
        position: absolute; top: 100%; left: 0; z-index: 60; min-width: 15rem; padding: .5rem; margin-top: .25rem;
        background: var(--fab-card); border-radius: .75rem; box-shadow: var(--fab-shadow-hover);
    }
    .fab-nav__group:hover .fab-nav__submenu, .fab-nav__group:focus-within .fab-nav__submenu { display: flex; }
}

/* The tagline only fits beside the whole menu on wide screens. */
@media (min-width: 1280px) and (max-width: 1499px) { .fab-navbar .fab-brand__tagline { display: none; } }

/* Ticker */
.fab-ticker { background: var(--fab-slate); color: var(--fab-surface); padding: .5rem 0; overflow: hidden; }
.fab-ticker__inner { display: flex; align-items: center; gap: 1rem; }
.fab-ticker__label { display: inline-flex; align-items: center; gap: .5rem; flex: none; color: var(--fab-yellow); font: 600 1.25rem/1 var(--fab-font-display); letter-spacing: .05em; text-transform: uppercase; }
.fab-ticker__label .fab-dot { animation: fab-pulse 1.6s ease-in-out infinite; }
.fab-ticker__viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.fab-ticker__track { display: flex; gap: 2.5rem; width: max-content; white-space: nowrap; font-size: .875rem; font-weight: 600; animation: fab-marquee 40s linear infinite; }
.fab-ticker__viewport:hover .fab-ticker__track { animation-play-state: paused; }
.fab-ticker__track strong { color: var(--fab-mint-dim); }
.fab-ticker__track b { color: var(--fab-yellow); padding: 0 .25rem; }
.fab-ticker__all { display: none; flex: none; align-items: center; gap: .25rem; color: var(--fab-mint); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fab-ticker__all:hover { color: var(--fab-emerald); }
.fab-ticker__all .material-symbols-outlined { font-size: 1rem; }
@media (min-width: 768px) { .fab-ticker__all { display: inline-flex; } }
@keyframes fab-marquee { to { transform: translateX(-50%); } }
@keyframes fab-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .fab-ticker__track { animation: none; overflow-x: auto; width: auto; }
    .fab-ticker__track li[aria-hidden="true"] { display: none; }
    .fab-ticker__label .fab-dot { animation: none; }
    .fab-page { scroll-behavior: auto; }
}

/* Hero */
.fab-hero { position: relative; background: var(--fab-dark); color: #fff; padding: 2.5rem 0; overflow: hidden; }
.fab-hero::before { content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none; background: radial-gradient(var(--fab-emerald) 1px, transparent 1px) 0 0 / 24px 24px; }
.fab-hero__grid { position: relative; display: grid; gap: 2.5rem; align-items: center; }
.fab-hero__text { display: flex; flex-direction: column; gap: 1rem; }
.fab-hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fab-hero__institutions { color: #c0c9bf; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fab-actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .5rem; }
.fab-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(27, 94, 58, .4); }
.fab-stats__item { display: flex; flex-direction: column-reverse; }
.fab-stats dd { font-size: 2rem; font-weight: 600; line-height: 1; color: var(--fab-mint); font-variant-numeric: tabular-nums; }
.fab-stats__item--gold dd { color: var(--fab-gold); }
.fab-stats dt { color: #c0c9bf; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 640px) { .fab-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
    .fab-hero { padding: 4rem 0; }
    .fab-hero__grid { grid-template-columns: repeat(12, 1fr); }
    .fab-hero__text { grid-column: span 7; }
    .fab-hero__grid--single .fab-hero__text { grid-column: span 12; }
    .fab-scorecard { grid-column: span 5; }
}

.fab-scorecard { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-radius: .5rem; background: var(--fab-slate); box-shadow: 0 12px 28px rgba(0, 0, 0, .35); overflow: hidden; }
.fab-scorecard::after { content: ""; position: absolute; right: -2rem; bottom: -2rem; width: 11rem; height: 11rem; border-radius: 50%; background: rgba(0, 69, 38, .25); filter: blur(32px); pointer-events: none; }
.fab-scorecard__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fab-scorecard__status { color: var(--fab-mint-dim); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fab-scoreboard { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border-radius: .5rem; background: var(--fab-dark); }
.fab-scoreboard__meta { display: flex; justify-content: space-between; gap: .75rem; color: #c0c9bf; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fab-scoreboard__players { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fab-player { display: flex; flex-direction: column; align-items: center; gap: .125rem; min-width: 0; padding: .5rem; border-radius: var(--fab-radius); background: rgba(25, 28, 33, .6); text-align: center; }
.fab-player__name { width: 100%; font-size: 1.125rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.fab-player__score { font: 700 4rem/1 var(--fab-font-display); color: #fff; font-variant-numeric: tabular-nums; margin-top: .25rem; }
.fab-player.fab-is-winner .fab-player__score { color: var(--fab-yellow); }
.fab-ball { width: .875rem; height: .875rem; border-radius: 50%; margin-bottom: .25rem; }
.fab-ball--white { background: var(--fab-surface); }
.fab-ball--yellow { background: var(--fab-yellow); }
.fab-scorecard__link { position: relative; z-index: 1; align-self: flex-end; display: inline-flex; align-items: center; gap: .25rem; color: var(--fab-emerald); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fab-scorecard__link:hover { text-decoration: underline; }
.fab-scorecard__link .material-symbols-outlined { font-size: 1rem; }

/* Sections */
.fab-section { padding: 2.5rem 0; }
.fab-section--tint { background: var(--fab-surface-low); }
@media (min-width: 1024px) { .fab-section { padding: 4rem 0; } }
.fab-section__head { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2.5rem; }
.fab-section__text { color: var(--fab-text-soft); max-width: 28rem; }
@media (min-width: 768px) { .fab-section__head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }

.fab-card { background: var(--fab-card); border: 1px solid var(--fab-border); border-radius: var(--fab-radius-card); box-shadow: var(--fab-shadow); transition: box-shadow .15s ease, border-color .15s ease; }
.fab-card:hover { box-shadow: var(--fab-shadow-hover); border-color: var(--fab-primary-container); }

/* Competition hubs */
.fab-hubs { display: grid; gap: 1rem; }
@media (min-width: 768px) { .fab-hubs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fab-hubs { grid-template-columns: repeat(3, 1fr); } }
.fab-hub { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; }
.fab-hub__top { display: flex; align-items: center; justify-content: space-between; }
.fab-hub__icon { color: var(--fab-primary); font-size: 1.5rem; transition: transform .15s ease; }
.fab-hub:hover .fab-hub__icon { transform: scale(1.1); }
.fab-hub__meta { color: var(--fab-text-soft); font-size: .875rem; }
.fab-hub .fab-h3 a:hover { color: var(--fab-emerald); }
.fab-chips { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; align-content: flex-start; padding-top: .75rem; border-top: 1px solid var(--fab-surface-high); }
.fab-chips a { display: block; max-width: 100%; padding: .125rem .5rem; border-radius: var(--fab-radius); background: var(--fab-felt); color: var(--fab-text-soft); font-size: .75rem; font-weight: 600; transition: background-color .15s ease, color .15s ease; }
.fab-chips a:hover { background: var(--fab-primary-container); color: #fff; }
.fab-hub__link { margin-top: auto; }

/* News */
.fab-news { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .fab-news { grid-template-columns: 7fr 5fr; } }
.fab-news__lead { display: flex; flex-direction: column; overflow: hidden; }
.fab-news__image { position: relative; display: block; height: 18rem; background: var(--fab-felt); overflow: hidden; }
.fab-news__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fab-news__lead:hover .fab-news__image img { transform: scale(1.04); }
.fab-news__image .fab-badge { position: absolute; top: 1rem; left: 1rem; }
.fab-news__body { display: flex; flex: 1; flex-direction: column; gap: .75rem; padding: 1.5rem; }
.fab-news__body p { color: var(--fab-text-soft); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fab-news__body .fab-link { margin-top: auto; }
.fab-news__body h3 a:hover { color: var(--fab-emerald); }
.fab-news__date { display: inline-flex; align-items: center; gap: .25rem; color: var(--fab-text-soft); font-size: .8125rem; font-weight: 600; }
.fab-news__date .material-symbols-outlined { font-size: 1rem; }
.fab-news__list { display: flex; flex-direction: column; gap: 1rem; }
.fab-news__item { display: flex; gap: 1rem; padding: 1rem; }
.fab-news__thumb { display: none; flex: none; width: 8rem; height: 8rem; border-radius: var(--fab-radius); overflow: hidden; background: var(--fab-felt); }
.fab-news__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 640px) { .fab-news__thumb { display: block; } }
.fab-news__item > div { display: flex; flex-direction: column; justify-content: space-between; gap: .25rem; min-width: 0; }
.fab-news__tag { color: var(--fab-primary); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fab-news__item h3 a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fab-news__item h3 a:hover { color: var(--fab-primary); }

/* Matches and standings */
.fab-tabs { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: .25rem; padding: .25rem; border-radius: .5rem; background: var(--fab-surface-high); }
.fab-tabs__tab { padding: .25rem 1rem; border: 0; border-radius: var(--fab-radius); background: none; cursor: pointer; color: var(--fab-text-soft); font: 600 .75rem/1.6 var(--fab-font-body); letter-spacing: .08em; text-transform: uppercase; transition: background-color .15s ease, color .15s ease; }
.fab-tabs__tab:hover { color: var(--fab-text); }
.fab-tabs__tab[aria-selected="true"] { background: var(--fab-primary); color: #fff; font-weight: 700; }
@media (min-width: 768px) { .fab-tabs { align-self: auto; } }

.fab-grid { display: grid; gap: 1rem; }
.fab-grid > *, .fab-hubs > *, .fab-news > *, .fab-services > * { min-width: 0; }
@media (min-width: 768px) { .fab-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fab-grid { grid-template-columns: repeat(3, 1fr); } }
.fab-fixture { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; }
.fab-fixture__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.fab-fixture__state, .fab-fixture__date { flex: none; color: var(--fab-outline); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fab-fixture__state.fab-is-live { color: var(--fab-mint-text); }
.fab-fixture__foot { display: inline-flex; align-items: center; gap: .25rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--fab-surface-high); color: var(--fab-outline); font-size: .8125rem; font-weight: 600; }
.fab-fixture__foot .material-symbols-outlined { font-size: 1rem; }
.fab-fixture__teams { display: flex; flex-direction: column; gap: .5rem; padding: .5rem 0; }
.fab-fixture__team span { min-width: 0; overflow-wrap: anywhere; }
.fab-fixture__team { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--fab-outline); font: 600 1.125rem/1.2 var(--fab-font-display); letter-spacing: .02em; text-transform: uppercase; }
.fab-fixture__team b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.fab-fixture__team.fab-is-winner { color: var(--fab-text); }
.fab-fixture__team.fab-is-winner b { color: var(--fab-primary); }

.fab-table { overflow: hidden; }
.fab-table__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: 1rem; border-bottom: 2px solid var(--fab-primary-container); background: var(--fab-felt); }
.fab-table__scroll { overflow-x: auto; }
.fab-table table { width: 100%; border-collapse: collapse; text-align: center; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.fab-table th, .fab-table td { padding: .75rem 1rem; }
.fab-table thead th { background: var(--fab-felt); color: var(--fab-text); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.fab-table tbody tr { border-top: 1px solid var(--fab-surface-low); transition: background-color .15s ease; }
.fab-table tbody tr:nth-child(even) { background: rgba(242, 247, 244, .6); }
.fab-table tbody tr:hover { background: var(--fab-felt); box-shadow: inset 4px 0 0 var(--fab-primary-container); }
.fab-table tbody th { text-align: left; font: 600 1.125rem/1.2 var(--fab-font-display); letter-spacing: .02em; text-transform: uppercase; }
.fab-table thead th:nth-child(2) { text-align: left; }
.fab-table td:last-child { text-align: right; color: var(--fab-primary); }
.fab-table thead th:last-child { text-align: right; color: var(--fab-primary); }
.fab-table td:first-child { font-weight: 700; color: var(--fab-outline); }
.fab-table thead th:first-child, .fab-table td:first-child { width: 4.5rem; }
.fab-is-podium--1 td:first-child { color: var(--fab-gold); box-shadow: inset 4px 0 0 var(--fab-gold); }
.fab-is-podium--2 td:first-child { color: #9aa29b; box-shadow: inset 4px 0 0 #b9c0ba; }
.fab-is-podium--3 td:first-child { color: #a8703a; box-shadow: inset 4px 0 0 #c98a4b; }

/* Services */
.fab-services { display: grid; gap: 1rem; }
@media (min-width: 640px) { .fab-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fab-services { grid-template-columns: repeat(4, 1fr); } }
.fab-service { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; }
.fab-service:hover { background: var(--fab-felt); }
.fab-service p { color: var(--fab-text-soft); font-size: .875rem; line-height: 1.45; flex: 1; }
.fab-service__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .5rem; transition: transform .15s ease; }
.fab-service:hover .fab-service__icon { transform: scale(1.05); }
.fab-service__icon .material-symbols-outlined { font-size: 1.625rem; }
.fab-service__icon--primary { background: var(--fab-primary-container); color: #fff; }
.fab-service__icon--neutral { background: var(--fab-surface-high); color: var(--fab-primary); }
.fab-service__icon--gold { background: var(--fab-gold-bg); color: var(--fab-gold-text); }

/* Partners */
.fab-partners { background: var(--fab-surface-low); padding: 1.5rem 0; }
.fab-partners__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: center; }
.fab-partners__title { display: block; color: var(--fab-outline); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fab-partners__text { color: var(--fab-text-soft); font-size: .875rem; }
.fab-partners__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; }
.fab-partners__list img { max-height: 3rem; width: auto; filter: grayscale(1); opacity: .8; transition: filter .15s ease, opacity .15s ease; }
.fab-partners__list a:hover img { filter: none; opacity: 1; }
@media (min-width: 768px) { .fab-partners__inner { flex-direction: row; text-align: left; } }

/* Footer */
.fab-footer { background: var(--fab-surface-low); color: var(--fab-text-soft); }
.fab-footer__grid { display: grid; gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) { .fab-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .fab-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr; } }
.fab-footer__col { display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; line-height: 1.5; }
.fab-footer__col ul { display: flex; flex-direction: column; gap: .5rem; }
.fab-footer__col a:hover { color: var(--fab-primary); }
.fab-footer__title { font: 600 1.25rem/1.3 var(--fab-font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--fab-text); }
.fab-footer__col .fab-brand__tagline { text-transform: none; letter-spacing: 0; font-weight: 400; max-width: 15rem; }
.fab-footer__col .fab-brand__name { font-size: 1.25rem; }
.fab-footer__actions { display: flex; flex-direction: column; gap: .5rem; }
.fab-footer__actions .fab-button { padding: .5rem 1rem; }
.fab-footer__actions .fab-button--primary:hover, .fab-footer__col a.fab-button--primary:hover { color: #fff; }
.fab-footer__bottom { background: var(--fab-dark); color: #c0c9bf; padding: 1rem 0; font-size: .875rem; }
.fab-footer__bottom-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem; text-align: center; }
.fab-footer__powered { display: inline-flex; align-items: center; gap: .5rem; }
.fab-footer__powered:hover { color: #fff; }
.fab-footer__powered img { width: auto; }
@media (min-width: 768px) { .fab-footer__bottom-inner { flex-direction: row; text-align: left; } }