/* Custom Sub-pages Styles (What We Do, Athletes, etc.) */

:root {
    --slada-maroon: #800000;
    --slada-gold: #D4AF37;
    --slada-dark: #1a1a1a;
    --slada-light-gray: #f4f4f4;
}

.page-hero {
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    text-align: center;
    position: relative;
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    /* Overlay */
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-subtitle {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

.section-wrapper {
    padding: 80px 0;
}

.section-grey {
    background-color: var(--slada-light-gray);
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--slada-dark);
    margin-bottom: 15px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.service-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-image {
    height: 250px;
    object-fit: cover;
    width: 100%;
}

.service-content {
    padding: 30px;
    flex-grow: 1;
}

.service-title {
    font-size: 1.5rem;
    color: var(--slada-maroon);
    margin-bottom: 15px;
    font-weight: 700;
}

.service-text {
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.cta-banner {
    background-color: var(--slada-maroon);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.cta-button {
    display: inline-block;
    background-color: var(--slada-gold);
    color: var(--slada-dark);
    padding: 15px 30px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 20px;
    transition: background 0.3s;
}

.cta-button:hover {
    background-color: #fff;
}

/* Athletes Page Specifics */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.info-box {
    background: white;
    padding: 30px;
    border-left: 4px solid var(--slada-gold);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.info-box h3 {
    margin-bottom: 15px;
    color: var(--slada-dark);
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* --- High Fidelity Personnel Page Styles --- */

/* 1. Modern Card Design (Based on Image 3) */
.personnel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 80px;
}

.modern-card {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #f0f0f0;
}

.modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.modern-card-img-wrapper {
    height: 240px;
    overflow: hidden;
    position: relative;
}

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

.modern-card:hover .modern-card-img {
    transform: scale(1.1);
}

/* Floating Icon Box */
.icon-box {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--slada-dark, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slada-gold, #D4AF37);
    font-size: 1.25rem;
    z-index: 2;
}

/* Floating Stripe/Decoration */
.card-decoration {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 1;
}

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

.modern-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--slada-dark, #1a1a1a);
    margin-bottom: 10px;
    line-height: 1.3;
}

.modern-card-role {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
    flex-grow: 1;
}

.card-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.card-link:hover {
    color: var(--slada-maroon, #800000);
}

/* 2. Dark Values Section (Based on Image 2) */
.values-section {
    background-color: #0f1012;
    /* Dark/Black */
    color: white;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.values-title-wrapper {
    margin-bottom: 40px;
}

.values-subtitle {
    display: inline-block;
    color: var(--slada-gold, #D4AF37);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    border-left: 3px solid var(--slada-gold, #D4AF37);
    padding-left: 10px;
}

.values-title {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 20px;
}

.values-desc {
    color: #999;
    font-size: 1rem;
    margin-bottom: 40px;
}

.values-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.value-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.value-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.value-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.value-item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.value-icon {
    color: var(--slada-gold, #D4AF37);
    font-size: 1.2rem;
    transform: rotate(-45deg);
    /* Arrow pointing up-right */
}

.value-highlight-box {
    background: var(--slada-orange, #eb7400);
    /* Use orange for accent */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}


/* 3. FAQ Section (Based on Image 1) */
.faq-section {
    padding: 100px 0;
    background-color: white;
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
}

.faq-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--slada-dark, #1a1a1a);
}

.faq-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.faq-content {
    /* Left side text */
}

.faq-list {
    border-top: 1px solid #eee;
}

.faq-item {
    border-bottom: 1px solid #eee;
}

.faq-summary {
    padding: 25px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--slada-dark, #1a1a1a);
    list-style: none;
    /* Hide default triangle */
}

.faq-summary::-webkit-details-marker {
    display: none;
}

.faq-summary:hover {
    color: var(--slada-maroon, #800000);
}

.faq-icon {
    font-size: 1.5rem;
    color: #ccc;
    font-weight: 300;
}

details[open] .faq-icon {
    transform: rotate(45deg);
    /* Turn plus to cross */
}

.faq-answer {
    padding-bottom: 25px;
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

.faq-image-wrapper {
    position: relative;
    /* Shape mask if possible, or just standard */
}

.faq-cta-box {
    position: absolute;
    bottom: 30px;
    left: -30px;
    background: var(--slada-orange, #eb7400);
    padding: 20px 40px;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 20px rgba(235, 116, 0, 0.3);
    /* Slanted edge effect using clip-path if desired, simplified for now */
}

@media (max-width: 992px) {

    .values-grid,
    .faq-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .faq-cta-box {
        position: static;
        margin-top: 20px;
        display: inline-flex;
    }
}

/* --- Personnel Hero (Banner Style) --- */
.personnel-hero {
    height: 350px;
    /* Reduced from standard 600px/100vh */
    min-height: 300px;
    background-size: cover;
    background-position: center 20%;
    /* Focus on faces */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-attachment: fixed;
    /* Parallax feel */
}

.personnel-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(141, 21, 58, 0.4), rgba(0, 0, 0, 0.7));
    /* Maroon tint */
}

.personnel-hero .hero-content {
    z-index: 2;
    position: relative;
}

.personnel-hero .hero-title {
    font-size: 3.5rem;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
}

.personnel-hero .hero-subtitle {
    font-size: 1.2rem;
    color: var(--slada-gold, #FFBE29);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
}

/* Enhanced Modern Card (More Colorful) */
.modern-card {
    background: white;
    border: 1px solid #eee;
    padding: 30px 20px 30px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, border-top-color 0.3s ease;
    border-top: 4px solid var(--slada-maroon, #8D153A);
}

.modern-card:hover {
    transform: translateY(-5px);
    border-top-color: var(--slada-gold, #FFBE29);
}

.modern-card .icon-box {
    margin: -60px auto 20px auto;
    /* Pull up to overlap top border slightly or just center */
    margin: 0 auto 20px auto;
    /* Reset to standard flow */
    position: relative;
    /* Ensure no absolute positioning interferes */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 50%;
    /* Keep existing gradient/shadow */
    background: linear-gradient(135deg, var(--slada-maroon, #8D153A), #600);
    box-shadow: 0 5px 15px rgba(141, 21, 58, 0.3);
}

.card-link {
    color: var(--slada-maroon, #8D153A);
}

/* Colorful Section Header Decoration */
.section-header h2 {
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--slada-gold, #FFBE29);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* --- Document Row Styles (Outside Media Query) --- */
.documents-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.document-card {
    background: white;
    border: 1px solid #eee;
    border-left: 5px solid var(--slada-maroon, #8D153A);
    border-top: 1px solid #eee;
    border-radius: 8px;
    padding: 20px 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
    text-align: left;
}

.document-card:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-left-color: var(--slada-gold, #FFBE29);
    border-top-color: #eee;
}

.doc-icon-wrapper {
    width: 60px;
    height: 60px;
    background: #f9f9f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: var(--slada-maroon, #8D153A);
    transition: background 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.document-card:hover .doc-icon-wrapper {
    background: var(--slada-maroon, #8D153A);
    color: white;
}

.document-card:hover .doc-icon-wrapper svg {
    stroke: white;
    /* Ensure SVG stroke turns white on hover */
}

.document-card:hover .doc-icon-wrapper svg span {
    fill: white !important;
    /* Text DOC inside SVG */
}

.doc-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--slada-dark, #1a1a1a);
    line-height: 1.4;
    flex-grow: 1;
}

.doc-meta {
    font-size: 0.85rem;
    color: #777;
    margin-left: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.doc-download-btn {
    margin-top: 0;
    white-space: nowrap;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--slada-maroon, #8D153A);
    color: var(--slada-maroon, #8D153A);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-left: 20px;
    flex-shrink: 0;
}

.doc-download-btn:hover {
    background: var(--slada-maroon, #8D153A);
    color: white;
}

/* --- News Grid Styles --- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.news-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 12px;
    /* Smooth corners */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.news-image-wrapper {
    height: 200px;
    overflow: hidden;
    position: relative;
    background: #f0f0f0;
}

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

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

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

.news-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.news-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--slada-dark, #1a1a1a);
    margin: 0;
    line-height: 1.4;
    flex-grow: 1;
    /* Push arrow down */
}

.news-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.news-title a:hover {
    color: var(--slada-maroon, #8D153A);
}

.news-arrow-btn {
    align-self: flex-end;
    /* Align to right */
    margin-top: 20px;
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slada-dark, #1a1a1a);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    font-size: 1.2rem;
}

.news-card:hover .news-arrow-btn {
    background: var(--slada-maroon, #8D153A);
    color: white;
}

/* --- Pagination Styles --- */
.pagination-wrapper ul.page-numbers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 10px;
}

.pagination-wrapper .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    background: white;
    border: 1px solid #eee;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.2s;
}


/* --- Single Post Page Styles --- */

/* Hero Section */
.single-post-hero {
    position: relative;
    width: 100%;
    height: 450px;
    /* Large Hero */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 50px;
    border-radius: 0 0 20px 20px;
    /* Slight round at bottom? Or just square. Ref looked rounded on cards but maybe top header is full. Let's do rounded corners for container if user wants, but full width is standard. Let's keep strict full width but maybe a container wrapper? Ref image 1 looks like a rounded card. Let's try standard full width first, cleaner. */
}

.single-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
    display: flex;
    align-items: flex-end;
    padding-bottom: 50px;
    border-radius: 0 0 20px 20px;
}

.single-hero-overlay .container {
    color: white;
}

.single-hero-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.single-hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    color: white;
    max-width: 800px;
}

.single-hero-meta {
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 500;
}

.single-hero-meta .meta-sep {
    margin: 0 10px;
}

/* Layout */
.main-content-container {
    padding-bottom: 80px;
}

.single-layout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* 2/3 Content, 1/3 Sidebar */
    gap: 60px;
}

/* Content Area */
.single-content-area {
    font-family: 'Inter', sans-serif;
    /* Clean font */
    color: #333;
    line-height: 1.8;
    font-size: 1.1rem;
}

.single-content-area h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #111;
}

.single-content-area p {
    margin-bottom: 25px;
}

/* Blockquote Style (from reference) */
.single-content-area blockquote {
    background: #f5f5f5;
    border-left: 5px solid var(--slada-maroon, #8D153A);
    /* Branding */
    padding: 30px;
    margin: 40px 0;
    border-radius: 8px;
    position: relative;
    font-style: normal;
    /* Override default italic */
}

.single-content-area blockquote p {
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}

.single-content-area blockquote cite {
    display: block;
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
    font-style: normal;
}

/* Sidebar Styles */
.single-sidebar .widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.trending-card {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    align-items: center;
}

.trending-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 5px 0;
    line-height: 1.4;
}

.trending-info h4 a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

.trending-info h4 a:hover {
    color: var(--slada-maroon);
}

.trending-date {
    font-size: 0.8rem;
    color: #888;
}

.trending-thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    margin-left: 15px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
}

.thumb-placeholder {
    width: 100%;
    height: 100%;
    background-color: #ddd;
    /* Gray box as per ref if image missing */
}

/* Tag Cloud */
.tag-cloud-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-pill {
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    text-decoration: none;
    color: #555;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}

.tag-pill:hover {
    border-color: var(--slada-maroon);
    color: var(--slada-maroon);
    background: rgba(141, 21, 58, 0.05);
}

/* Responsive */
@media (max-width: 900px) {
    .single-layout-grid {
        grid-template-columns: 1fr;
    }

    .single-hero-title {
        font-size: 2rem;
    }
}
/* --- Single Post Layout --- */
.single-post-hero {
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    color: white;
}
.single-hero-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    width: 100%;
    padding-bottom: 40px;
}
.single-hero-tag {
    background: var(--slada-gold);
    color: black;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 15px;
}
.single-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
}
.single-hero-meta {
    font-size: 0.9rem;
    opacity: 0.9;
}
.main-content-container {
    padding-top: 60px;
    padding-bottom: 80px;
}
.single-layout-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 60px;
}
.single-content-area {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}
.single-sidebar .widget-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
.trending-card {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.trending-thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.trending-info h4 {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 5px;
}
.trending-info h4 a:hover {
    color: var(--slada-maroon);
}
.tag-cloud-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tag-pill {
    background: #f0f0f0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #555;
    transition: background 0.2s;
}
.tag-pill:hover {
    background: var(--slada-maroon);
    color: white;
}
@media (max-width: 900px) {
    .single-layout-grid {
        grid-template-columns: 1fr;
    }
}