/* ═══════════════════════════════════════════════════════════════
   หน้ารางวัลและเกียรติยศ (pages/trophies.php) — class ขึ้นต้น .tr-
   ธีม: ถ้วยพระราชทาน = ม่วงหลวง #4C1D95 + ไล่สีทอง #D97706 → #FBBF24
        รางวัลทั่วไป   = พาสเทล ฟ้า #E0F2FE + ชมพู #FCE7F3
   ═══════════════════════════════════════════════════════════════ */
.tr-royal, .tr-general { border-radius: 24px; padding: 2rem; }
.t2-ip-main > .tr-royal + .tr-general { margin-top: 2rem; }

/* ── ส่วนที่ 1 : ถ้วยพระราชทาน ── */
.tr-royal {
  position: relative; overflow: hidden; color: #f5f3ff;
  background:
    radial-gradient(circle at 12% 0%, rgba(251, 191, 36, .22), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(217, 119, 6, .22), transparent 45%),
    linear-gradient(160deg, #4c1d95 0%, #3b1578 100%);
  box-shadow: 0 18px 40px rgba(76, 29, 149, .35), inset 0 0 0 1px rgba(251, 191, 36, .35);
}
.tr-royal::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, #d97706, #fbbf24, #d97706);
}
.tr-royal-head { text-align: center; margin-bottom: 1.5rem; }
.tr-royal-crown {
  display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: linear-gradient(135deg, #d97706, #fbbf24); color: #4c1d95; font-size: 1.5rem;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, .25), 0 0 28px rgba(251, 191, 36, .55);
}
.tr-royal-head h2 {
  margin: .75rem 0 .35rem; font: 700 clamp(1.4rem, 3vw, 1.9rem)/1.3 'Prompt', 'Sarabun', sans-serif;
  background: linear-gradient(90deg, #fbbf24, #fde68a, #fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tr-royal-head p, .tr-general-head p { margin: 0; opacity: .9; }

.tr-cat { margin: 1.5rem 0 1rem; font: 600 1.15rem/1.4 'Prompt', 'Sarabun', sans-serif; display: flex; align-items: center; gap: .6rem; color: #0f172a; }
.tr-cat i { color: #0284c7; }
.tr-cat--royal { color: #fde68a; }
.tr-cat--royal i { color: #fbbf24; }

.tr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

.tr-card { border-radius: 18px; overflow: hidden; display: flex; transition: transform .2s ease, box-shadow .2s ease; }
.tr-card:hover { transform: translateY(-4px); }
.tr-card h4 { margin: 0 0 .35rem; font: 600 1.05rem/1.45 'Prompt', 'Sarabun', sans-serif; }
.tr-event { margin: 0 0 .6rem; font-size: .92rem; }

.tr-card--royal { flex-direction: column; background: #fff; color: #1e293b; border: 2px solid #fbbf24; box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.tr-card--royal:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, .38), 0 0 0 3px rgba(251, 191, 36, .35); }
.tr-card-media { position: relative; width: 100%; height: 230px; overflow: hidden; background: linear-gradient(135deg, #ede9fe, #fef3c7); }
/* ภาพปก: กรอบสูงคงที่ ครอปจากด้านบน (เน้นใบหน้า/ถ้วย) — ดู DESIGN.md §3.4 */
.tr-card-media img, .trophy-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; border-top-left-radius: 16px; border-top-right-radius: 16px; }
.tr-card-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.5rem; color: #d97706; }
.tr-badge {
  position: absolute; left: .75rem; top: .75rem; padding: .3rem .7rem; border-radius: 999px;
  background: linear-gradient(135deg, #d97706, #fbbf24); color: #3b1578; font: 700 .78rem/1.3 'Prompt', 'Sarabun', sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.tr-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.tr-card--royal .tr-event { color: #475569; }
.tr-meta { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .86rem; color: #475569; }
.tr-meta i { color: #d97706; margin-right: .25rem; }

.tr-btn {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 0; border-radius: 999px; padding: .55rem 1.2rem; font: 600 .92rem/1.2 'Prompt', 'Sarabun', sans-serif; color: #fff;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.tr-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.tr-btn:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.tr-btn--royal { background: linear-gradient(135deg, #7c3aed, #6d28d9); box-shadow: 0 6px 16px rgba(124, 58, 237, .45); }
.tr-btn--general { background: linear-gradient(135deg, #38bdf8, #ec4899); box-shadow: 0 6px 16px rgba(56, 189, 248, .4); color: #fff; }

/* ── ส่วนที่ 2 : รางวัลทั่วไป ── */
.tr-general {
  background: linear-gradient(135deg, #e0f2fe 0%, #f5f0fb 55%, #fce7f3 100%);
  border: 1px solid #fbcfe8; box-shadow: 0 8px 24px rgba(14, 165, 233, .12);
}
.tr-general-head { text-align: center; margin-bottom: 1rem; color: #334155; }
.tr-general-head h2 { margin: 0 0 .35rem; font: 700 clamp(1.35rem, 3vw, 1.8rem)/1.3 'Prompt', 'Sarabun', sans-serif; color: #0c4a6e; }
.tr-general-head h2 i { color: #ec4899; margin-right: .35rem; }
.tr-card--general { background: rgba(255, 255, 255, .85); border: 1px solid #fbcfe8; gap: 1rem; padding: 1.1rem; align-items: flex-start; box-shadow: 0 4px 14px rgba(236, 72, 153, .1); color: #334155; }
.tr-card--general:hover { box-shadow: 0 10px 24px rgba(56, 189, 248, .25); }
.tr-card--general .tr-card-body { padding: 0; }
.tr-gicon { flex: 0 0 3.25rem; width: 3.25rem; height: 3.25rem; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; color: #0369a1; background: linear-gradient(135deg, #bae6fd, #fbcfe8); }
.tr-level { display: inline-block; margin-bottom: .45rem; padding: .15rem .7rem; border-radius: 999px; background: #fce7f3; color: #9d174d; font: 600 .78rem/1.5 'Prompt', 'Sarabun', sans-serif; border: 1px solid #f9a8d4; }
.tr-date { margin: 0 0 .8rem; font-size: .86rem; color: #64748b; }
.tr-date i { color: #0ea5e9; margin-right: .25rem; }

.tr-empty { text-align: center; padding: 1.25rem; border-radius: 14px; background: rgba(255, 255, 255, .7); color: #64748b; margin: 0; }
.tr-empty--royal { background: rgba(255, 255, 255, .1); color: #ddd6fe; }

/* ── Modal ── */
.tr-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.tr-modal[hidden] { display: none; }
.tr-modal-backdrop { position: absolute; inset: 0; background: rgba(30, 10, 70, .62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.tr-modal-dialog {
  position: relative; width: min(760px, 100%); max-height: calc(100vh - 2rem); border-radius: 22px; background: #fff; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .25s ease, transform .25s ease;
  display: flex; flex-direction: column; outline: none;
}
.tr-modal.is-open .tr-modal-backdrop { opacity: 1; }
.tr-modal.is-open .tr-modal-dialog { opacity: 1; transform: none; }
.tr-modal-scroll { overflow-y: auto; overscroll-behavior: contain; }
.tr-modal-close {
  position: absolute; right: .75rem; top: .75rem; z-index: 2; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #3b1578; font-size: 1.1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.tr-modal-close:hover { background: #fff; }
.tr-modal-close:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
.tr-modal-hero { aspect-ratio: 16 / 7; background: linear-gradient(135deg, #bae6fd, #fbcfe8); display: grid; place-items: center; font-size: 4rem; color: #0369a1; overflow: hidden; }
.tr-modal--royal .tr-modal-hero { background: linear-gradient(135deg, #4c1d95, #7c3aed); color: #fbbf24; }
.tr-modal-hero img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tr-modal-hero:empty { display: none; }
.tr-modal-content { padding: 1.5rem 1.6rem 1.8rem; color: #1e293b; }
.tr-modal-tag { display: inline-block; margin-bottom: .6rem; padding: .25rem .8rem; border-radius: 999px; font: 700 .8rem/1.4 'Prompt', 'Sarabun', sans-serif; background: #fce7f3; color: #9d174d; }
.tr-modal--royal .tr-modal-tag { background: linear-gradient(135deg, #d97706, #fbbf24); color: #3b1578; }
.tr-modal-content h2 { margin: 0 0 .3rem; font: 700 1.4rem/1.4 'Prompt', 'Sarabun', sans-serif; color: #0f172a; padding-right: 2.5rem; }
.tr-modal--royal .tr-modal-content h2 { color: #4c1d95; }
.tr-modal-event { margin: 0 0 .8rem; color: #475569; }
.tr-meta--modal { margin-bottom: 1.1rem; }
.tr-modal-sec { margin-top: 1.2rem; }
.tr-modal-sec h3 { margin: 0 0 .5rem; font: 600 1rem/1.4 'Prompt', 'Sarabun', sans-serif; color: #4c1d95; display: flex; align-items: center; gap: .5rem; }
.tr-modal-sec h3 i { color: #d97706; }
.tr-modal-sec p { margin: 0; white-space: pre-line; line-height: 1.8; }
.tr-people { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.tr-people li { padding: .3rem .85rem; border-radius: 999px; background: #ede9fe; color: #4c1d95; font-size: .92rem; }
.tr-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.tr-gal a { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #f1f5f9; }
.tr-gal img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .25s ease; }
.tr-gal a:hover img { transform: scale(1.06); }
body.tr-modal-open { overflow: hidden; }

@media (max-width: 767.98px) {
  .tr-card-media { height: 220px; }
  .tr-royal, .tr-general { padding: 1.25rem; border-radius: 20px; }
  .tr-grid { grid-template-columns: 1fr; }
  .tr-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-modal-content { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-card, .tr-btn, .tr-gal img, .tr-modal-backdrop, .tr-modal-dialog { transition: none; }
  .tr-card:hover, .tr-btn:hover, .tr-gal a:hover img { transform: none; }
}

/* ── แถบตัวกรองหมวดหมู่ (?cat_id=) ── */
.tr-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: .9rem 1.2rem; border-radius: 16px; background: #f3e8ff; border: 1px solid #d8b4fe; color: #4c1d95; }
.tr-filter p { margin: 0; }
.tr-filter span { color: #6b21a8; font-size: .9rem; }
.tr-filter--warn { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.tr-filter-reset { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1rem; border-radius: 999px; background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; font: 600 .9rem/1.2 'Prompt', 'Sarabun', sans-serif; text-decoration: none; box-shadow: 0 4px 12px rgba(124, 58, 237, .35); transition: transform .18s ease; }
.tr-filter-reset:hover { color: #fff; transform: translateY(-2px); }
.tr-filter-reset:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.t2-ip-main > .tr-filter + .tr-royal, .t2-ip-main > .tr-filter + .tr-general { margin-top: 1.25rem; }

/* การ์ดรางวัลทั่วไปที่มีภาพปก: กรอบภาพ 230px ด้านบน (DESIGN.md §3.4) */
.tr-card--general.tr-card--has-media { flex-direction: column; padding: 0; gap: 0; align-items: stretch; }
.tr-card--has-media .tr-card-body { padding: 1rem 1.1rem 1.2rem; }
@media (prefers-reduced-motion: reduce) { .tr-filter-reset { transition: none; } .tr-filter-reset:hover { transform: none; } }