/* ── FPFC League Grid ── public.css ──────────────────────────────────────── */

.fpfc-leagues-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Filter pills ─────────────────────────────────────────────────────────── */
.fpfc-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.fpfc-pill {
    font-size: 13px;
    padding: 6px 18px;
    border-radius: 99px;
    border: 1.5px solid #d2b785;
    background: transparent;
    color: #242323;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.4;
}
.fpfc-pill:hover {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}
.fpfc-pill.active {
    background: #242323;
    color: #ffffff;
    border-color: #242323;
}

/* ── Grid — 3 col desktop, 2 tablet, 1 mobile ─────────────────────────────── */
.fpfc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 960px) {
    .fpfc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .fpfc-grid { grid-template-columns: 1fr; }
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.fpfc-card {
    background: #ffffff;
    border: 1px solid #e0dbd2;
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fpfc-card:hover {
    border-color: #d2b785;
    box-shadow: 0 4px 22px rgba(210, 183, 133, 0.18);
}
.fpfc-card.fpfc-hidden { display: none; }

/* ── Card top: logo + badge ───────────────────────────────────────────────── */
.fpfc-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 80px; /* doubled from 48px */
}
.fpfc-logo-box {
    width: 160px;  /* doubled */
    height: 80px;  /* doubled */
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.fpfc-logo-box img {
    max-width: 160px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.fpfc-logo-fallback {
    width: 80px;
    height: 80px;
    background: #242323;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #d2b785;
    text-align: center;
    line-height: 1.3;
    padding: 8px;
}

/* ── Tier badges ─────────────────────────────────────────────────────────── */
.fpfc-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}
.fpfc-badge-elite    { background: #242323; color: #d2b785; }
.fpfc-badge-regional { background: #2e2a1e; color: #d2b785; }
.fpfc-badge-state    { background: #1c2e1e; color: #b8dcc8; }
.fpfc-badge-local    { background: #1e2230; color: #c8d8ee; }

/* ── Card names ──────────────────────────────────────────────────────────── */
.fpfc-card-names { display: flex; flex-direction: column; gap: 3px; }
.fpfc-card-title {
    font-size: 18px;   /* up from 15px */
    font-weight: 700;
    color: #242323;
    line-height: 1.25;
}
.fpfc-card-abbr {
    font-size: 15px;   /* up from 13px */
    color: #a09890;
    font-weight: 400;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.fpfc-card-divider { height: 1px; background: #e0dbd2; }

/* ── Description ─────────────────────────────────────────────────────────── */
.fpfc-card-desc {
    font-size: 13px;
    color: #6b635a;
    line-height: 1.7;
    flex: 1;
}

/* ── Tags ────────────────────────────────────────────────────────────────── */
.fpfc-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.fpfc-tag {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 99px;
    background: #f0ede8;
    color: #6b635a;
    border: 1px solid #e0dbd2;
}

/* ── Visit button — icon RIGHT of text ───────────────────────────────────── */
.fpfc-visit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-direction: row;          /* text then icon */
    padding: 11px 18px;
    border-radius: 6px;
    border: none;
    background: #242323;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 4px;
}
.fpfc-visit-btn:hover {
    background: #000000;
    color: #ffffff;
    text-decoration: none;
}
.fpfc-visit-btn svg {
    flex-shrink: 0;
    /* icon sits after text naturally due to DOM order */
}