:root {
 --primary-color: #c8a865;
 --primary-dark: #b8965a;
 --primary-light: #d4b775;
 --secondary-color: #2c3e50;
 --accent-color: #34495e;
 --white: #ffffff;
 --gray-50: #fafafa;
 --gray-100: #f5f5f5;
 --gray-200: #e5e7eb;
 --gray-300: #d1d5db;
 --gray-400: #9ca3af;
 --gray-500: #6b7280;
 --gray-600: #4b5563;
 --gray-700: #374151;
 --gray-800: #1f2937;
 --gray-900: #111827;
 --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
 --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
 --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
 --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);
 --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
 --radius-sm: 0.375rem;
 --radius-md: 0.5rem;
 --radius-lg: 0.75rem;
 --radius-xl: 1rem;
 --radius-2xl: 1.5rem;
 --radius-3xl: 2rem;
 --transition-base: all 0.3s cubic-bezier(0.4,0,0.2,1);
 --transition-fast: all 0.15s ease-out;
 --gradient-primary: linear-gradient(135deg,var(--primary-color) 0%,var(--primary-light) 100%);
 --gradient-hero: linear-gradient(135deg,#fdfcf8 0%,#f9f6f0 25%,#f3ede3 50%,#c8a865 100%);
}
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
 line-height: 1.6;
 color: var(--gray-800);
 background: linear-gradient(135deg,#fdfcfb 0%,#f8f9fa 100%);
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 {
 font-family: 'Poppins',sans-serif;
 font-weight: 700;
 line-height: 1.2;
 color: var(--gray-900);
 letter-spacing: -0.025em;
}
.page-hero {
 position: relative;
 background: var(--gradient-hero);
 padding: 140px 0 100px;
 overflow: hidden;
}
.page-hero::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: 
 radial-gradient(circle at 20% 20%,rgba(200,168,101,0.1) 0%,transparent 50%),
 radial-gradient(circle at 80% 80%,rgba(200,168,101,0.05) 0%,transparent 50%),
 radial-gradient(circle at 40% 60%,rgba(255,255,255,0.3) 0%,transparent 30%);
 z-index: 1;
}
.page-hero::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 100px;
 background: linear-gradient(180deg,transparent 0%,rgba(255,255,255,0.8) 100%);
 z-index: 2;
}
.page-hero .container {
 position: relative;
 z-index: 3;
}
.page-title {
 font-size: clamp(2.5rem,5vw,4rem);
 font-weight: 800;
 color: var(--gray-900);
 margin-bottom: 1.5rem;
 text-shadow: 0 2px 4px rgba(255,255,255,0.8);
 letter-spacing: -0.02em;
}
.page-subtitle {
 font-size: clamp(1.125rem,2vw,1.375rem);
 color: var(--gray-700);
 margin-bottom: 2.5rem;
 max-width: 800px;
 margin-left: auto;
 margin-right: auto;
 line-height: 1.7;
 font-weight: 400;
}
.breadcrumb {
 background: rgba(255,255,255,0.95);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 padding: 14px 28px;
 border-radius: var(--radius-2xl);
 display: inline-flex;
 box-shadow: var(--shadow-lg);
 border: 1px solid rgba(200,168,101,0.1);
 font-size: 0.9rem;
 font-weight: 500;
}
.breadcrumb-item + .breadcrumb-item::before {
 content: "›";
 color: var(--primary-color);
}
.breadcrumb-item a {
 color: var(--primary-color);
 text-decoration: none;
 font-weight: 500;
}
.breadcrumb-item.active {
 color: var(--gray-600);
}
.content-section {
 padding: 100px 0;
 position: relative;
}
.content-section:nth-child(even) {
 background: linear-gradient(135deg,rgba(248,249,250,0.6) 0%,rgba(255,255,255,0.9) 100%);
}
.section-header {
 text-align: center;
 margin-bottom: 5rem;
 position: relative;
}
.section-badge {
 display: inline-flex;
 align-items: center;
 background: var(--gradient-primary);
 color: var(--white);
 padding: 12px 24px;
 border-radius: var(--radius-3xl);
 font-size: 0.875rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 margin-bottom: 1.5rem;
 box-shadow: var(--shadow-md);
 position: relative;
 overflow: hidden;
}
.section-badge::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
 transition: var(--transition-base);
}
.section-badge:hover::before {
 left: 100%;
}
.section-title {
 font-size: clamp(2.25rem,4vw,3.5rem);
 font-weight: 800;
 margin-bottom: 1.5rem;
 color: var(--gray-900);
 letter-spacing: -0.025em;
 position: relative;
}
.section-title::after {
 content: '';
 position: absolute;
 bottom: -0.5rem;
 left: 50%;
 transform: translateX(-50%);
 width: 60px;
 height: 4px;
 background: var(--gradient-primary);
 border-radius: var(--radius-sm);
}
.section-description {
 font-size: 1.125rem;
 color: var(--gray-600);
 max-width: 800px;
 margin: 0 auto;
 line-height: 1.8;
 font-weight: 400;
}
.filter-section {
 background: var(--white);
 border-radius: 16px;
 padding: 24px;
 margin-bottom: 32px;
 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
 border: 1px solid rgba(231,76,60,0.1);
}
.filter-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 20px;
 flex-wrap: wrap;
 gap: 16px;
}
.filter-title-group {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.filter-title {
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--primary-color);
 margin: 0;
 display: flex;
 align-items: center;
 gap: 12px;
}
.filter-title i {
 color: var(--accent-color);
}
.filter-count {
 background: linear-gradient(135deg,var(--primary-color),var(--accent-color));
 color: white;
 padding: 4px 12px;
 border-radius: 20px;
 font-size: 0.875rem;
 font-weight: 600;
 align-self: flex-start;
}
.filter-quick-actions {
 display: flex;
 gap: 8px;
 flex-wrap: wrap;
}
.btn-quick-filter {
 background: transparent;
 border: 2px solid var(--border-color);
 color: var(--text-muted);
 padding: 8px 16px;
 border-radius: 25px;
 font-size: 0.875rem;
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 8px;
 cursor: pointer;
 transition: all 0.3s ease;
 white-space: nowrap;
}
.btn-quick-filter:hover {
 border-color: var(--primary-color);
 color: var(--primary-color);
 transform: translateY(-2px);
}
.btn-quick-filter.active {
 background: linear-gradient(135deg,var(--primary-color),var(--accent-color));
 border-color: var(--primary-color);
 color: white;
 box-shadow: 0 4px 15px rgba(231,76,60,0.3);
}
.filter-main {
 display: flex;
 gap: 16px;
 align-items: center;
 flex-wrap: wrap;
 margin-bottom: 16px;
}
.search-box {
 flex: 1;
 min-width: 300px;
}
.search-input-group {
 position: relative;
 display: flex;
 align-items: center;
}
.search-icon {
 position: absolute;
 left: 16px;
 color: var(--text-muted);
 font-size: 1rem;
 z-index: 2;
}
.search-input {
 width: 100%;
 padding: 12px 50px 12px 48px;
 border: 2px solid var(--border-color);
 border-radius: 25px;
 font-size: 1rem;
 transition: all 0.3s ease;
 background: var(--white);
}
.search-input:focus {
 outline: none;
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px rgba(231,76,60,0.1);
}
.search-clear {
 position: absolute;
 right: 12px;
 background: none;
 border: none;
 color: var(--text-muted);
 cursor: pointer;
 padding: 8px;
 border-radius: 50%;
 transition: all 0.3s ease;
}
.search-clear:hover {
 background: var(--bg-light);
 color: var(--primary-color);
}
.filter-toggle {
 background: var(--bg-light);
 border: 2px solid var(--border-color);
 color: var(--text-color);
 padding: 12px 20px;
 border-radius: 25px;
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 8px;
 cursor: pointer;
 transition: all 0.3s ease;
 white-space: nowrap;
}
.filter-toggle:hover {
 border-color: var(--primary-color);
 color: var(--primary-color);
}
.toggle-arrow {
 transition: transform 0.3s ease;
}
.filter-toggle.active .toggle-arrow {
 transform: rotate(180deg);
}
.advanced-filters {
 margin-top: 20px;
 padding-top: 20px;
 border-top: 2px solid var(--border-color);
 animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
 from {
 opacity: 0;
 transform: translateY(-10px);
}
 to {
 opacity: 1;
 transform: translateY(0);
}
}
.filter-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
 gap: 20px;
 align-items: end;
}
.filter-group {
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.filter-label {
 font-weight: 600;
 color: var(--text-color);
 font-size: 0.875rem;
 display: flex;
 align-items: center;
 gap: 8px;
}
.filter-label i {
 color: var(--accent-color);
 width: 16px;
}
.filter-select {
 padding: 10px 16px;
 border: 2px solid var(--border-color);
 border-radius: 12px;
 font-size: 1rem;
 background: var(--white);
 color: var(--text-color);
 cursor: pointer;
 transition: all 0.3s ease;
}
.filter-select:focus {
 outline: none;
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px rgba(231,76,60,0.1);
}
.filter-actions {
 display: flex;
 gap: 12px;
 align-items: center;
}
.btn-sm {
 padding: 8px 16px;
 font-size: 0.875rem;
 border-radius: 20px;
}
@media (max-width: 992px) {
 .filter-header {
 flex-direction: column;
 align-items: stretch;
 gap: 1rem;
}
 .filter-title-group {
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 0.5rem;
}
 .filter-title {
 font-size: 1.25rem;
 justify-content: center;
}
 .filter-quick-actions {
 justify-content: center;
 gap: 6px;
}
 .btn-quick-filter {
 padding: 6px 12px;
 font-size: 0.8rem;
 gap: 6px;
}
 .btn-quick-filter i {
 font-size: 0.75rem;
}
 .filter-main {
 flex-direction: column;
 align-items: stretch;
}
 .search-box {
 min-width: auto;
}
 .filter-grid {
 grid-template-columns: 1fr;
}
 .filter-actions {
 justify-content: center;
 grid-column: 1;
}
}
.filter-buttons {
 display: flex;
 gap: 1rem;
 justify-content: center;
 flex-wrap: wrap;
}
.announcements-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
 gap: 2rem;
 margin-top: 3rem;
}
.announcement-card {
 background: var(--white);
 border-radius: var(--radius-2xl);
 padding: 0;
 box-shadow: var(--shadow-md);
 border: 1px solid var(--gray-200);
 transition: var(--transition-base);
 overflow: hidden;
 position: relative;
}
.announcement-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 4px;
 background: var(--gradient-primary);
 transform: scaleX(0);
 transition: var(--transition-base);
 transform-origin: left;
}
.announcement-card:hover::before {
 transform: scaleX(1);
}
.announcement-card:hover {
 transform: translateY(-8px);
 box-shadow: var(--shadow-xl);
 border-color: var(--primary-light);
}
.announcement-image {
 width: 100%;
 height: 200px;
 overflow: hidden;
 position: relative;
}
.announcement-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: var(--transition-base);
}
.announcement-card:hover .announcement-image img {
 transform: scale(1.05);
}
.announcement-image .image-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(135deg,rgba(0,0,0,0.3) 0%,transparent 50%);
 opacity: 0;
 transition: var(--transition-base);
}
.announcement-card:hover .announcement-image .image-overlay {
 opacity: 1;
}
.default-announcement-image {
 background: var(--gradient-primary);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--white);
 font-size: 3rem;
 width: 100%;
 height: 100%;
}
.announcement-header {
 padding: 1.5rem 2rem 0 2rem;
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 1rem;
}
.announcement-date {
 background: var(--gradient-primary);
 color: var(--white);
 padding: 8px 16px;
 border-radius: var(--radius-lg);
 font-size: 0.875rem;
 font-weight: 600;
 white-space: nowrap;
}
.announcement-priority {
 padding: 6px 12px;
 border-radius: var(--radius-lg);
 font-size: 0.75rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}
.priority-high {
 background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
 color: var(--white);
}
.priority-medium {
 background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
 color: var(--white);
}
.priority-low {
 background: linear-gradient(135deg,#10b981 0%,#059669 100%);
 color: var(--white);
}
.priority-info {
 background: linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
 color: var(--white);
}
.announcement-content {
 padding: 0 2rem 2rem 2rem;
}
.announcement-title {
 font-size: 1.375rem;
 font-weight: 700;
 color: var(--gray-900);
 margin-bottom: 1rem;
 line-height: 1.3;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.announcement-excerpt {
 color: var(--gray-600);
 line-height: 1.6;
 margin-bottom: 1.5rem;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.announcement-meta {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 1rem;
 padding-top: 1rem;
 border-top: 1px solid var(--gray-100);
}
.announcement-category {
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--gray-500);
 font-size: 0.875rem;
 font-weight: 500;
}
.announcement-category i {
 color: var(--primary-color);
}
.announcement-actions {
 display: flex;
 gap: 0.5rem;
}
.btn-read-more {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: var(--gradient-primary);
 color: var(--white);
 padding: 8px 16px;
 border: none;
 border-radius: var(--radius-lg);
 font-size: 0.875rem;
 font-weight: 600;
 text-decoration: none;
 transition: var(--transition-base);
 cursor: pointer;
}
.btn-read-more:hover {
 background: linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-color) 100%);
 color: var(--white);
 text-decoration: none;
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}
.pagination-container {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-top: 4rem;
 gap: 2rem;
 flex-wrap: wrap;
}
.pagination {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 background: var(--white);
 padding: 1rem;
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow-md);
 border: 1px solid var(--gray-200);
}
.pagination-item {
 list-style: none;
}
.pagination-link {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 color: var(--gray-600);
 text-decoration: none;
 border-radius: var(--radius-lg);
 font-weight: 500;
 transition: var(--transition-base);
 border: 1px solid transparent;
}
.pagination-link:hover {
 background: var(--primary-color);
 color: var(--white);
 text-decoration: none;
 transform: translateY(-2px);
 box-shadow: var(--shadow-sm);
}
.pagination-link.active {
 background: var(--gradient-primary);
 color: var(--white);
 border-color: var(--primary-color);
}
.pagination-link.disabled {
 color: var(--gray-400);
 cursor: not-allowed;
 opacity: 0.5;
}
.pagination-link.disabled:hover {
 background: transparent;
 color: var(--gray-400);
 transform: none;
 box-shadow: none;
}
.pagination-info {
 color: var(--gray-600);
 font-size: 0.875rem;
 font-weight: 500;
}
.no-results {
 text-align: center;
 padding: 4rem 2rem;
 color: var(--gray-500);
}
.no-results i {
 font-size: 4rem;
 color: var(--gray-300);
 margin-bottom: 1rem;
}
.no-results h3 {
 color: var(--gray-600);
 margin-bottom: 0.5rem;
}
.loading {
 text-align: center;
 padding: 3rem;
}
.spinner {
 display: inline-block;
 width: 40px;
 height: 40px;
 border: 4px solid var(--gray-200);
 border-radius: 50%;
 border-top-color: var(--primary-color);
 animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
 to {transform: rotate(360deg);}
}
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 12px 24px;
 border: 2px solid transparent;
 border-radius: var(--radius-lg);
 font-size: 1rem;
 font-weight: 600;
 text-decoration: none;
 transition: var(--transition-base);
 cursor: pointer;
 gap: 8px;
 position: relative;
 overflow: hidden;
}
.btn::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
 transition: var(--transition-base);
}
.btn:hover::before {
 left: 100%;
}
.btn-primary {
 background: var(--gradient-primary);
 color: var(--white);
 border-color: var(--primary-color);
}
.btn-primary:hover {
 background: linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-color) 100%);
 color: var(--white);
 text-decoration: none;
 transform: translateY(-2px);
 box-shadow: var(--shadow-md);
}
.btn-outline {
 background: transparent;
 color: var(--gray-600);
 border-color: var(--gray-300);
}
.btn-outline:hover {
 background: var(--gray-100);
 color: var(--gray-700);
 text-decoration: none;
}
.fade-in {
 opacity: 0;
 animation: fadeInUp 0.8s ease-out forwards;
}
.fade-in:nth-child(1) {animation-delay: 0.1s;}
.fade-in:nth-child(2) {animation-delay: 0.2s;}
.fade-in:nth-child(3) {animation-delay: 0.3s;}
.fade-in:nth-child(4) {animation-delay: 0.4s;}
.fade-in:nth-child(5) {animation-delay: 0.5s;}
.fade-in:nth-child(6) {animation-delay: 0.6s;}
@keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(30px);
}
 to {
 opacity: 1;
 transform: translateY(0);
}
}
.filter-results-message {
 background: linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);
 border: 1px solid #3b82f6;
 color: #1e40af;
 padding: 1rem 1.5rem;
 border-radius: var(--radius-lg);
 margin-top: 1rem;
 font-weight: 500;
 animation: slideDown 0.3s ease-out;
 display: flex;
 align-items: center;
 gap: 0.5rem;
}
.filter-results-message.clear-message {
 background: linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%);
 border-color: #16a34a;
 color: #15803d;
}
@keyframes slideDown {
 from {
 opacity: 0;
 transform: translateY(-10px);
}
 to {
 opacity: 1;
 transform: translateY(0);
}
}
.modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0,0,0,0.8);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 99999;
 opacity: 0;
 visibility: hidden;
 transition: all 0.3s ease;
 padding: 1rem;
 overflow: hidden;
}
.modal-overlay.active {
 opacity: 1;
 visibility: visible;
}
.modal-content {
 background: var(--white);
 border-radius: var(--radius-2xl);
 max-width: 800px;
 width: calc(100% - 2rem);
 max-height: calc(100vh - 2rem);
 overflow: hidden;
 display: flex;
 flex-direction: column;
 position: relative;
 transform: scale(0.9) translateY(-50px);
 transition: all 0.3s ease;
 margin: auto;
}
.modal-overlay.active .modal-content {
 transform: scale(1) translateY(0);
}
.modal-header {
 padding: 1.5rem 2rem;
 border-bottom: 2px solid var(--gray-100);
 background: var(--white);
 border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
 z-index: 10;
 display: flex;
 flex-direction: column;
 width: 100%;
 flex-shrink: 0;
}
.modal-title-section {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 margin-bottom: 1.5rem;
 width: 100%;
}
.modal-meta-section {
 display: flex-stat;
 align-items: center;
 justify-content: flex-end;
 width: 100%;
}
.modal-close {
 background: var(--gray-100);
 border: none;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: var(--transition-base);
 color: var(--gray-600);
 font-size: 1.2rem;
 flex-shrink: 0;
}
.modal-close:hover {
 background: var(--primary-color);
 color: var(--white);
 transform: rotate(90deg);
}
.modal-title {
 font-size: 1.75rem;
 font-weight: 700;
 color: var(--gray-900);
 margin: 0;
 padding: 0;
 line-height: 1.3;
 flex: 1;
 margin-right: 1rem;
 width: 100%;
 max-width: calc(100% - 3rem);
}
.modal-meta {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 align-items: center;
 margin: 0;
}
.modal-date {
 background: var(--gradient-primary);
 color: var(--white);
 padding: 6px 12px;
 border-radius: var(--radius-lg);
 font-size: 0.875rem;
 font-weight: 600;
}
.modal-category {
 display: flex;
 align-items: center;
 gap: 6px;
 color: var(--gray-600);
 font-size: 0.875rem;
 font-weight: 500;
}
.modal-category i {
 color: var(--primary-color);
}
.modal-priority {
 padding: 4px 8px;
 border-radius: var(--radius-md);
 font-size: 0.75rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}
.modal-body {
 padding: 1.5rem 2rem 2rem;
 overflow-y: auto;
 flex: 1;
 min-height: 0;
}
.modal-image {
 width: 100%;
 height: 250px;
 overflow: hidden;
 border-radius: var(--radius-xl);
 margin-bottom: 2rem;
}
.modal-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.modal-text {
 color: var(--gray-700);
 line-height: 1.8;
 font-size: 1.1rem;
 margin-bottom: 2rem;
}
@media (max-width: 992px) {
 .modal-overlay {
 padding: 0.5rem;
}
 .modal-content {
 width: calc(100% - 1rem);
 max-height: calc(100vh - 1rem);
 border-radius: var(--radius-xl);
}
 .modal-header {
 padding: 1rem 1.25rem;
 border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
 .modal-body {
 padding: 1rem 1.25rem 1.5rem;
}
 .modal-title {
 font-size: 1.25rem;
 max-width: calc(100% - 50px);
}
 .modal-title-section {
 flex-direction: row;
 align-items: flex-start;
 gap: 0.75rem;
}
 .modal-close {
 width: 36px;
 height: 36px;
 font-size: 1rem;
}
 .modal-meta-section {
 justify-content: flex-start;
}
 .modal-meta {
 justify-content: flex-start;
 gap: 0.5rem;
 flex-wrap: wrap;
}
 .modal-date,
 .modal-category,
 .modal-priority {
 font-size: 0.75rem;
 padding: 4px 8px;
}
 .modal-image {
 height: 180px;
 margin-bottom: 1rem;
}
 .modal-text {
 font-size: 0.95rem;
 line-height: 1.7;
}
}
@media (max-width: 576px) {
 .modal-overlay {
 padding: 0.25rem;
}
 .modal-content {
 width: calc(100% - 0.5rem);
 max-height: calc(100vh - 0.5rem);
 border-radius: var(--radius-lg);
}
 .modal-header {
 padding: 0.875rem 1rem;
 border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
 .modal-body {
 padding: 0.875rem 1rem 1.25rem;
}
 .modal-title {
 font-size: 1.1rem;
 line-height: 1.25;
}
 .modal-close {
 width: 32px;
 height: 32px;
 font-size: 0.9rem;
}
 .modal-meta {
 gap: 0.375rem;
}
 .modal-date,
 .modal-category,
 .modal-priority {
 font-size: 0.7rem;
 padding: 3px 6px;
}
 .modal-image {
 height: 150px;
}
 .modal-text {
 font-size: 0.9rem;
}
}
@media (max-width: 992px) {
 .page-hero {
 padding: 120px 0 80px;
}
 .content-section {
 padding: 80px 0;
}
 .filter-controls {
 grid-template-columns: 1fr;
}
 .announcements-grid {
 grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
 .page-hero {
 padding: 100px 0 60px;
}
 .announcement-card {
 margin-bottom: 1rem;
}
 .announcement-header {
 flex-direction: row;
 flex-wrap: wrap;
 gap: 0.5rem;
 align-items: center;
 justify-content: space-between;
}
 .announcement-date {
 font-size: 0.75rem;
 padding: 6px 12px;
}
 .announcement-priority {
 font-size: 0.65rem;
 padding: 4px 10px;
}
 .announcement-meta {
 flex-direction: row;
 flex-wrap: nowrap;
 gap: 0.5rem;
 align-items: center;
 justify-content: space-between;
}
 .announcement-category {
 font-size: 0.75rem;
 gap: 4px;
}
 .announcement-category i {
 font-size: 0.7rem;
}
 .announcement-actions .btn-read-more {
 font-size: 0.75rem;
 padding: 6px 12px;
 gap: 4px;
}
 .filter-buttons {
 flex-direction: column;
 align-items: center;
}
 .pagination {
 padding: 0.5rem;
 gap: 0.25rem;
}
 .pagination-link {
 width: 36px;
 height: 36px;
 font-size: 0.875rem;
}
}
@media (max-width: 575px) {
 .page-title {
 font-size: 2rem;
}
 .filter-section {
 padding: 1rem;
}
 .filter-header {
 gap: 0.75rem;
}
 .filter-title {
 font-size: 1.1rem;
 gap: 8px;
}
 .filter-count {
 font-size: 0.75rem;
 padding: 3px 10px;
}
 .filter-quick-actions {
 gap: 4px;
 width: 100%;
}
 .btn-quick-filter {
 padding: 5px 10px;
 font-size: 0.75rem;
 gap: 4px;
 flex: 1;
 justify-content: center;
 min-width: 0;
}
 .btn-quick-filter span {
 display: none;
}
 .search-input {
 font-size: 0.9rem;
 padding: 10px 40px 10px 40px;
}
 .filter-toggle {
 font-size: 0.85rem;
 padding: 8px 14px;
}
 .advanced-filters {
 padding: 1rem;
}
 .filter-label {
 font-size: 0.8rem;
}
 .filter-select {
 font-size: 0.85rem;
 padding: 8px 12px;
}
 .announcement-content {
 padding: 0 1.5rem 1.5rem 1.5rem;
}
 .announcement-header {
 padding: 1.5rem 1.5rem 0 1.5rem;
}
}