/* ================================================
   Projects — Single & Archive Styles
   Cherokee Hills Christian Church
   ================================================ */

:root {
    --pr-accent:       #01aeef;
    --pr-accent-dark:  #0068A6;
    --pr-text:         #1a1a1a;
    --pr-text-muted:   #555;
    --pr-border:       #e0e0e0;
    --pr-bg-light:     #f7f8fa;
    --pr-radius:       8px;
    --pr-radius-lg:    12px;
    --pr-shadow:       0 2px 12px rgba(0,0,0,0.08);
    --pr-shadow-hover: 0 6px 24px rgba(0,0,0,0.14);

    /* Status colors */
    --pr-planning:    #f59e0b;
    --pr-inprogress:  #0068A6;
    --pr-completed:   #10b981;
}

/* ════════════════════════════════════════════════
   SINGLE PROJECT PAGE
   ════════════════════════════════════════════════ */

.project-page {
    width:      100%;
    max-width:  100%;
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

/* ── Hero ── */
.project-hero {
    position:            relative;
    width:               100%;
    min-height:          380px;
    background-size:     cover;
    background-position: center;
    background-color:    var(--pr-accent-dark);
    display:             flex;
    align-items:         flex-end;
}

.project-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient( to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.65) 100% );
    display:    flex;
    align-items: flex-end;
}

.project-hero-content {
    position: relative;
    z-index:  1;
    padding:  2rem;
    width:    100%;
}

.project-hero-category span {
    display:        inline-block;
    background:     var(--pr-accent);
    color:          #fff;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        0.2em 0.65em;
    border-radius:  4px;
    margin:         0 0.25rem 0.5rem 0;
}

.project-hero-title {
    font-size:   2.2rem;
    font-weight: 800;
    color:       #fff;
    margin:      0 0 0.35rem 0;
    line-height: 1.15;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.project-hero-subtitle {
    font-size: 1.05rem;
    color:     rgba(255,255,255,0.88);
    margin:    0 0 0.75rem 0;
}

/* ── Status badge ── */
.project-status {
    display:        inline-block;
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding:        0.25em 0.75em;
    border-radius:  99px;
}

.project-status--planning {
    background: rgba(245, 158, 11, 0.15);
    color:      #b45309;
    border:     1px solid #f59e0b;
}

.project-status--in-progress {
    background: rgba(0, 104, 166, 0.12);
    color:      var(--pr-accent-dark);
    border:     1px solid var(--pr-accent-dark);
}

.project-status--completed {
    background: rgba(16, 185, 129, 0.12);
    color:      #059669;
    border:     1px solid #10b981;
}

/* ── Body ── */
.project-body {
    padding:    2.5rem 1.5rem;
    max-width:  1100px;
    margin:     0 auto;
    box-sizing: border-box;
}

/* ── Inline header (no hero) ── */
.project-header {
    margin-bottom:  1.75rem;
    padding-bottom: 1.5rem;
    border-bottom:  2px solid var(--pr-border);
}

.project-header-category span {
    display:        inline-block;
    background:     var(--pr-accent);
    color:          #fff;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        0.2em 0.65em;
    border-radius:  4px;
    margin:         0 0.25rem 0.5rem 0;
}

.project-header-title-row {
    display:     flex;
    align-items: center;
    gap:         1rem;
    flex-wrap:   wrap;
    margin-bottom: 0.35rem;
}

.project-title {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--pr-text);
    margin:      0;
    line-height: 1.2;
}

.project-subtitle {
    font-size:   1.05rem;
    color:       var(--pr-text-muted);
    margin:      0 0 0.5rem 0;
}

.project-date {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--pr-text);
    margin:      0;
}

/* ── Two column layout ── */
.project-content-wrap {
    display: flex;
    gap:     3rem;
}

.project-main {
    flex:      0 0 48%;
    width:     48%;
    min-width: 0;
}

.project-sidebar {
    flex:      1;
    min-width: 0;
}

/* ── Carousel ── */
.project-carousel {
    position:      relative;
    border-radius: var(--pr-radius-lg);
    overflow:      hidden;
    background:    #f0f0f0;
    margin-bottom: 1.5rem;
}

.project-carousel-track {
    position: relative;
    width:    100%;
    height:   380px;
}

.project-carousel-slide {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity 0.4s ease;
    cursor:          zoom-in;
    pointer-events:  none;
}

.project-carousel-slide.is-active {
    opacity:        1;
    pointer-events: auto;
}

.project-carousel-slide img {
    width:           100%;
    height:          100%;
    object-fit:      contain;
    object-position: center;
    display:         block;
}

.project-carousel-zoom-hint {
    position:       absolute;
    bottom:         0.75rem;
    right:          0.75rem;
    background:     rgba(0,0,0,0.55);
    color:          #fff;
    font-size:      0.72rem;
    font-weight:    600;
    padding:        0.3em 0.65em;
    border-radius:  4px;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.2s;
}

.project-carousel-slide.is-active:hover .project-carousel-zoom-hint {
    opacity: 1;
}

.project-carousel-arrow {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    background:      rgba(0,0,0,0.35);
    border:          1px solid rgba(255,255,255,0.3);
    color:           #fff;
    font-size:       1.2rem;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         10;
    padding:         0;
    transition:      background 0.2s;
}

.project-carousel-arrow:hover { background: rgba(0,0,0,0.6); }
.project-carousel-arrow--prev { left:  0.75rem; }
.project-carousel-arrow--next { right: 0.75rem; }

.project-carousel-dots {
    position:  absolute;
    bottom:    0.75rem;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    gap:       0.4rem;
    z-index:   10;
}

.project-carousel-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    border:        2px solid rgba(255,255,255,0.7);
    background:    transparent;
    cursor:        pointer;
    padding:       0;
    transition:    background 0.2s, border-color 0.2s;
}

.project-carousel-dot.is-active {
    background:   #fff;
    border-color: #fff;
}

/* ── Lightbox ── */
.project-lightbox {
    display:         none;
    position:        fixed;
    inset:           0;
    z-index:         99999;
    background:      rgba(0,0,0,0.88);
    align-items:     center;
    justify-content: center;
    cursor:          zoom-out;
    padding:         1.5rem;
}

.project-lightbox.is-open { display: flex; }

.project-lightbox img {
    max-width:     90vw;
    max-height:    90vh;
    object-fit:    contain;
    border-radius: var(--pr-radius-lg);
    box-shadow:    0 8px 48px rgba(0,0,0,0.6);
    cursor:        default;
}

.project-lightbox-close {
    position:        absolute;
    top:             1rem;
    right:           1rem;
    background:      rgba(255,255,255,0.15);
    border:          1px solid rgba(255,255,255,0.3);
    color:           #fff;
    font-size:       1.4rem;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    transition:      background 0.2s;
}

.project-lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ── Description ── */
.project-description {
    font-size:     16px;
    line-height:   1.7;
    color:         var(--pr-text);
    margin-bottom: 1.5rem;
}

.project-description p { margin: 0 0 1rem 0; }

/* ── Detail rows ── */
.project-detail-row {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    padding:        0.75rem 0;
    border-bottom:  1px solid var(--pr-border);
    margin-bottom:  0.5rem;
}

.project-detail-label {
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--pr-accent-dark);
}

.project-detail-value {
    font-size:   0.95rem;
    color:       var(--pr-text);
    line-height: 1.5;
}

/* ── Funding progress ── */
.project-funding {
    background:    var(--pr-bg-light);
    border:        1px solid var(--pr-border);
    border-radius: var(--pr-radius-lg);
    padding:       1.25rem;
    margin-bottom: 1.5rem;
}

.project-funding-bar-wrap {
    width:         100%;
    height:        12px;
    background:    #e0e0e0;
    border-radius: 99px;
    overflow:      hidden;
    margin-bottom: 0.75rem;
}

.project-funding-bar {
    height:        100%;
    background:    linear-gradient(90deg, var(--pr-accent-dark), var(--pr-accent));
    border-radius: 99px;
    transition:    width 0.6s ease;
    min-width:     4px;
}

.project-funding-meta {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    margin-bottom:   1rem;
}

.project-funding-raised,
.project-funding-goal {
    display:        flex;
    flex-direction: column;
    gap:            0.1rem;
    font-size:      1.1rem;
    font-weight:    700;
    color:          var(--pr-text);
}

.project-funding-raised small,
.project-funding-goal small {
    font-size:   0.72rem;
    font-weight: 500;
    color:       var(--pr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.project-funding-pct {
    font-size:   1.4rem;
    font-weight: 800;
    color:       var(--pr-accent-dark);
}

.project-btn--give {
    display:         block;
    text-align:      center;
    background:      var(--pr-accent-dark);
    color:           #fff !important;
    padding:         0.65rem 1.5rem;
    border-radius:   var(--pr-radius);
    font-weight:     700;
    font-size:       0.95rem;
    text-decoration: none;
    transition:      background 0.2s;
    border:          2px solid #004f80;
}

.project-btn--give:hover {
    background:      #005a8e;
    text-decoration: none;
    color:           #fff !important;
}

/* ── Contacts ── */
.project-contacts {
    margin-bottom: 1.5rem;
}

.project-contacts-heading {
    font-size:      0.8rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--pr-accent-dark);
    margin:         0 0 0.75rem 0;
}

.project-contact-card {
    display:       flex;
    gap:           0.75rem;
    align-items:   center;
    padding:       0.75rem 0;
    border-bottom: 1px solid var(--pr-border);
}

.project-contact-card:last-child { border-bottom: none; }

.project-contact-photo img {
    width:         52px;
    height:        52px;
    object-fit:    cover;
    border-radius: 50%;
    display:       block;
}

.project-contact-info {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
}

.project-contact-name {
    font-weight:     700;
    font-size:       0.95rem;
    color:           var(--pr-text);
    text-decoration: none;
}

.project-contact-name:hover { color: var(--pr-accent-dark); }

.project-contact-title {
    font-size: 0.82rem;
    color:     var(--pr-text-muted);
}

.project-contact-email,
.project-contact-phone {
    font-size:       0.82rem;
    color:           var(--pr-accent);
    text-decoration: none;
}

.project-contact-email:hover,
.project-contact-phone:hover {
    text-decoration: underline;
    color:           var(--pr-accent-dark);
}

/* ── Registration ── */
.project-registration { margin-bottom: 1.5rem; }

.project-registration-heading {
    font-size:     1rem;
    font-weight:   700;
    margin:        0 0 1rem 0;
    color:         var(--pr-text);
}

/* ── Buttons ── */
.project-btn {
    display:         inline-block;
    padding:         0.5rem 1.25rem;
    border-radius:   var(--pr-radius);
    font-weight:     700;
    font-size:       0.85rem;
    text-decoration: none;
    cursor:          pointer;
    transition:      background 0.2s, color 0.2s;
    border:          2px solid transparent;
}

.project-btn--primary {
    background: var(--pr-accent-dark);
    color:      #fff !important;
    border:     2px solid #004f80;
}

.project-btn--primary:hover {
    background:      #005a8e;
    color:           #fff !important;
    text-decoration: none;
}

.project-btn--full {
    display:    block;
    text-align: center;
    width:      100%;
}

/* ── File downloads ── */
.project-files {
    border-top:    1px solid var(--pr-border);
    padding-top:   2rem;
    margin-top:    1rem;
}

.project-files-heading {
    font-size:      0.85rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--pr-text-muted);
    margin:         0 0 0.75rem 0;
}

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

.project-file-link {
    display:         flex;
    align-items:     center;
    gap:             0.6rem;
    padding:         0.65rem 0.85rem;
    background:      var(--pr-bg-light);
    border:          1px solid var(--pr-border);
    border-radius:   var(--pr-radius);
    margin-bottom:   0.5rem;
    text-decoration: none;
    color:           var(--pr-text);
    font-weight:     500;
    font-size:       0.95rem;
    transition:      border-color 0.2s, background 0.2s;
}

.project-file-link:hover {
    border-color:    var(--pr-accent);
    background:      #f0f8ff;
    color:           var(--pr-accent-dark);
    text-decoration: none;
}

.project-file-ext {
    background:     var(--pr-accent-dark);
    color:          #fff;
    font-size:      0.65rem;
    font-weight:    700;
    padding:        0.15em 0.4em;
    border-radius:  3px;
    letter-spacing: 0.05em;
    flex-shrink:    0;
}

/* ════════════════════════════════════════════════
   ARCHIVE / PROJECTS LIST PAGE
   ════════════════════════════════════════════════ */

.projects-archive-page {
    width:      100%;
    max-width:  100%;
    padding:    2rem 5%;
    box-sizing: border-box;
}

.projects-archive-header { margin-bottom: 2rem; }

.projects-archive-title {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--pr-text);
    margin:      0;
}

/* ── Status group ── */
.projects-status-group { margin-bottom: 3rem; }

.projects-status-heading {
    font-size:      1.1rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin:         0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom:  2px solid var(--pr-border);
    color:          var(--pr-text);
}

.projects-status-heading.project-status--in-progress {
    color:        var(--pr-accent-dark);
    border-color: var(--pr-accent-dark);
}

.projects-status-heading.project-status--planning {
    color:        #b45309;
    border-color: #f59e0b;
}

.projects-status-heading.project-status--completed {
    color:        #059669;
    border-color: #10b981;
}

/* ── Project cards ── */
.projects-list {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.project-card {
    background:    #f4f4f4;
    border-radius: var(--pr-radius-lg);
    overflow:      hidden;
    transition:    box-shadow 0.2s, transform 0.2s;
}

.project-card:hover {
    box-shadow: var(--pr-shadow-hover);
    transform:  translateY(-2px);
}

.project-card-link {
    display:         flex;
    text-decoration: none !important;
    color:           inherit;
    align-items:     stretch;
    min-height:      200px;
}

.project-card-link * { text-decoration: none !important; }

.project-card-image {
    flex:            0 0 360px;
    width:           360px;
    overflow:        hidden;
    flex-shrink:     0;
    background:      #f0f0f0;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.project-card-image img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}

.project-card-image-placeholder {
    width:      100%;
    height:     100%;
    min-height: 200px;
    background: #ddd;
}

.project-card-content {
    flex:           1;
    padding:        1.5rem 1.75rem;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            0.4rem;
}

.project-card-category span {
    display:        inline-block;
    background:     var(--pr-accent);
    color:          #fff;
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding:        0.2em 0.65em;
    border-radius:  4px;
    margin-right:   0.3rem;
}

.project-card-title {
    font-size:   1.35rem;
    font-weight: 700;
    color:       var(--pr-text);
    margin:      0;
    line-height: 1.25;
}

.project-card:hover .project-card-title { color: var(--pr-accent-dark); }

.project-card-subtitle {
    font-size:   0.9rem;
    color:       var(--pr-text-muted);
    margin:      0;
}

.project-card-date {
    font-size:   1.05rem;
    font-weight: 600;
    color:       var(--pr-text);
    margin:      0;
}

.project-card-excerpt {
    font-size:          0.95rem;
    color:              var(--pr-text);
    margin:             0.25rem 0 0 0;
    line-height:        1.6;
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* ── Card funding bar ── */
.project-card-funding {
    margin-top: 0.5rem;
}

.project-card-funding-bar-wrap {
    width:         100%;
    height:        8px;
    background:    #e0e0e0;
    border-radius: 99px;
    overflow:      hidden;
    margin-bottom: 0.35rem;
}

.project-card-funding-bar {
    height:        100%;
    background:    linear-gradient(90deg, var(--pr-accent-dark), var(--pr-accent));
    border-radius: 99px;
    min-width:     4px;
}

.project-card-funding-label {
    font-size:  0.78rem;
    color:      var(--pr-text-muted);
    font-weight: 500;
}

/* ── Card buttons ── */
.project-card-actions {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         0.75rem;
    margin-top:  0.5rem;
}

.project-btn--view-more {
    background:  transparent;
    color:       var(--pr-accent-dark) !important;
    border:      2px solid var(--pr-accent-dark);
}

.project-btn--view-more:hover {
    background:      var(--pr-accent-dark);
    color:           #fff !important;
    text-decoration: none;
}

.project-btn--dark {
    background: var(--pr-accent-dark);
    color:      #fff !important;
    border:     2px solid #004f80;
}

.project-btn--dark:hover {
    background:      #005a8e;
    color:           #fff !important;
    text-decoration: none;
}

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .project-content-wrap {
        flex-direction: column;
        gap:            2rem;
    }

    .project-main {
        flex:  0 0 auto;
        width: 100%;
    }

    .project-card-image {
        flex:  0 0 260px;
        width: 260px;
    }
}

@media (max-width: 600px) {
    .project-body { padding: 1.5rem 1rem; }

    .project-carousel-track { height: 260px; }

    .project-card-link {
        flex-direction: column;
        min-height:     unset;
    }

    .project-card-image {
        flex:   0 0 auto;
        width:  100%;
        height: 200px;
    }

    .project-card-content { padding: 1rem 1.25rem; }

    .projects-archive-page { padding: 1.5rem 1rem; }
}