/*
Copyright © Wild Rose Devs. & Alberta Lynx 2025. 
Design & Code rights reserved - United Conservative Party logo and name reserved by The United Conservative Party of Alberta, Canada.

This software and its source code are proprietary and confidential.
Unauthorized copying, distribution, modification, or use in whole or in part
is strictly prohibited and may result in civil and/or criminal penalties.

No license or rights are granted by implication or otherwise under any
intellectual property rights.

For licensing inquiries, contact: https://wildrosedevs.ca

Certain images are derivative works of The United Conservative Party logo 
and are copyrighted by Wild Rose Devs & Alberta Lynx.
*/

/* --------------------------------------
   1) HERO SECTION
   -------------------------------------- */
.hero-s {
    position: relative;
    width: 100%;
    height: 50vh;
    background: url("../images/hero/press-hero.avif") center/cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-v {
    position: relative;
    width: 100%;
    height: 50vh;
    background: url("../images/hero/press-videos-hero.avif") center/cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-s .hero-title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 5rem);
    line-height: 1.2;
    color: #f5f5f5;
    text-shadow: none;
}

/* --------------------------------------
   2) 2-COLUMN LAYOUT (articles + sidebar)
   -------------------------------------- */
.news-container {
    display: flex;
    background: url("../images/backgrounds/image0.avif") center/cover no-repeat;
    gap: 2rem;
    padding: 2rem;
}

.articles-list {
    flex: 3;
}

.news-sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.press-link {
    display: block;
    max-width: 180px;
    margin: 0 auto;
}

.category-sidebar {
    display: none;
}

.news-article-link {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "image content"
        "dot     .      ";
    gap: 0.75rem 1rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease;
}

.news-article-link:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.news-article {
    background: rgba(0, 0, 0, 0.25);
    padding: 2rem;
    border-radius: 0.5rem;
    color: #f1f5f9;
}

.news-article p,
.news-article li {
    color: #e4e4e4;
    font-size: 1.05rem;
    line-height: 1.65;
}

.news-article h2 {
    color: #ffffff;
}

.news-article a {
    color: #93c5fd;
    text-decoration: underline;
}

.news-article a:hover {
    color: #fff;
}

.article-meta-blurb {
    color: #a0aec0;
    font-size: 0.95rem;
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* thumbnail */
.article-image {
    grid-area: image;
    width: 150px;
    height: 100px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 0.375rem;
}

/* content block */
.article-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
}

.article-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #111827;
}

.article-title span {
    text-decoration: none;
}

.article-excerpt {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #1a1a1a;
    margin: 0 0 0.75rem;
}

.article-meta {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

.article-date {
    font-weight: 700;
    color: #4b5563;
    margin-right: 0.5rem;
}

.read-more {
    font-weight: 700;
    color: #2563eb;
}

/* colored dot + label under thumbnail */
.category-footer {
    grid-area: dot;
    display: flex;
    align-items: center;
}

.category-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    background-color: currentColor;
}

.category-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 700;
}

.news-article-link.health {
    color: #3b82f6;
}

.news-article-link.economy {
    color: #ef4444;
}

.news-article-link.general {
    color: #10b981;
}

.news-article-link.social {
    color: #9333ea;
}

/* --------------------------------------
   4) LOAD MORE BUTTON
   -------------------------------------- */
.load-more {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.load-more button {
    background-color: #7ED957;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
}

.load-more button:hover {
    background-color: #021675;
}

/* --------------------------------------
   5) SIDEBAR
   -------------------------------------- */
.news-sidebar button {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    font-weight: bold;
    cursor: pointer;
}

.news-sidebar button:hover {
    background: #f0f0f0;
}

.sidebar-logo {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.news-sidebar h3 {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #7ED957;
}

.sidebar-event {
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 2 / 1;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sidebar-event:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.sidebar-event-img {
    flex: 1 1 auto;
    width: 100%;
    object-fit: cover;
}

.sidebar-event-title {
    flex: 0 0 auto;
    padding: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    color: #111;
    text-decoration: none;
}

.sidebar-event:hover .sidebar-event-title,
.sidebar-event:active .sidebar-event-title {
    color: #111;
    text-decoration: none;
}

#select-month {
    margin-bottom: 1.5rem;
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.no-articles {
    font-size: 1rem;
    color: #555;
    padding: 2rem;
    text-align: center;
}

.sidebar-divider {
    border: none;
    border-top: 1px dotted #ccc;
    margin: 1rem 0;
}

.news-sidebar .footer-social-logos i {
    font-size: 1.6rem;
    margin: 0 0.5rem;
    line-height: 1;
    color: #f7f7f7;
    overflow: hidden;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.video-grid>a {
    display: block;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1rem;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s ease;
}

.video-grid>a:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.video-grid iframe {
    width: 100%;
    height: 200px;
}

/* MOBILE */
@media (max-width: 768px) {
    .news-container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .articles-list,
    .news-sidebar {
        flex: none;
        width: 100%;
    }

    .articles-list {
        order: 1;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .news-sidebar {
        order: 2;
        margin-top: 1.5rem;
    }

    .news-article-link {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "image"
            "content"
            "dot";
        padding: 1rem;
    }

    .article-image {
        grid-area: image;
        width: 100%;
        height: auto;
    }

    .article-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .article-title {
        margin-bottom: 0.5rem;
    }

    .article-excerpt {
        margin-bottom: 0.75rem;
    }
}