/* ==========================================================================
   Design System & Variable Declarations
   ========================================================================== */
:root {
  /* Colors - Light Mode (Harmonious Indigo & Amber/Gold) */
  --bg-primary: #faf6f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f5edeb;
  
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  
  --primary: #800000; /* Maroon / Dark Red */
  --primary-hover: #991b1b;
  --primary-rgb: 128, 0, 0;
  
  --accent: #f59e0b; /* Amber Gold */
  --accent-hover: #d97706;
  
  --border-color: #e2e8f0;
  --card-shadow: 0 4px 20px -2px rgba(148, 163, 184, 0.12), 0 2px 8px -1px rgba(148, 163, 184, 0.08);
  --hover-shadow: 0 20px 25px -5px rgba(148, 163, 184, 0.2), 0 10px 10px -5px rgba(148, 163, 184, 0.1);
  
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(226, 232, 240, 0.8);
  --glass-blur: 12px;
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
  
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
  
  /* Fonts */
  /* Noto Sans Thai keeps the loop ("หัว") on Thai letterforms that Prompt's
     geometric/loopless design shaves off — much easier to read at small
     sizes (tables, form labels) where lookalike letters get hard to tell apart. */
  --font-family: 'Noto Sans Thai', 'Prompt', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark Mode Variables */
.dark-mode {
  --bg-primary: #150e0e;
  --bg-secondary: #221616;
  --bg-tertiary: #1b1111;
  
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  
  --primary: #f87171; /* Rose / Light Red */
  --primary-hover: #ef4444;
  --primary-rgb: 248, 113, 113;
  
  --accent: #fbbf24;
  --accent-hover: #f59e0b;
  
  --border-color: #334155;
  --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --hover-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7);
  
  --glass-bg: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(51, 65, 85, 0.7);
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 17.5px;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: var(--transition-smooth);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  /* !important so our boxed width wins over Tailwind CDN's own .container utility
     (which otherwise stretches every section nearly full-width on large screens) */
  max-width: 1152px !important;
  margin: 0 auto;
  padding: 0 24px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
}

.text-center { text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-smooth);
  font-size: 0.95rem;
  gap: 8px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1.05rem;
  border-radius: var(--radius-md);
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background-color: var(--primary);
  color: #ffffff;
}
.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(var(--primary-rgb), 0.5);
}

.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn-secondary:hover {
  background-color: var(--border-color);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline:hover {
  background-color: var(--primary);
  color: #ffffff;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  transition: var(--transition-smooth);
  height: 80px;
  display: flex;
  align-items: center;
}

/* Pages whose first element is .page-header (no .marquee-container in front of
   it — portal-teacher/student/report, personnel, login, news-all, portal*) never
   got the fixed header's 80px cleared: .page-header's own solid background painted
   all the way up to y:0, sitting directly behind the header's translucent glass
   effect and bleeding a colored tint through it, while its title text rendered
   partially/fully hidden underneath. .marquee-container already solves this for
   pages that have one (see below); this covers everyone else. */
main > .page-header:first-child {
  margin-top: 80px; /* offset fixed header */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px !important;
  padding-left: 8px;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: white;
  font-weight: 800;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3);
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.logo-subtitle {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary);
  background-color: rgba(var(--primary-rgb), 0.08);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--bg-secondary);
  min-width: 240px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  z-index: 2000;
  padding: 8px 0;
  overflow: hidden;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  color: var(--text-primary);
  padding: 10px 20px;
  text-decoration: none;
  display: block;
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.dropdown-content a:hover {
  background-color: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  padding-left: 24px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-tertiary);
  width: 40px;
  height: 40px;
  transition: var(--transition-fast);
}

.theme-toggle-btn:hover {
  background-color: var(--border-color);
  color: var(--primary);
}

.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
}

/* Hide moon/sun icon depending on mode */
.light-mode .moon-icon { display: block; }
.light-mode .sun-icon { display: none; }
.dark-mode .moon-icon { display: none; }
.dark-mode .sun-icon { display: block; }

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.mobile-menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--text-primary);
  border-radius: 9px;
  transition: var(--transition-fast);
}

/* ==========================================================================
   Hero Section (Main Banner)
   ========================================================================== */
.hero-section {
  position: relative;
  padding-top: 140px;
  padding-bottom: 80px;
  background: radial-gradient(circle at 10% 20%, rgba(var(--primary-rgb), 0.05) 0%, transparent 40%);
  overflow: hidden;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.badge {
  background-color: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 24px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.hero-title {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-title .highlight {
  background: linear-gradient(120deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin-bottom: 36px;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  gap: 16px;
}

.hero-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
  background-color: var(--bg-tertiary);
  /* Prevents cumulative layout shift */
  content-visibility: auto;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.hero-image-wrapper:hover .hero-img {
  transform: scale(1.03);
}

/* ==========================================================================
   Quick Links
   ========================================================================== */
.quick-links {
  margin-top: -40px;
  position: relative;
  z-index: 10;
  padding-bottom: 60px;
}

.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.quick-link-card {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(var(--glass-blur));
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.quick-link-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--hover-shadow);
  border-color: var(--primary);
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  width: 54px;
  height: 54px;
  background-color: rgba(var(--primary-rgb), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.quick-link-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.quick-link-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   Sections Standard Styles
   ========================================================================== */
section {
  padding: 80px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}

.section-title {
  font-size: 2.2rem;
  color: var(--text-primary);
  margin-bottom: 12px;
  position: relative;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* ==========================================================================
   News & Announcements Section
   ========================================================================== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.news-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hover-shadow);
  border-color: rgba(var(--primary-rgb), 0.3);
}

.news-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: var(--bg-tertiary);
}

.news-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-img {
  transform: scale(1.05);
}

.news-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(var(--glass-blur));
}

.news-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.news-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.news-card-title {
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.news-card-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

.news-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.read-more {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.read-more:hover {
  color: var(--primary-hover);
}

/* Gradient presets for news background if no image */
.gradient-bg-1 {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}
.gradient-bg-2 {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

/* ==========================================================================
   Gallery Section
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gallery-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color);
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0) 80%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
  opacity: 0;
  transition: var(--transition-smooth);
}

.gallery-overlay h4 {
  color: white;
  font-size: 1.1rem;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.05);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.main-footer {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 60px 0 20px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  gap: 60px;
  margin-bottom: 40px;
}

.footer-info p {
  color: var(--text-secondary);
  margin-top: 16px;
  font-size: 0.95rem;
}

.footer-links h3, .footer-contact h3 {
  font-size: 1.15rem;
  margin-bottom: 20px;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--text-secondary);
}

.footer-links a:hover {
  color: var(--primary);
  padding-left: 4px;
}

.footer-contact p {
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.footer-bottom {
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Admin Drawer / Panel Layout (Slide-in)
   ========================================================================== */
.admin-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
  max-width: 90vw;
  background-color: var(--bg-secondary);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.admin-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawer-header h3 {
  font-size: 1.25rem;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
}

.close-btn:hover {
  color: var(--primary);
}

.drawer-body {
  padding: 24px;
  overflow-y: auto;
  flex-grow: 1;
}

.drawer-desc {
  background-color: rgba(var(--primary-rgb), 0.06);
  border-left: 4px solid var(--primary);
  padding: 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem;
  margin-bottom: 24px;
  color: var(--text-secondary);
}

.admin-form .form-group {
  margin-bottom: 20px;
}

.admin-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.admin-form input[type="text"],
.admin-form select,
.admin-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.admin-form input[type="text"]:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.admin-current-posts {
  margin-top: 36px;
  border-top: 1px solid var(--border-color);
  padding-top: 24px;
}

.admin-current-posts h4 {
  margin-bottom: 16px;
}

.admin-post-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  gap: 12px;
}

.admin-post-item h5 {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.delete-btn {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 4px 8px;
  border-radius: 4px;
  transition: var(--transition-fast);
}

.delete-btn:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   Responsive Adaptations (Mobile First focus)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-content {
    align-items: center;
    text-align: center;
  }
  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions {
    justify-content: center;
  }
  .quick-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .main-header {
    height: 70px;
  }
  .logo-icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .logo-title {
    font-size: 0.95rem;
  }
  .logo-subtitle {
    font-size: 0.65rem;
  }
  .hero-title {
    font-size: 2.2rem;
  }
  .quick-links {
    margin-top: 0;
    padding-top: 40px;
  }
  .quick-links-grid {
    grid-template-columns: 1fr;
  }
  .news-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  /* Mobile Menu Toggle */
  .mobile-menu-toggle {
    display: flex;
  }
  
  .nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    transform: translateY(-120%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  }
  
  .nav-menu.open {
    transform: translateY(0);
  }
  
  .mobile-menu-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .mobile-menu-toggle.open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}

/* ==========================================================================
   Homepage Layout Additions (Marquee, Banner, 2-Col)
   ========================================================================== */

/* Marquee */
.marquee-container {
  margin-top: 80px; /* offset fixed header */
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.marquee-inner {
  display: flex;
  align-items: center;
  gap: 15px;
}
.marquee-badge {
  background: #dc2626;
  color: white;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.marquee-inner marquee {
  font-weight: 500;
  color: var(--text-primary);
}

/* Banner Section */
.home-banner-section {
  padding: 30px 0;
}
.banner-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 30px;
}
@media (max-width: 992px) {
  .banner-grid {
    grid-template-columns: 1fr;
  }
}

.news-slider {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  height: 400px;
  background: var(--bg-tertiary);
}
.slider-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.slider-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px 20px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
}

.slider-announcements {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 20px;
  box-shadow: var(--card-shadow);
}
.announcement-title {
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 15px;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 5px;
  display: inline-block;
}
.announcement-list {
  list-style: none;
}
.announcement-list li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-color);
  display: flex;
  gap: 10px;
}
.announcement-list li:last-child {
  border-bottom: none;
}
.announcement-list .date {
  color: var(--text-muted);
  font-size: 0.85rem;
  min-width: 100px;
}
.announcement-list a {
  color: var(--text-primary);
  font-weight: 500;
}
.announcement-list a:hover {
  color: var(--primary);
}

/* Right Sidebar */
.director-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
}
.card-header {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--text-primary);
}
.card-header.red-header {
  background: #b91c1c;
  color: white;
  padding: 10px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin: -20px -20px 15px;
}
.director-img-wrapper {
  width: 150px;
  height: 150px;
  margin: 0 auto 15px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--bg-tertiary);
}
.director-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.director-name {
  font-size: 1.1rem;
  color: var(--primary);
}
.director-role {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.internal-units-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--card-shadow);
}
.internal-links {
  list-style: none;
}
.internal-links li {
  margin-bottom: 10px;
}
.internal-links a {
  display: block;
  padding: 10px 15px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.internal-links a:hover {
  background: var(--primary);
  color: white;
  transform: translateX(5px);
}

/* 4 Categories News Section */
.news-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 40px 0;
}
@media (max-width: 768px) {
  .news-cat-grid {
    grid-template-columns: 1fr;
  }
}
.news-cat-block {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cat-header {
  padding: 15px 20px;
  color: white;
  font-weight: 700;
  font-size: 1.2rem;
}
.theme-red .cat-header { background: #b91c1c; }
.theme-blue .cat-header { background: #1d4ed8; }
.theme-orange .cat-header { background: #d97706; }
.theme-green .cat-header { background: #15803d; }

.cat-content {
  padding: 20px;
  flex: 1;
}
.cat-footer {
  padding: 15px;
  text-align: center;
  background: var(--bg-tertiary);
  font-weight: 600;
}
.theme-red .cat-footer a { color: #b91c1c; }
.theme-blue .cat-footer a { color: #1d4ed8; }
.theme-orange .cat-footer a { color: #d97706; }
.theme-green .cat-footer a { color: #15803d; }
.cat-footer a:hover { text-decoration: underline; }

.news-item-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}
.news-item-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.news-thumb {
  width: 100px;
  height: 70px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-tertiary);
}
.news-details {
  flex: 1;
}
.news-details h4 {
  font-size: 0.95rem;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-primary);
}
.news-details h4:hover {
  color: var(--primary);
}

/* Footer Layout 3 Col */
.footer-layout-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}
@media (max-width: 992px) {
  .footer-layout-3col {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   UI Polish (Skeleton, Slider Controls, Micro-Animations)
   ========================================================================== */

/* Skeleton Loading Animation */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 800px 100%; 
  animation-duration: 1.5s;
  animation-fill-mode: forwards; 
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  border-radius: var(--radius-sm);
}
.dark-mode .skeleton {
  background: #1e293b;
  background-image: linear-gradient(to right, #1e293b 0%, #334155 20%, #1e293b 40%, #1e293b 100%);
}

.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  width: 100%;
}
.skeleton-text:last-child {
  width: 80%;
}
.skeleton-thumb {
  width: 100px;
  height: 70px;
}

/* Slider Controls */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  opacity: 0;
}
.news-slider:hover .slider-btn {
  opacity: 1;
}
.slider-btn:hover {
  background: var(--primary);
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

.slider-dots {
  position: absolute;
  bottom: 80px; /* Above caption */
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.dot {
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}
.dot.active {
  background: white;
  transform: scale(1.2);
}

/* Hover Micro-Animations */
.news-item-row {
  transition: all 0.3s ease;
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-left: -10px;
  margin-right: -10px;
}
.news-item-row:hover {
  background: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.news-item-row .news-thumb {
  transition: transform 0.3s ease;
}
.news-item-row:hover .news-thumb {
  transform: scale(1.05);
}

#loadMoreNewsBtn:hover {
  background: var(--primary) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

/* Fallback Logo Overlay */
.fallback-logo {
  font-size: 2rem;
  opacity: 0.5;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* ==========================================================================
   Modern Minimalist Design
   ========================================================================== */

.modern-hero-section {
  position: relative;
  width: 100%;
  min-height: 44vh;
  padding-top: 115px; /* Accounts for floating main menu header */
  padding-bottom: 40px;
  display: flex;
  align-items: flex-end; /* anchor content to the bottom band */
  justify-content: center;
  overflow: hidden;
  margin-top: 0;
}

/* Desktop: shorter hero (~20% less height than the mobile/base 44vh) */
@media (min-width: 869px) {
  .modern-hero-section {
    min-height: 35vh;
    padding-top: 95px;
    padding-bottom: 32px;
  }
}

.hero-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.8s ease-in-out;
}

/* Second image layer for crossfade */
.hero-bg-img.hero-bg-img-next {
  opacity: 0;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Text band sits at the bottom — image stays clear up top (news-card style) */
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 28%, rgba(0,0,0,0.15) 58%, rgba(0,0,0,0) 100%);
}

.modern-hero-section .hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* push slide info + quick links toward the bottom */
  text-align: center;
  color: white;
  padding: 0 20px;
  width: 100%;
}

.hero-bg-blur {
  filter: blur(8px) brightness(0.55);
  transform: scale(1.05);
}

.hero-slide-info {
  /* Single-image hero: text sits on the darkened left side (gradient overlay does the work) */
  background: transparent;
  border: none;
  padding: 30px 36px 50px 0; /* Extra bottom padding for dots */
  border-radius: 0;
  max-width: 620px;
  width: 100%;
  margin: 0 auto 30px 0; /* push panel to the left */
  align-self: flex-start;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.3s ease;
}

.hero-slide-info .hero-title,
.hero-slide-info .hero-subtitle {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.slide-text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.slide-image-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-slider-illustration-wrap {
  width: 100%;
  max-width: 380px;
  height: 230px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  transition: transform 0.3s ease;
}

.hero-slider-illustration-wrap:hover {
  transform: scale(1.02);
}

@media (max-width: 868px) {
  /* On mobile darken from the bottom so text stays readable over the image */
  .hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.82) 100%);
  }
  .hero-slide-info {
    flex-direction: column;
    align-items: center;
    align-self: center;
    padding: 25px 20px 45px 20px; /* Extra bottom padding on mobile for dots */
    gap: 14px;
    max-width: calc(100% - 10px);
    margin: 0 auto 20px auto;
  }
  .slide-text-content {
    align-items: center;
    text-align: center;
  }
  .hero-quick-links {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .hero-quick-links .quick-link-card {
    width: 100%;
    justify-content: center;
  }
}

.slide-badge {
  background-color: var(--accent);
  color: #0f172a;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 16px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-title {
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  font-weight: 700;
  margin-bottom: 10px;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  line-height: 1.3;
  /* Clamp to 2 lines so a long news headline never buries the image */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-subtitle {
  font-size: clamp(0.85rem, 1.7vw, 1.05rem);
  font-weight: 400;
  color: #f1f5f9 !important;
  margin-bottom: 18px;
  text-shadow: 0 1px 5px rgba(0,0,0,0.4);
  line-height: 1.55;
  /* Clamp to 2 lines for a clean, readable caption band */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-slider-cta {
  background-color: var(--primary) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 10px 28px !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: var(--transition-smooth) !important;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-slider-cta:hover {
  background-color: var(--primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.5) !important;
}

.hero-quick-links {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.quick-link-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 15px 30px;
  border-radius: 30px;
  color: white;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.quick-link-card:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.modern-hero-section .slider-btn {
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.3);
  z-index: 2;
}

.modern-hero-section .slider-dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}

/* Modern About Section */
.modern-about-section {
  padding: 60px 0;
  background: var(--bg-tertiary);
}

.director-modern-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}

.director-img-wrapper-modern {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid white;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.director-img-wrapper-modern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.director-info-modern {
  text-align: left;
}

.director-info-modern .quote {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 15px;
  font-style: italic;
}

.director-info-modern .director-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  .director-modern-card {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .director-info-modern {
    text-align: center;
  }
}

/* Modern News Grid */
.modern-news-section {
  padding: 60px 0;
  background: var(--bg-primary);
}

.section-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 10px;
}

.section-header-modern h2 {
  font-size: 2rem;
  color: var(--text-primary);
  font-weight: 600;
  margin: 0;
}

.view-all-link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.view-all-link:hover {
  text-decoration: underline;
}

.news-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Modern News Card */
.modern-news-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.modern-news-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hover-shadow);
  border-color: var(--primary);
}

.modern-news-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.modern-news-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.modern-news-card:hover .modern-news-img-wrap img {
  transform: scale(1.05);
}

.modern-news-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Dynamic Tag Colors */
.tag-pr { background: #ef4444; }
.tag-gov { background: #3b82f6; }
.tag-people { background: #f59e0b; }
.tag-procure { background: #10b981; }
.tag-default { background: var(--primary); }

.modern-news-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.modern-news-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.modern-news-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 10px;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modern-news-title:hover {
  color: var(--primary);
}

.modern-news-excerpt {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modern-news-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
}

.read-more-modern {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.read-more-modern:hover {
  gap: 8px;
}

/* Webboard List Layout */
.news-list-webboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Webboard Row styling */
.webboard-row.modern-news-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  height: auto; /* override 100% height from grid */
}

.webboard-row.modern-news-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Category icon chip (mobile: a small colored square instead of the text badge) */
.webboard-icon {
  display: none;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  align-items: center;
  justify-content: center;
}

/* Inline relative time (mobile only — desktop keeps the absolute date column) */
.webboard-time-inline {
  display: none;
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-basis: 100%;
}

/* Title column: badge(s) + category tag + title, all on one line */
.webboard-title-col {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* This row never shows the excerpt — only .modern-news-card's image-grid variant does.
   Overrides Tailwind's "hidden" utility, which loses the cascade tie against our own rules. */
.webboard-title-col .modern-news-excerpt {
  display: none !important;
}

.webboard-title-col .modern-news-title {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.webboard-category-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* Date column, right-aligned, never wraps */
.webboard-date-col {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  padding-left: 16px;
}

/* Thumbnail wrapper */
.webboard-thumbnail-wrap.modern-news-img-wrap {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}

.webboard-thumbnail-wrap.modern-news-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.webboard-row:hover .webboard-thumbnail-wrap img {
  transform: scale(1.08);
}

/* Content block */
.webboard-content-wrap {
  flex: 1;
  min-width: 0; /* allows text truncation */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.webboard-header-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Tags and dates */
.webboard-category-tag.modern-news-tag {
  position: static; /* override absolute positioning */
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  z-index: auto;
  box-shadow: none;
}

.webboard-date-text.modern-news-date {
  margin-bottom: 0; /* override card margins */
  font-size: 0.75rem;
  color: var(--text-muted);
}

.webboard-pinned-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #e11d48; /* rose-600 */
}

/* Title and Excerpt */
.webboard-title.modern-news-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 4px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.webboard-title.modern-news-title:hover {
  color: var(--primary);
}

.webboard-excerpt-text.modern-news-excerpt {
  font-size: 0.825rem;
  color: var(--text-secondary);
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Read more column */
.webboard-action-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.webboard-read-more.read-more-modern {
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-tertiary);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.webboard-row:hover .webboard-read-more.read-more-modern {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .news-list-webboard {
    gap: 0;
  }

  /* Flat list with a divider between rows instead of individual boxed cards —
     easier to scan on a phone (matches a plain news-feed layout). */
  .webboard-row.modern-news-card {
    gap: 10px;
    padding: 14px 4px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: none;
    align-items: flex-start;
  }
  .webboard-row.modern-news-card:hover {
    transform: none;
    border-color: var(--border-color);
    box-shadow: none;
  }

  .webboard-icon {
    display: flex;
  }

  /* Hide the small text badge on mobile — the icon chip already conveys the category */
  .webboard-title-col .webboard-category-badge {
    display: none;
  }

  .webboard-title-col {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 4px;
  }

  .webboard-title-col .modern-news-title {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.45;
  }

  .webboard-time-inline {
    display: block;
  }

  /* Absolute date now lives inline under the title instead of a separate right column */
  .webboard-date-col {
    display: none;
  }

  .webboard-thumbnail-wrap.modern-news-img-wrap {
    width: 55px;
    height: 55px;
    border-radius: 8px;
  }
  .webboard-action-wrap {
    display: none; /* Hide read more button on mobile, click title instead */
  }
}

/* Post Modal */
.post-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.post-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.post-modal {
  background: var(--bg-secondary);
  width: 90%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  overflow: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
}
.post-modal-overlay.open .post-modal {
  transform: translateY(0);
}
.post-modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.post-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-primary);
  flex: 1;
  text-align: center;
}
.close-modal-btn {
  background: var(--bg-secondary);
  border: none;
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 15px;
}
.close-modal-btn:hover {
  background: var(--border-color);
}
.post-modal-body {
  padding: 20px;
}
.post-user-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.post-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 10px;
}
.post-author {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}
.post-privacy {
  font-size: 0.8rem;
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 2px;
  color: var(--text-secondary);
  cursor: pointer;
}
.post-input-title {
  width: 100%;
  border: none;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.post-textarea {
  width: 100%;
  border: none;
  font-size: 1.2rem;
  resize: none;
  height: 120px;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
}
.post-textarea::placeholder {
  color: var(--text-muted);
}
.post-options {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
/* Checkboxes and Action Buttons Override */
input[type="checkbox"].post-select, #bulkSelectAll {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border: 2px solid #94a3b8 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  accent-color: #2563eb !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: none !important;
  outline: none !important;
  display: block !important;
}

.btn-action-approve {
  background-color: #16a34a !important;
  color: #ffffff !important;
  padding: 5px 2px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  transition: all 0.15s ease !important;
}
.btn-action-approve:hover {
  background-color: #15803d !important;
  transform: translateY(-1px);
}
.btn-action-approved {
  background-color: #475569 !important;
  color: #e2e8f0 !important;
  padding: 5px 2px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.725rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 2px solid #22c55e !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  opacity: 0.9 !important;
}
.btn-action-approved:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: translateY(-1px);
}
.btn-action-img {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  padding: 5px 2px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  transition: all 0.15s ease !important;
}
.btn-action-img:hover {
  background-color: #0369a1 !important;
  transform: translateY(-1px);
}

.btn-action-ai {
  background-color: #9333ea !important;
  color: #ffffff !important;
  padding: 6px 4px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  transition: all 0.15s ease !important;
}
.btn-action-ai:hover {
  background-color: #7e22ce !important;
  transform: translateY(-1px);
}
.btn-action-edit {
  background-color: #2563eb !important;
  color: #ffffff !important;
  padding: 6px 4px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  transition: all 0.15s ease !important;
}
.btn-action-edit:hover {
  background-color: #1d4ed8 !important;
  transform: translateY(-1px);
}
.btn-action-delete {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  padding: 6px 4px !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
  transition: all 0.15s ease !important;
}
.btn-action-delete:hover {
  background-color: #b91c1c !important;
  transform: translateY(-1px);
}
.post-submit-btn {
  width: 100%;
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}
.post-submit-btn:hover {
  background: #3a5bbf;
}

/* Toggle Switch */
.switch input:checked + .slider {
  background-color: #1877f2;
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px #1877f2;
}
.switch input:checked + .slider .slider-ball {
  transform: translateX(24px);
}

/* ==========================================================================
   Post Carousel Section (Homepage)
   ========================================================================== */
.post-carousel-wrapper {
  position: relative;
  width: 100%;
  padding: 0 10px;
}
.post-carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 20px 10px;
  scrollbar-width: none; /* Firefox */
  scroll-padding: 10px;
  cursor: grab;
  align-items: stretch; /* equal-height cards so text never overflows the frame */
}
.post-carousel-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none; /* free scroll while dragging */
  scroll-behavior: auto;
}
.post-carousel-track.is-dragging * {
  /* avoid selecting card text mid-drag */
  user-select: none;
}
.post-carousel-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
.post-carousel-track .modern-news-card {
  flex: 0 0 calc(33.333% - 16px);
  scroll-snap-align: start;
  margin-bottom: 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
/* Card body fills remaining height; excerpt clamps so nothing spills out */
.post-carousel-track .modern-news-card .modern-news-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.post-carousel-track .modern-news-card .modern-news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-carousel-track .modern-news-card .modern-news-footer {
  margin-top: auto;
}

/* ---------- Featured news layout (lead story + secondary grid) ---------- */
.featured-news-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 10px 0;
}
.featured-lead-imgwrap { width: 100%; }
.featured-lead-img {
  /* Landscape band cropped from the TOP — a tall A4 poster shows just its upper half */
  height: clamp(360px, 52vw, 800px);
  object-position: top center;
}
.featured-lead-title {
  font-size: clamp(1.15rem, 2.4vw, 1.8rem);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-lead-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-secondary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.featured-mini-img {
  height: 130px;
  object-position: top center;
}

/* Desktop: shorten the featured-news lead image (~20% less) so news content
   isn't pushed entirely below the first screen */
@media (min-width: 869px) {
  .featured-lead-img {
    height: clamp(280px, 42vw, 640px);
  }
  .featured-mini-img {
    height: 104px;
  }
}

/* Lead carousel (shown when 2+ posts are pinned as ข่าวเด่น) */
.featured-lead-carousel { position: relative; }
.featured-lead-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}
.featured-lead-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.featured-lead-track::-webkit-scrollbar { display: none; }
.featured-lead-slide { flex: 0 0 100%; scroll-snap-align: start; }
.featured-lead-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.flead-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border-color, #cbd5e1);
  border: none; padding: 0; cursor: pointer;
  transition: all 0.25s ease;
}
.flead-dot.active {
  background: var(--primary, #800000);
  width: 24px; border-radius: 5px;
}
.flead-nav {
  position: absolute;
  top: clamp(180px, 26vw, 400px);
  transform: translateY(-50%);
  z-index: 10;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color, #e2e8f0);
  background: rgba(255,255,255,0.9);
  color: var(--text-primary, #1e293b);
  cursor: pointer;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  opacity: 0.85;
  transition: all 0.25s ease;
}
.flead-nav:hover { opacity: 1; background: var(--primary, #800000); color: #fff; }
.flead-prev { left: 10px; }
.flead-next { right: 10px; }
@media (max-width: 600px) {
  .flead-nav { display: none; } /* swipe on mobile */
}
.featured-mini-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 992px) {
  .featured-secondary { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .featured-secondary { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .featured-mini-img { height: 100px; }
}
@media (max-width: 992px) {
  .post-carousel-track {
    gap: 20px;
    scroll-padding: 15px;
    padding: 15px 15px;
  }
  .post-carousel-track .modern-news-card {
    flex: 0 0 calc(50% - 10px);
  }
}
@media (max-width: 600px) {
  .post-carousel-track {
    gap: 16px;
    scroll-padding: 16px;
    padding: 15px 16px;
  }
  .post-carousel-track .modern-news-card {
    flex: 0 0 85%; /* Peek-ahead styling to show next slide partially */
  }
}

/* Navigation buttons for Post Carousel */
.post-carousel-wrapper .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 10;
  opacity: 0.8;
}
.post-carousel-wrapper .carousel-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-50%) scale(1.1);
  opacity: 1;
}
.post-carousel-wrapper .prev-btn {
  left: -20px;
}
.post-carousel-wrapper .next-btn {
  right: -20px;
}
@media (max-width: 1200px) {
  .post-carousel-wrapper .prev-btn { left: -10px; }
  .post-carousel-wrapper .next-btn { right: -10px; }
}
@media (max-width: 768px) {
  /* Hide navigation buttons on mobile/tablet because swiping gestures are native and intuitive */
  .post-carousel-wrapper .carousel-btn {
    display: none !important;
  }
}

/* Student stats bar chart: male = blue, female = red.
   The bar markup is generated once by /api/sync/academic and stored in
   wp_backup/pages.json, so stored pages still carry the old bg-blue/bg-pink
   classes (and bg-blue-* is remapped to red by this site's tailwind config).
   Target the title attribute so both old and newly generated markup match. */
.wp-content div[title^="ชาย"] {
  background-color: #2563eb !important;
}
.wp-content div[title^="หญิง"] {
  background-color: #dc2626 !important;
}
/* matching legend dots in the same stored markup */
.wp-content span.w-3.h-3.bg-blue-500.rounded-full {
  background-color: #2563eb !important;
}
.wp-content span.w-3.h-3.bg-pink-500.rounded-full {
  background-color: #dc2626 !important;
}

/* ---------------------------------------------------------------------------
   Admin dashboard tables on phones
   ---------------------------------------------------------------------------
   The dashboard table is ~940px wide. Inside a 321px column that left five of
   the nine news columns off-screen — including สถานะ and every action button —
   so on a phone you had to scroll sideways inside the card to reach อนุมัติ /
   รูป / AI / แก้ไข / ลบ.

   Below md the rows become cards instead. This is done in CSS against the
   markup the desktop table already emits, so there is only ever one row
   renderer to keep correct; the JS only tags cells with data-label (a caption
   to print) or data-cell (a slot in the card header).

   Cells with neither attribute simply stack, so the other tabs (pages, trash,
   personnel) degrade sensibly without needing their own rules.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* The horizontal scroller is what hid the columns; cards do not need it. */
  #tableViewContainer .overflow-x-auto {
    overflow-x: visible;
  }

  #tableViewContainer table,
  #tableViewContainer tbody {
    display: block;
    width: 100%;
  }

  #tableViewContainer thead {
    display: none;
  }

  /* Flex rather than grid so the short meta fields (date, views, pin, status)
     flow onto shared lines instead of each claiming a full row — that alone is
     the difference between one card per screen and two. */
  #tableViewContainer tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--admin-card-border, #e2e8f0);
    border-radius: 0.875rem;
    background: var(--admin-card-bg, #fff);
  }

  #tableViewContainer tbody td {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 0 !important;
    border: 0;
    text-align: left !important;
  }

  /* Tabs other than news render cells without data-label/data-cell. Give those
     the full card width so their contents wrap instead of pushing the card
     wider than the screen. */
  #tableViewContainer tbody td:not([data-label]):not([data-cell]) {
    flex: 1 1 100%;
  }

  #tableViewContainer tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
  }

  /* Header line: checkbox, thumbnail, then the title takes the rest.
     The date sits between the checkbox and the thumbnail in the table's column
     order, so the flow is reordered here rather than in the markup — the
     desktop table needs the columns where they are. */
  #tableViewContainer tbody td[data-cell="select"] {
    order: 1;
  }

  /* Touch targets: the checkbox and the pin star are fine with a mouse but too
     small to hit reliably with a thumb. */
  /* Tailwind's w-5/h-5 utilities are on the element itself, so this needs to
     out-rank them rather than merely out-specify them. */
  #tableViewContainer tbody .post-select {
    width: 1.6rem !important;
    height: 1.6rem !important;
  }

  #tableViewContainer tbody td[data-label="ปักหมุด"] button {
    padding: 0.25rem 0.5rem;
    font-size: 1.35rem;
  }

  #tableViewContainer tbody td[data-cell="image"] {
    order: 2;
    flex: 0 0 3rem;
  }

  #tableViewContainer tbody td[data-cell="title"] {
    order: 3;
    flex: 1 1 55%;
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  #tableViewContainer tbody td[data-label] {
    order: 4;
  }

  #tableViewContainer tbody td[data-cell="actions"] {
    order: 5;
  }

  /* A long category should wrap on its own line rather than squeeze the rest. */
  #tableViewContainer tbody td[data-label="หมวดหมู่"] {
    flex: 1 1 100%;
  }

  /* Actions get the full card width instead of the desktop fixed column. */
  #tableViewContainer tbody td[data-cell="actions"] {
    flex: 1 1 100%;
    margin-top: 0.4rem;
  }

  #tableViewContainer tbody td[data-cell="actions"] > div {
    width: 100% !important;
  }

  /* The filter chips wrapped onto three rows and pushed the first post nearly
     a full screen down. One swipeable row instead. */
  #newsFilterBar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  #newsFilterBar::-webkit-scrollbar {
    display: none;
  }

  /* Same problem, same fix, for the bulk action buttons. */
  #bulkActionBar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 0.5rem !important;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
  }

  #bulkActionBar::-webkit-scrollbar {
    display: none;
  }

  #bulkActionBar > button,
  #bulkActionBar > span {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  /* The sidebar becomes a horizontal strip on phones, but the labels still
     wrapped onto three lines, so every tab was 144px tall and the strip ate a
     third of the screen before any content. Keep each tab on one line. */
  .sidebar-menu-btn {
    white-space: nowrap;
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 767px) {
  .dark #tableViewContainer tbody tr {
    border-color: #334155;
    background: #1e293b;
  }

  .dark #tableViewContainer tbody td[data-label]::before {
    color: #94a3b8;
  }
}