/* ================================ BACK TO NEWS BUTTON ================================ */
.back-to-news {
    display: inline-block;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: bold;
    background-color: #A12124; /* Red Theme */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    transition: background 0.3s ease, transform 0.2s ease;
    text-align: center;
    max-width: 200px;
    margin-bottom: 20px;
}

.back-to-news:hover {
    background: #89191d;
    transform: scale(1.05);
}

/* ================================ TITLE STYLING ================================ */
.news-header-section {
    text-align: center;
    margin-bottom: 10px;
}

.news-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    font-family: 'Century Gothic', sans-serif;
    margin-bottom: 10px;
    text-align: left;
}

/* ================================ CATEGORY BADGE & DATE  ================================ */
.news-meta-container {
    display: flex;
    flex-wrap: wrap; /* Ensures proper wrapping on small screens */
    align-items: center;
    gap: 12px; /* Adjusts spacing between elements */
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 20px; 
    width: 100%;
}

/* Category Badge */
.category-badge {
    background-color: #A12124; /* Dark Red */
    color: white;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 20px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Prevents wrapping */
}

/* Aligns "Published on" text and date beside the NEWS badge */
.news-publish-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Prevents breaking */
    gap: 5px; /* Space between elements */
}

/* "Published on" text */
.publish-text {
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    white-space: nowrap; /* Keeps text inline */
}

/* Date text */
.news-date {
    color: #007bff; /* Blue color for link effect */
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap; /* Prevents line break */
}

/* ================================ CATEGORY BADGE ================================ */
.news-badge {
    background-color: #A12124; 
    color: white;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 20px;
    letter-spacing: 1px;
    text-align: center;
}

/* ================================ ARTICLE IMAGE ================================ */
.news-image {
    display: flex;
    justify-content: center; /* Centers the image */
    align-items: center;
    margin-top: 30px; /* Adds space above */
    margin-bottom: 40px; /* More space below */
    width: 100%; /* Ensures full width */
    overflow: hidden; /* Prevents cutting */
}

.news-image img {
    width: 100%; /* Makes it responsive */
    height: auto; /* Maintains aspect ratio */
    max-width: 600px; /* Limits max size */
    object-fit: contain; /* Ensures full image visibility */
    border-radius: 8px;
    display: block;
}
/* ============================ ARTICLE INTRO ============================ */
.news-intro-container {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 0.5px;
}

.news-intro {
    max-width: 100%;
    font-size: 1rem;
    font-weight: 500;
    color: #444;
    line-height: 1.5;
}

/* ============================ IMAGE BACKGROUND SECTION ============================ */
.news-content {
    margin: 0 8%;
}

/* ============================ IMAGE-BACKGROUND TEXT ============================ */
.news-text-overlay {
    max-width: 100%;
    margin-bottom: 2%;
}

.news-text-overlay h1 {
    text-align: left;
    font-weight: 900;
    text-transform: uppercase;
    font-family: 'Century Gothic', sans-serif;
    padding-bottom: 1.5%;
    max-width: 55%;
    margin-left: 8%;
}

.news-text-overlay p {
    color: white;
    font-size: large;
    font-weight: lighter;
    line-height: 1.5;
    font-family: 'Century Gothic', sans-serif;
    max-width: 50%;
    margin-left: 8%;
}


/* ============================ ARTICLES SECTION ============================ */
.articles-section {
    background-color: white;
    font-size: 24px;
    font-weight: bold;
    margin-top: 5%;
}

/* Section Title */
.articles-focus-section h3 {
    font-size: 40px;
    font-weight: 700;
    color: #A12124;
    text-transform: uppercase;
    padding-bottom: 2%;
}

/* ============================ IMAGE SECTION ============================ */
.articles-image {
    width: 100%;
    height: 50vh;
    object-fit: cover;
}

/* ============================ TEXT SECTION ============================ */
.articles-name, 
.articles-title {
    color: black;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Century Gothic', sans-serif;
}

.articles-title {
    font-size: x-large;
    padding-bottom: 2%;
}

.articles-content-desc {
    color: #625F5F;
    font-weight: lighter;
    font-family: 'Century Gothic', sans-serif;
    line-height: 2;
    font-size: medium;
}

/* ============================ BUTTON STYLING ============================ */
.btn-articles {
    font-size: large;
    background-color: #A12124;
    color: white;
    margin: 2% 0 5%;
    font-family: 'Century Gothic', sans-serif;
    border-radius: 50px;
    width: 50%;
    border: 2px solid #A12124;
    padding: 12px 20px;
    text-align: center;
    display: inline-block;
    transition: background 0.3s ease, transform 0.2s ease;
}

.btn-articles:hover {
    background-color: white;
    color: #A12124;
    transform: scale(1.05);
}


/* ============================ RELATED NEWS SECTION ============================ */
.related-articles {
    margin-top: 40px;
    padding: 20px;
    background-color: white;
}

/* Title */
.related-articles-title {
    font-size: 24px;
    font-weight: bold;
    color: #A12124;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: left;
}

/* Grid Layout */
.related-articles-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Individual Article */
.related-article {
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    width: calc(33.33% - 20px);
    min-width: 280px;
    max-width: 400px;
    flex-grow: 1;
}

/* Single Article Alignment */
.related-articles-list:has(.related-article:only-child) {
    justify-content: left;
}

/* Hover Effect */
.related-article:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Clickable Entire Article */
.related-article a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Article Image */
.related-article-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Title */
.related-article-title {
    font-size: 18px;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    font-family: 'Century Gothic', sans-serif;
    margin-bottom: 5px;
}

/* Divider */
.related-article-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    margin: 5px 0 10px;
}

/* Description */
.related-article-intro {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    font-family: 'Century Gothic', sans-serif;
    margin-bottom: auto;
}

/* Read More */
.read-more-text {
    display: inline-block;
    color: #A12124;
    font-weight: bold;
    font-size: 14px;
    font-family: 'Century Gothic', sans-serif;
    text-align: left;
    margin-top: 10px;
    text-decoration: none;
}

.read-more-text:hover {
    text-decoration: underline;
    color: darkred;
}