/* ==========================================================================
   CU Alumni – Global Styles (merged & cleaned)
   Single source of truth for site CSS
   ========================================================================== */

/* 0) Fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "FC ICONIC REGULAR";
  src: url("fonts/FC_ICONIC_REGULAR.woff2") format("woff2"),
       url("fonts/FC_ICONIC_REGULAR.woff")  format("woff"),
       url("fonts/FC_ICONIC_REGULAR.ttf")   format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 1) Root palette, base, helpers
   -------------------------------------------------------------------------- */
:root{
  --primary: #f38830;           /* Orange theme */
  --primary-600:#e6781f;
  --secondary:#001d3d;          /* Navy */
  --light:#f8f9fa;
  --dark:#1f2937;               /* Slate-800 */
  --muted:#6c757d;
  --border:#e5e7eb;
  --radius: .75rem;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
}

html{scroll-behavior:smooth}
body{
  font-family: "Inter", "FC ICONIC REGULAR", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", "Sarabun", sans-serif;
  color: var(--dark);
  background:#fff;
  line-height:1.6;
}

a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-600);text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* Utilities */
.shadow-sm{box-shadow:var(--shadow-sm)!important}
.shadow-md{box-shadow:var(--shadow-md)!important}
.rounded-2xl{border-radius:1rem!important}

/* 2) Navbar
   -------------------------------------------------------------------------- */
.navbar-light .navbar-nav .nav-link{
  color:#111827;
  font-weight:600;
  letter-spacing:.2px;
  padding: .75rem 1rem;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus{
  color:var(--primary);
}
.navbar-light .navbar-brand img{height:54px; width:auto}

/* 3) Header / Carousel
   -------------------------------------------------------------------------- */
.wrapheader{margin-top:1.5rem;margin-bottom:1.5rem}
.carousel{border-radius: var(--radius); overflow:hidden; box-shadow:var(--shadow-md)}
.carousel .carousel-indicators [data-bs-target]{
  width:10px;height:10px;border-radius:50%;
}
.carousel .carousel-caption{
  background: rgba(0,0,0,.45);
  border-radius:.5rem;
  padding:.5rem .75rem;
}

/* 4) News (sidebar list) + News cards (กิจกรรม)
   -------------------------------------------------------------------------- */
.news-section{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:1rem;
  box-shadow: var(--shadow-sm);
}
.news-section h4{margin:0 0 .25rem}
.news-section .content{display:block}

.news-item{display:flex;gap:.75rem;align-items:flex-start}
.news-img{
  width:96px;height:64px;object-fit:cover;border-radius:.5rem;border:1px solid var(--border)
}
.news-text h6{margin:0 0 .25rem;font-weight:700}
.news-text p{margin:0;color:#374151}

/* Cards: ข่าวกิจกรรม (3 คอลัมน์) */
.news-item1{
  background:#fff;border:1px solid var(--border);
  border-radius: var(--radius); box-shadow:var(--shadow-sm);
  height:100%;
}
.news-img-container{border-radius:.5rem;overflow:hidden}
.news-img1{width:100%;height:200px;object-fit:cover;border-radius:.5rem}

/* 5) Media section (โปสเตอร์ + วิดีโอ) – เท่ากัน 16:9
   -------------------------------------------------------------------------- */
.equal-media .ratio{border-radius: var(--radius); box-shadow: var(--shadow-sm)}
.equal-media .cover-img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;display:block
}

/* 6) Sponsors / Team
   -------------------------------------------------------------------------- */
.team-item{
  background:#fff;border:1px solid var(--border);
  border-radius: var(--radius); text-align:center;
  box-shadow: var(--shadow-sm);
  height:100%;
}
.sponsor-logo{max-height:90px;object-fit:contain;margin:0 auto}

/* 7) Footer
   -------------------------------------------------------------------------- */
footer, .site-footer{
  background:#0b1220;color:#e5e7eb;
}
.site-footer a{color:#cbd5e1}
.site-footer a:hover{color:#fff}

/* 8) Back to top
   -------------------------------------------------------------------------- */
.back-to-top{
  position:fixed;right:1rem;bottom:1.25rem;z-index:1030;
  box-shadow:var(--shadow-sm)
}

/* 9) Buttons & theme helpers
   -------------------------------------------------------------------------- */
.btn-primary{
  background:var(--primary);border-color:var(--primary)
}
.btn-primary:hover{
  background:var(--primary-600);border-color:var(--primary-600)
}
.btn-outline-primary{
  color:var(--primary);border-color:var(--primary)
}
.btn-outline-primary:hover{
  color:#fff;background:var(--primary);border-color:var(--primary)
}

/* 10) Spacing helpers
   -------------------------------------------------------------------------- */
.section{padding:3rem 0}
.section-sm{padding:1.5rem 0}

/* 11) OwlCarousel (ถ้าใช้)
   -------------------------------------------------------------------------- */
.owl-carousel .owl-item img{width:100%;height:auto}
.owl-dots .owl-dot span{background:#ddd}
.owl-dots .owl-dot.active span{background:var(--primary)}

/* 12) Forms / Inputs
   -------------------------------------------------------------------------- */
.form-control:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(243,136,48,.15)
}

/* 13) Tables
   -------------------------------------------------------------------------- */
.table thead th{
  background:#f8fafc;color:#111827;
  border-bottom:1px solid var(--border)
}
.table td, .table th{vertical-align:middle}

/* 14) Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px){
  .navbar-light .navbar-brand img{height:48px}
}
@media (max-width: 767.98px){
  .wrapheader{margin-top:.75rem;margin-bottom:.75rem}
  .news-img{width:84px;height:56px}
  .news-img1{height:180px}
  .equal-media .ratio{border-radius:.5rem}
}
@media (max-width: 575.98px){
  .news-img{width:80px;height:52px}
  .news-img1{height:160px}
}

/* 15) Optional: Thai typography tweaks
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-family: "Inter", "FC ICONIC REGULAR", "Sarabun", "Noto Sans Thai", system-ui, sans-serif;
  letter-spacing:.2px
}
/* === Global font: ใช้ Sarabun เป็นหลักให้ทั้งหน้า (ไทยสวย อ่านง่าย) === */
body, .navbar, .dropdown-menu, .btn, .card, .news-section, .team-item,
h1,h2,h3,h4,h5,h6 {
  font-family: "Sarabun", "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", sans-serif !important;
}

/* === รูปให้ครอปกึ่งกลางทุกจุด === */
.fit-cover { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* === การ์ดข่าวกิจกรรม ให้สูงเท่ากันเสมอ และปุ่มอยู่ล่าง === */
.news-card .card-title { font-weight:700; }
.news-card .card-body { display:flex; flex-direction:column; }

/* ตัดบรรทัดแบบสุภาพ (รองรับ Chromium/WebKit) */
.line-clamp-2, .line-clamp-3 {
  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* ปรับ margin ส่วนหัวข่าวประชาสัมพันธ์ */
.news-section h4 { font-weight:700; }

/* ปุ่ม back-to-top ให้ลอยสวยขึ้นบนมือถือ */
@media (max-width: 575.98px){
  .back-to-top{ right:.75rem; bottom:1rem; }
}