/* =====================================================================
   SONGKHLA FC — SUBPAGES  ("SOUTHERN STEEL" design system)
   Shared by: news/index, news/show, matches/fixtures,
              pages/ticket, pages/partner
   Extends tokens & components from app.css — never fights them.
   ===================================================================== */

/* ---------------------------------------------------------------------
   A11Y UTILITIES
   --------------------------------------------------------------------- */
/* ข้อความสำหรับโปรแกรมอ่านหน้าจอเท่านั้น (ซ่อนจากสายตา) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* app.css ตั้ง .section-dark h1,h2,h3 { color: var(--paper-2) } ซึ่งทำให้
   หัวข้อในการ์ดข่าว (พื้นขาว) กลายเป็นขาวบนขาว — คืนสีเข้มให้การ์ด */
.section-dark .news-card h3 { color: var(--ink-900); }
/* คงพฤติกรรม hover เดิมของ app.css (.news-card:hover h3 -> แดง) ไว้ */
.section-dark .news-card:hover h3 { color: var(--red); }

/* ---------------------------------------------------------------------
   NEWS — toolbar / filters / search (news/index)
   --------------------------------------------------------------------- */
.toolbar-band {
    background: var(--paper-2);
    border-bottom: var(--rule);
}

.news-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-6);
    flex-wrap: wrap;
}

/* หมวดหมู่ = แท็บป้ายเล็กขีดเส้นใต้ ไม่ใช่ pill กลม */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-6);
}
.filter-pill {
    position: relative;
    font-family: var(--font-head);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-400);
    padding: 10px 12px 12px;
    transition: color .22s var(--ease);
}
.filter-pill::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease-out);
}
.filter-pill:hover { color: var(--ink-900); }
.filter-pill:hover::after { transform: scaleX(1); }
.filter-pill.active { color: var(--ink-900); }
.filter-pill.active::after { transform: scaleX(1); }

.news-search { display: flex; gap: var(--sp-2); }
.news-search input[type="search"] {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    padding: var(--sp-3) var(--sp-4);
    background: var(--paper-2);
    /* --rule (rgba(10,10,12,.12)) จางเกินไปจนขอบมองแทบไม่เห็น (1.30:1, ต้องการ ≥3:1) */
    border: 1px solid rgba(10, 10, 12, .5);
    border-radius: var(--radius);
    min-width: 220px;
    color: var(--ink-800);
}
.news-search input[type="search"]:focus {
    outline: 2px solid var(--red);
    outline-offset: -2px;
}
.news-search input[type="search"]::placeholder { color: var(--ink-300); }

.search-result-note {
    margin-top: var(--sp-6);
    font-size: var(--fs-sm);
    color: var(--ink-400);
}
.search-result-note strong { color: var(--red); font-weight: 700; }

/* ---------------------------------------------------------------------
   NEWS — grid & cards
   --------------------------------------------------------------------- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}
.news-grid.news-grid-4 { grid-template-columns: repeat(4, 1fr); }

.news-card .news-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.news-card .news-views {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--ink-400);
}
.news-card .news-views::before { content: '\1F441'; margin-right: var(--sp-1); opacity: .7; }

/* แถวข่าวเด่น — กว้างเต็ม แนวนอน */
.news-card.news-card--feature { grid-column: 1 / -1; }
@media (min-width: 761px) {
    .news-card.news-card--feature {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
    }
    .news-card--feature .news-thumb { aspect-ratio: auto; height: 100%; }
    .news-card--feature .news-body {
        justify-content: center;
        padding: var(--sp-7) var(--sp-8);
        gap: var(--sp-4);
    }
    .news-card--feature .news-date { font-size: var(--fs-sm); }
    .news-card--feature h3 {
        font-size: var(--fs-h2);
        -webkit-line-clamp: 4;
    }
}

/* ---------------------------------------------------------------------
   NEWS ARTICLE (news/show)
   --------------------------------------------------------------------- */
.article-column { max-width: 72ch; margin: 0 auto; }

.article-header {
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-6);
    border-bottom: var(--rule);
}
.article-header .badge-cat-static {
    display: inline-block;
    background: var(--red);
    color: var(--paper-2);
    font-family: var(--font-head);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius);
    margin-bottom: var(--sp-4);
}
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
    font-family: var(--font-head);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-400);
}
.article-meta span::after {
    content: '\00b7';
    margin-left: var(--sp-3);
    color: var(--ink-300);
}
.article-meta span:last-child::after { content: none; }

.article-media {
    margin: var(--sp-6) 0 var(--sp-7);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.article-media img { width: 100%; }
.video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--ink-900);
}
.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.related-block .section-title { margin-bottom: var(--sp-7); }

/* ---------------------------------------------------------------------
   FIXTURES — tabs
   --------------------------------------------------------------------- */
.fixtures-tabs {
    display: flex;
    gap: var(--sp-7);
    flex-wrap: wrap;
    border-bottom: var(--rule);
    margin-bottom: var(--sp-7);
}
.fixtures-tab-btn {
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-400);
    padding: 0 4px var(--sp-4);
    transition: color .22s var(--ease);
}
.fixtures-tab-btn::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease-out);
}
.fixtures-tab-btn:hover { color: var(--ink-900); }
.fixtures-tab-btn.active { color: var(--ink-900); }
.fixtures-tab-btn.active::after { transform: scaleX(1); }
.fixtures-panel { display: none; }
.fixtures-panel.active { display: block; }

/* ---------------------------------------------------------------------
   FIXTURES — editorial match list
   --------------------------------------------------------------------- */
.match-list { display: flex; flex-direction: column; }
.match-card {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-5) 0;
    border-bottom: var(--rule);
    transition: background-color .22s var(--ease);
}
.match-list .match-card:first-child { border-top: var(--rule); }
.match-card:hover { background: var(--paper-2); }

.match-date-badge { text-align: center; line-height: 1; }
.match-date-badge .d {
    font-family: var(--font-num);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--ink-900);
}
.match-date-badge .m {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--red);
    margin-top: var(--sp-1);
}
.match-date-badge .y {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    color: var(--ink-400);
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
}
.match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    width: 150px;
    text-align: center;
}
.match-team img { height: 52px; width: 52px; object-fit: contain; }
.match-team img.logo-fallback { filter: grayscale(1); opacity: .5; }
.match-team span {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-800);
}
.match-team.is-club span { color: var(--red); }
.match-vs {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: .06em;
    color: var(--ink-300);
}

.match-score {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: .01em;
    line-height: 1;
}
.match-score .win { color: var(--red); }
.match-score .draw { color: var(--ink-600); }
.match-score .loss { color: var(--ink-400); }

.match-info { text-align: right; }
.match-info .match-time {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--ink-900);
    line-height: 1;
}
.match-info .match-competition {
    display: inline-block;
    font-family: var(--font-head);
    font-size: var(--fs-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--gold);
    margin-top: var(--sp-2);
}
.match-info .match-stadium {
    font-size: var(--fs-xs);
    color: var(--ink-400);
    margin-top: var(--sp-2);
}

@media (max-width: 760px) {
    .match-card { grid-template-columns: 1fr; text-align: center; gap: var(--sp-4); padding: var(--sp-6) 0; }
    .match-info { text-align: center; }
    .match-teams { flex-wrap: wrap; gap: var(--sp-5); }
}

/* ---------------------------------------------------------------------
   FIXTURES — standings competition sub-tabs
   --------------------------------------------------------------------- */
.standings-comp-tabs {
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
    border-bottom: var(--rule);
    margin-bottom: var(--sp-6);
}
.standings-comp-tab-btn {
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-400);
    padding: 0 0 var(--sp-3);
    transition: color .22s var(--ease);
}
.standings-comp-tab-btn::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease-out);
}
.standings-comp-tab-btn:hover { color: var(--ink-900); }
.standings-comp-tab-btn.active { color: var(--ink-900); }
.standings-comp-tab-btn.active::after { transform: scaleX(1); }
.standings-comp-panel { display: none; }
.standings-comp-panel.active { display: block; }
.standings-note { font-size: var(--fs-xs); color: var(--ink-400); margin-top: var(--sp-5); }

/* ---------------------------------------------------------------------
   TICKET PAGE
   --------------------------------------------------------------------- */
.stadium-hero {
    position: relative;
    overflow: hidden;
    border: var(--rule-dark);
    margin-bottom: var(--sp-8);
}
.stadium-hero img { width: 100%; height: 380px; object-fit: cover; filter: grayscale(.1); }
.stadium-hero .stadium-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 10, 12, .92) 0%, rgba(10, 10, 12, .35) 60%, rgba(10, 10, 12, .05) 100%);
    display: flex;
    align-items: flex-end;
    padding: var(--sp-7);
    color: var(--paper-2);
}
.stadium-hero-overlay h2 { font-size: var(--fs-h2); }
.stadium-hero-overlay p {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ink-300);
    margin-top: var(--sp-3);
    max-width: 56ch;
}

.zone-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-5);
}
.zone-card {
    background: var(--paper-2);
    border: var(--rule);
    border-top: 3px solid var(--red);
    border-radius: var(--radius);
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out);
}
.zone-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.zone-card.zone-vip { border-top-color: var(--gold); }
.zone-card h3 {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--ink-400);
    margin-bottom: var(--sp-4);
}
.zone-card .zone-price {
    font-family: var(--font-num);
    font-size: var(--fs-display);
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1;
}
.zone-card.zone-vip .zone-price { color: var(--red); }
.zone-card .zone-price small {
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-400);
    margin-left: var(--sp-1);
}

.ticket-match-list { display: flex; flex-direction: column; }
.ticket-match-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
    padding: var(--sp-5) 0;
    border-bottom: var(--rule);
}
.ticket-match-list .ticket-match-card:first-child { border-top: var(--rule); }
.ticket-match-card .tm-info { display: flex; align-items: center; gap: var(--sp-4); }
.ticket-match-card img { height: 44px; width: 44px; object-fit: contain; }
.ticket-match-card .tm-vs { font-family: var(--font-num); font-weight: 700; color: var(--ink-300); }
.ticket-match-card .tm-meta {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-400);
    margin-top: var(--sp-1);
}

.howto-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-7);
}
.howto-step { border-top: var(--rule-dark); padding-top: var(--sp-6); }
.howto-step .step-num {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: var(--fs-display);
    line-height: 1;
    color: var(--red);
    margin-bottom: var(--sp-4);
}
.howto-step h4 {
    font-family: var(--font-head);
    font-size: var(--fs-h3);
    color: var(--paper-2);
    margin-bottom: var(--sp-3);
}
.howto-step p {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ink-300);
    line-height: 1.75;
}

/* ---------------------------------------------------------------------
   PARTNER PAGE — แถบสลับสว่าง/มืด โลโก้วางบนพื้นตรง ๆ ไม่มีการ์ด
   โลโก้ของพาร์ทเนอร์มีทั้งแบบเข้มบนพื้นใส และแบบขาวบนพื้นใส
   จึงจัด TIER 1 (ตรวจแล้วว่าอ่านออกบนพื้นดำ) ไว้บนแถบดำ
   ส่วน TIER 2/3 ที่ส่วนใหญ่เป็นโลโก้เข้ม อยู่บนแถบกระดาษ
   และเติมเส้นขอบเงาบาง ๆ ให้โลโก้สีขาวไม่จมหายไปกับพื้นสว่าง
   --------------------------------------------------------------------- */
.ptr-lede { background: var(--paper-2); border-bottom: var(--rule); }
.ptr-lede-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--sp-6) var(--sp-8);
    align-items: end;
}
.ptr-lede-text {
    font-size: var(--fs-body);
    line-height: 1.9;
    color: var(--ink-700);
    max-width: 62ch;
    border-left: 3px solid var(--red);
    padding-left: var(--sp-5);
}
.ptr-lede-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-7);
    justify-content: flex-end;
}
.ptr-lede-stats dt { color: var(--ink-400); margin-bottom: var(--sp-2); }
.ptr-lede-stats dd {
    font-size: 2rem;
    line-height: 1;
    color: var(--ink-900);
}

/* --- หัวแถบของแต่ละระดับ --- */
.ptr-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-5);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-8);
    border-bottom: var(--rule);
}
.section-dark .ptr-head { border-bottom: var(--rule-dark); }
.ptr-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 68px;
    height: 3px;
    background: var(--red);
}
.ptr-head-index {
    display: block;
    color: var(--red);
    margin-bottom: var(--sp-3);
}
.section-dark .ptr-head-index { color: var(--red-hot); }
.ptr-head-title {
    font-family: var(--font-head);
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: var(--track-tight);
    line-height: 1;
    color: var(--ink-900);
}
.ptr-head-sub {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--ink-500);
    padding-bottom: 2px;
}
.section-dark .ptr-head-sub { color: var(--ink-300); }

/* --- แถวโลโก้: กริดคงที่ต่อแถว จัดกึ่งกลาง แถวสุดท้ายไม่เบี้ยว --- */
.ptr-row {
    --cols: 4;
    --col-gap: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-6) var(--col-gap);
}
.ptr-cell {
    flex: 0 0 auto;
    width: calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-2) var(--sp-2);
    text-align: center;
    border-top: var(--rule);
    transition: transform .35s var(--ease-out);
}
.section-dark .ptr-cell { border-top: var(--rule-dark); }
.ptr-cell:hover { transform: translateY(-4px); }

.ptr-cell-logo {
    height: 64px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ptr-cell-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    opacity: .78;
    filter: grayscale(1);
    transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.ptr-cell:hover .ptr-cell-logo img { filter: grayscale(0); opacity: 1; }

/* โลโก้ขาวบนพื้นใสจะจมหายบนแถบกระดาษ — ใส่ขอบเงาบางให้ยังอ่านออก */
.ptr-band--2 .ptr-cell-logo img,
.ptr-band--3 .ptr-cell-logo img {
    opacity: .88;
    filter: grayscale(1)
        drop-shadow(0 0 .75px rgba(var(--ink-rgb), .8))
        drop-shadow(0 0 2.5px rgba(var(--ink-rgb), .35));
}
.ptr-band--2 .ptr-cell:hover .ptr-cell-logo img,
.ptr-band--3 .ptr-cell:hover .ptr-cell-logo img {
    filter: grayscale(0) drop-shadow(0 0 1px rgba(var(--ink-rgb), .35));
}

/* โลโก้สองตัวนี้เป็นลายเส้นสีขาวล้วนบนพื้นโปร่งใส วัดค่าพิกเซลจริงแล้วได้
   88-sport = สว่าง 100% / เข้ม 0%  และ rakang = สว่าง 66.7% / เข้ม 0.4%
   เงา drop-shadow ด้านบนช่วยไม่พอ ยังจมหายไปกับแถบพื้นสว่าง
   จึงรองด้วยแผ่นสีเข้มให้อ่านออกตามที่แบรนด์ออกแบบมา (ขาวบนเข้ม)
   ไม่ใช้ invert() เพราะสีแบรนด์จะเพี้ยนตอน hover ที่คืนสีจริง
   เกณฑ์: ใส่เฉพาะโลโก้ที่วัดแล้วแทบไม่มีพิกเซลเข้มเลย — ศรีตรัง/นักวิ่ง มีพื้นทึบมาเองจึงไม่ต้องใส่ */
.ptr-band--2 .ptr-cell-logo:has(img[src*="88-sport"]),
.ptr-band--2 .ptr-cell-logo:has(img[src*="rakang"]),
.ptr-band--3 .ptr-cell-logo:has(img[src*="88-sport"]),
.ptr-band--3 .ptr-cell-logo:has(img[src*="rakang"]) {
    background: var(--ink-900);
    padding: var(--sp-3) var(--sp-5);
    width: auto;
    max-width: 100%;
}
.ptr-band--2 .ptr-cell-logo img[src*="88-sport"],
.ptr-band--2 .ptr-cell-logo img[src*="rakang"],
.ptr-band--3 .ptr-cell-logo img[src*="88-sport"],
.ptr-band--3 .ptr-cell-logo img[src*="rakang"] {
    opacity: 1;
    filter: grayscale(1) brightness(1.6);
}
.ptr-band--2 .ptr-cell:hover .ptr-cell-logo img[src*="88-sport"],
.ptr-band--2 .ptr-cell:hover .ptr-cell-logo img[src*="rakang"],
.ptr-band--3 .ptr-cell:hover .ptr-cell-logo img[src*="88-sport"],
.ptr-band--3 .ptr-cell:hover .ptr-cell-logo img[src*="rakang"] {
    filter: grayscale(0);
}

.ptr-cell-name {
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.4;
    color: var(--ink-500);
    transition: color .25s var(--ease);
}
.section-dark .ptr-cell-name { color: var(--ink-300); }
.ptr-cell:hover .ptr-cell-name { color: var(--red); }
.section-dark .ptr-cell:hover .ptr-cell-name { color: var(--paper-2); }

/* --- ไล่ลำดับความสำคัญ: TIER 1 ใหญ่และโปร่ง แล้วค่อย ๆ แน่นขึ้น --- */
.ptr-band--1 .ptr-row { --cols: 4; --col-gap: var(--sp-6); gap: var(--sp-8) var(--sp-6); }
.ptr-band--1 .ptr-cell { padding: var(--sp-6) var(--sp-4) var(--sp-4); gap: var(--sp-5); }
.ptr-band--1 .ptr-cell-logo { height: 118px; }
.ptr-band--1 .ptr-cell-name { font-size: var(--fs-sm); }
/* ขีดแดงสั้น ๆ ทับเส้นบนของ TIER 1 — ให้แถวหน้าดูมีน้ำหนัก */
.ptr-band--1 .ptr-cell { position: relative; }
.ptr-band--1 .ptr-cell::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 34px;
    height: 2px;
    background: var(--red);
    transition: width .35s var(--ease-out);
}
.ptr-band--1 .ptr-cell:hover::before { width: 100%; }

.ptr-band--2 { background: var(--paper-2); }
.ptr-band--2 .ptr-row { --cols: 4; }
.ptr-band--2 .ptr-cell-logo { height: 82px; }

.ptr-band--3 { background: var(--paper); border-top: var(--rule); }
.ptr-band--3 .ptr-row { --cols: 5; --col-gap: var(--sp-4); }
.ptr-band--3 .ptr-cell-logo { height: 58px; }
.ptr-band--3 .ptr-cell-name { font-size: var(--fs-label); }

/* --- ปิดท้ายด้วยแถบชวนเป็นพาร์ทเนอร์ --- */
.ptr-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5) var(--sp-7);
}
.ptr-cta-label { display: block; color: var(--red-hot); margin-bottom: var(--sp-3); }
.ptr-cta-title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.ptr-cta-text {
    font-size: var(--fs-sm);
    color: var(--ink-300);
    max-width: 64ch;
    line-height: 1.8;
}

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 960px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid.news-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .zone-grid { grid-template-columns: repeat(2, 1fr); }
    .ptr-lede-inner { grid-template-columns: 1fr; align-items: start; }
    .ptr-lede-stats { justify-content: flex-start; gap: var(--sp-6); }
    .ptr-band--1 .ptr-row { --cols: 2; }
    .ptr-band--2 .ptr-row { --cols: 3; }
    .ptr-band--3 .ptr-row { --cols: 4; }
    .howto-steps { grid-template-columns: 1fr; }
    .howto-step { border-top: 0; border-left: var(--rule-dark); padding-top: 0; padding-left: var(--sp-6); }
}

@media (max-width: 640px) {
    .news-grid, .news-grid.news-grid-4 { grid-template-columns: 1fr; }
    .zone-grid { grid-template-columns: 1fr; }
    .ptr-band--1 .ptr-row { --cols: 2; --col-gap: var(--sp-4); gap: var(--sp-6) var(--sp-4); }
    .ptr-band--1 .ptr-cell-logo { height: 76px; }
    .ptr-band--1 .ptr-cell { padding: var(--sp-5) var(--sp-2) var(--sp-3); gap: var(--sp-4); }
    .ptr-band--2 .ptr-row { --cols: 3; --col-gap: var(--sp-4); }
    .ptr-band--2 .ptr-cell-logo { height: 52px; }
    .ptr-band--3 .ptr-row { --cols: 3; --col-gap: var(--sp-3); }
    .ptr-band--3 .ptr-cell-logo { height: 42px; }
    .ptr-head { align-items: flex-start; }
    .ptr-lede-stats dd { font-size: 1.625rem; }
    .news-toolbar { align-items: stretch; }
    .news-search { flex-direction: column; }
    .news-search input[type="search"] { min-width: 0; }
    .match-teams { gap: var(--sp-3); }
    .match-team { width: 108px; }
    .ticket-match-card { flex-direction: column; align-items: stretch; text-align: center; }
    .ticket-match-card .tm-info { justify-content: center; }
    .stadium-hero img { height: 240px; }
}

@media (max-width: 420px) {
    .ptr-band--2 .ptr-row,
    .ptr-band--3 .ptr-row { --cols: 2; --col-gap: var(--sp-4); }
    .ptr-band--2 .ptr-cell-logo { height: 62px; }
    .ptr-band--3 .ptr-cell-logo { height: 50px; }
    .ptr-lede-stats { gap: var(--sp-5); }
}

/* ป้ายบอกว่ากำลังแสดงตารางคะแนนของฤดูกาลที่แล้ว (ฤดูกาลใหม่ยังไม่เริ่มเตะ) */
.standings-season-note {
    margin: calc(var(--sp-7) * -1 + var(--sp-2)) 0 var(--sp-6);
    padding: var(--sp-3) var(--sp-4);
    color: var(--ink-500);
    background: var(--paper-2);
    border-left: 3px solid var(--red);
    line-height: 1.6;
}