/* =========================================================
   THE HALL OF VICTORY
   Praise Aflame™ Ministries
   File: /armour/css/hall-of-victory.css
========================================================= */


/* =========================================================
   1. ROOT COLOURS
========================================================= */

:root {
    --victory-black: #070707;
    --victory-black-soft: #0d0b08;
    --victory-panel: #15110b;
    --victory-panel-light: #1d170e;

    --victory-gold: #d6ad43;
    --victory-gold-light: #f4d87a;
    --victory-gold-bright: #ffe6a0;
    --victory-bronze: #8c6426;
    --victory-dark-gold: #6b4919;

    --victory-text: #f6f0df;
    --victory-text-soft: #d7cdb7;
    --victory-muted: #aa9d84;

    --victory-line: rgba(214, 173, 67, 0.35);
    --victory-glow: rgba(214, 173, 67, 0.28);

    --victory-max-width: 1380px;
}


/* =========================================================
   2. GLOBAL RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top center,
            rgba(154, 103, 28, 0.17),
            transparent 36rem
        ),
        linear-gradient(
            180deg,
            #050505 0%,
            #0b0906 38%,
            #050505 100%
        );

    color: var(--victory-text);
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    line-height: 1.7;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
h1,
h2,
h3,
blockquote {
    margin-top: 0;
}


/* =========================================================
   3. ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--victory-gold-light);
    outline-offset: 4px;
}


/* =========================================================
   4. HERO
========================================================= */

.victory-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    border-bottom: 1px solid var(--victory-line);
}

.victory-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 22%;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(5, 5, 5, 0.88)
        );
}

.victory-hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* =========================================================
   5. NAVIGATION
========================================================= */

.victory-nav {
    position: relative;
    z-index: 10;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    width: 100%;
    padding: 16px 24px;

    background:
        linear-gradient(
            180deg,
            rgba(17, 14, 9, 0.98),
            rgba(5, 5, 5, 0.98)
        );

    border-top: 1px solid rgba(255, 225, 138, 0.08);
    border-bottom: 1px solid var(--victory-line);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.48);
}

.victory-nav-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 44px;
    padding: 9px 17px;

    color: var(--victory-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    border: 1px solid rgba(214, 173, 67, 0.24);
    border-radius: 6px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.01)
        );

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.victory-nav-link:hover,
.victory-nav-link.active {
    color: var(--victory-gold-bright);
    border-color: var(--victory-gold);

    background:
        linear-gradient(
            180deg,
            rgba(214, 173, 67, 0.18),
            rgba(118, 77, 18, 0.1)
        );

    box-shadow:
        0 0 18px rgba(214, 173, 67, 0.18),
        inset 0 0 12px rgba(214, 173, 67, 0.07);

    transform: translateY(-2px);
}


/* =========================================================
   6. MAIN PAGE
========================================================= */

.victory-page {
    width: 100%;
}


/* =========================================================
   7. SHARED SECTION WIDTH
========================================================= */

.victory-intro,
.victory-message,
.armour-gallery,
.hall-message,
.victory-callout {
    width: min(
        calc(100% - 40px),
        var(--victory-max-width)
    );

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   8. INTRODUCTION
========================================================= */

.victory-intro {
    padding: 82px 30px 70px;
    text-align: center;
}

.victory-eyebrow,
.victory-section-label {
    margin-bottom: 14px;

    color: var(--victory-gold-light);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.victory-intro h1 {
    margin-bottom: 20px;

    color: var(--victory-gold-bright);
    font-size: clamp(2.8rem, 7vw, 6.2rem);
    line-height: 0.96;
    letter-spacing: 0.025em;
    text-transform: uppercase;

    text-shadow:
        0 2px 0 #6d4716,
        0 5px 15px rgba(0, 0, 0, 0.9),
        0 0 32px rgba(214, 173, 67, 0.22);
}

.victory-subtitle {
    max-width: 880px;
    margin: 0 auto;

    color: var(--victory-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.75;
}

.victory-divider {
    width: 190px;
    height: 2px;
    margin: 38px auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--victory-gold),
            transparent
        );

    box-shadow: 0 0 14px var(--victory-glow);
}


/* =========================================================
   9. SCRIPTURE BLOCK
========================================================= */

.victory-scripture {
    position: relative;

    max-width: 920px;
    margin: 0 auto;
    padding: 35px 42px;

    color: var(--victory-text);
    font-size: clamp(1.08rem, 2vw, 1.36rem);
    font-style: italic;

    background:
        linear-gradient(
            145deg,
            rgba(214, 173, 67, 0.11),
            rgba(255, 255, 255, 0.02)
        );

    border: 1px solid rgba(214, 173, 67, 0.34);
    border-radius: 10px;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.4),
        inset 0 0 28px rgba(214, 173, 67, 0.045);
}

.victory-scripture::before {
    content: "“";
    position: absolute;
    top: -18px;
    left: 22px;

    color: rgba(244, 216, 122, 0.35);
    font-size: 5.5rem;
    line-height: 1;
}

.victory-scripture p {
    margin-bottom: 18px;
}

.victory-scripture cite {
    display: block;

    color: var(--victory-gold-light);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* =========================================================
   10. SHARED SECTION HEADINGS
========================================================= */

.victory-section-heading {
    margin-bottom: 42px;
    text-align: center;
}

.victory-section-heading h2,
.whole-armour-inner h2,
.hall-message h2,
.victory-callout h2 {
    margin-bottom: 18px;

    color: var(--victory-gold-bright);
    font-size: clamp(2rem, 4.8vw, 3.6rem);
    line-height: 1.15;

    text-shadow:
        0 2px 0 rgba(93, 58, 14, 0.8),
        0 8px 20px rgba(0, 0, 0, 0.75);
}

.victory-section-intro {
    max-width: 800px;
    margin: 0 auto;

    color: var(--victory-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.05rem;
}


/* =========================================================
   11. WHY THE ARMOUR MATTERS
========================================================= */

.victory-message {
    padding: 70px 30px;
    border-top: 1px solid rgba(214, 173, 67, 0.13);
}

.victory-message-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.victory-message-content p {
    margin: 0;
    padding: 28px;

    color: var(--victory-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.75;

    background:
        linear-gradient(
            145deg,
            rgba(214, 173, 67, 0.08),
            rgba(255, 255, 255, 0.015)
        );

    border: 1px solid rgba(214, 173, 67, 0.19);
    border-radius: 8px;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        inset 0 0 20px rgba(255, 220, 120, 0.025);
}


/* =========================================================
   12. ARMOUR GALLERY
========================================================= */

.armour-gallery {
    padding: 78px 30px 90px;
}

.armour-exhibit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
}


/* =========================================================
   13. EXHIBIT CARDS
========================================================= */

.armour-exhibit {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            150deg,
            rgba(35, 27, 15, 0.97),
            rgba(10, 9, 7, 0.99)
        );

    border: 1px solid rgba(214, 173, 67, 0.28);
    border-radius: 12px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.48),
        inset 0 0 34px rgba(214, 173, 67, 0.025);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.armour-exhibit::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 225, 150, 0.08) 48%,
            transparent 72%
        );

    transform: translateX(-110%);
    transition: transform 0.75s ease;
}

.armour-exhibit:hover {
    transform: translateY(-8px);
    border-color: rgba(244, 216, 122, 0.58);

    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.55),
        0 0 26px rgba(214, 173, 67, 0.13),
        inset 0 0 34px rgba(214, 173, 67, 0.04);
}

.armour-exhibit:hover::before {
    transform: translateX(110%);
}

.armour-exhibit-image-link {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;

    background: #060606;
    border-bottom: 1px solid rgba(214, 173, 67, 0.22);
}

.armour-exhibit-image-link::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 58%,
            rgba(7, 7, 7, 0.84)
        );

    pointer-events: none;
}

.armour-exhibit-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 0.55s ease,
        filter 0.55s ease;
}

.armour-exhibit:hover .armour-exhibit-image {
    transform: scale(1.045);
    filter: brightness(1.08) contrast(1.04);
}

.armour-exhibit-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    flex: 1;

    padding: 30px;
}

.armour-number {
    margin-bottom: 9px;

    color: var(--victory-gold);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.armour-exhibit h3 {
    margin-bottom: 16px;

    color: var(--victory-gold-bright);
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1.18;
}

.armour-exhibit-content > p:not(.armour-number):not(.armour-verse) {
    color: var(--victory-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.98rem;
}

.armour-verse {
    margin-bottom: 18px;
    padding: 17px 18px;

    color: #efe4c8;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.6;

    background: rgba(214, 173, 67, 0.065);
    border-left: 3px solid var(--victory-gold);
    border-radius: 0 6px 6px 0;
}

.armour-verse span {
    display: block;
    margin-top: 8px;

    color: var(--victory-gold-light);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* =========================================================
   14. EXHIBIT BUTTONS
========================================================= */

.armour-explore-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    min-height: 48px;
    margin-top: auto;
    padding: 11px 20px;

    color: #120d05;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.035em;

    background:
        linear-gradient(
            180deg,
            #f1d26f,
            #b98928
        );

    border: 1px solid #f5dc87;
    border-radius: 6px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(214, 173, 67, 0.16);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.armour-explore-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);

    box-shadow:
        0 13px 28px rgba(0, 0, 0, 0.42),
        0 0 24px rgba(214, 173, 67, 0.28);
}


/* =========================================================
   15. WHOLE ARMOUR SECTION
========================================================= */

.whole-armour-section {
    position: relative;
    padding: 105px 30px;

    background:
        linear-gradient(
            rgba(5, 5, 5, 0.88),
            rgba(5, 5, 5, 0.93)
        ),
        radial-gradient(
            circle at center,
            rgba(195, 133, 38, 0.22),
            transparent 42rem
        );

    border-top: 1px solid var(--victory-line);
    border-bottom: 1px solid var(--victory-line);
}

.whole-armour-inner {
    width: min(100%, 960px);
    margin: 0 auto;
    text-align: center;
}

.whole-armour-inner > p:not(.victory-section-label) {
    color: var(--victory-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.06rem;
}

.whole-armour-inner blockquote {
    margin: 38px auto 0;
    padding: 30px 36px;

    color: var(--victory-text);
    font-size: 1.17rem;
    font-style: italic;

    background: rgba(214, 173, 67, 0.07);
    border: 1px solid rgba(214, 173, 67, 0.26);
    border-radius: 8px;
}

.whole-armour-inner blockquote p {
    margin-bottom: 13px;
}

.whole-armour-inner cite {
    color: var(--victory-gold-light);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}


/* =========================================================
   16. HALL MESSAGE
========================================================= */

.hall-message {
    padding: 95px 30px;
}

.hall-message-content {
    max-width: 970px;
    margin: 0 auto;
    padding: 48px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(214, 173, 67, 0.09),
            rgba(255, 255, 255, 0.015)
        );

    border: 1px solid rgba(214, 173, 67, 0.3);
    border-radius: 12px;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.42),
        inset 0 0 40px rgba(214, 173, 67, 0.035);
}

.hall-message-content p:not(.victory-section-label) {
    color: var(--victory-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.03rem;
}

.hall-message-highlight {
    margin: 28px 0 0;
    padding-top: 26px;

    color: var(--victory-gold-bright) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem) !important;
    font-weight: 700;

    border-top: 1px solid rgba(214, 173, 67, 0.3);
}


/* =========================================================
   17. CALL TO ACTION
========================================================= */

.victory-callout {
    padding: 70px 30px 105px;
    text-align: center;
}

.victory-callout > p:not(.victory-section-label) {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;

    color: var(--victory-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.03rem;
}

.victory-button-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 34px;
}

.victory-primary-btn,
.victory-secondary-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 52px;
    padding: 12px 24px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.035em;

    border-radius: 6px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.victory-primary-btn {
    color: #120d05;

    background:
        linear-gradient(
            180deg,
            #f2d574,
            #b88626
        );

    border: 1px solid #f7df91;

    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.4),
        0 0 18px rgba(214, 173, 67, 0.16);
}

.victory-secondary-btn {
    color: var(--victory-gold-light);

    background:
        rgba(214, 173, 67, 0.055);

    border: 1px solid rgba(214, 173, 67, 0.45);
}

.victory-primary-btn:hover,
.victory-secondary-btn:hover {
    transform: translateY(-3px);
}

.victory-primary-btn:hover {
    box-shadow:
        0 15px 34px rgba(0, 0, 0, 0.46),
        0 0 28px rgba(214, 173, 67, 0.26);
}

.victory-secondary-btn:hover {
    color: var(--victory-gold-bright);
    background: rgba(214, 173, 67, 0.12);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(214, 173, 67, 0.13);
}


/* =========================================================
   18. FOOTER
========================================================= */

.victory-footer {
    padding: 48px 24px;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #080705,
            #030303
        );

    border-top: 1px solid var(--victory-line);
}

.victory-footer-inner {
    width: min(100%, 1000px);
    margin: 0 auto;
}

.victory-footer-brand {
    margin-bottom: 4px;

    color: var(--victory-gold-light);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.victory-footer-message {
    color: var(--victory-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.88rem;
}

.victory-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px 22px;

    margin: 26px 0;
}

.victory-footer-links a {
    color: var(--victory-text-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.82rem;

    transition: color 0.2s ease;
}

.victory-footer-links a:hover {
    color: var(--victory-gold-light);
}

.victory-copyright {
    margin-bottom: 0;

    color: var(--victory-muted);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem;
}


/* =========================================================
   19. TABLET
========================================================= */

@media (max-width: 1000px) {

    .victory-message-content {
        grid-template-columns: 1fr;
    }

    .armour-exhibit-grid {
        gap: 26px;
    }

    .armour-exhibit-content {
        padding: 25px;
    }

    .hall-message-content {
        padding: 38px;
    }
}


/* =========================================================
   20. MOBILE AND SMALL TABLET
========================================================= */

@media (max-width: 760px) {

    .victory-nav {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 13px 14px;

        scrollbar-width: thin;
        scrollbar-color:
            var(--victory-gold)
            rgba(255, 255, 255, 0.04);
    }

    .victory-nav-link {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 8px 14px;
        font-size: 0.7rem;
    }

    .victory-intro {
        padding: 58px 19px 52px;
    }

    .victory-intro h1 {
        font-size: clamp(2.35rem, 13vw, 4rem);
    }

    .victory-scripture {
        padding: 29px 22px;
    }

    .victory-message,
    .armour-gallery,
    .hall-message,
    .victory-callout {
        width: min(calc(100% - 24px), var(--victory-max-width));
        padding-left: 6px;
        padding-right: 6px;
    }

    .victory-message {
        padding-top: 54px;
        padding-bottom: 52px;
    }

    .victory-message-content p {
        padding: 23px;
    }

    .armour-gallery {
        padding-top: 60px;
        padding-bottom: 70px;
    }

    .armour-exhibit-grid {
        grid-template-columns: 1fr;
    }

    .armour-exhibit-content {
        padding: 24px 21px 26px;
    }

    .armour-exhibit h3 {
        font-size: 1.65rem;
    }

    .whole-armour-section {
        padding: 74px 19px;
    }

    .whole-armour-inner blockquote {
        padding: 25px 21px;
    }

    .hall-message {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .hall-message-content {
        padding: 32px 21px;
    }

    .victory-callout {
        padding-top: 48px;
        padding-bottom: 80px;
    }

    .victory-button-group {
        flex-direction: column;
        align-items: stretch;
    }

    .victory-primary-btn,
    .victory-secondary-btn {
        width: 100%;
    }
}


/* =========================================================
   21. VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .victory-hero-image {
        min-height: 220px;
        object-fit: cover;
    }

    .victory-eyebrow,
    .victory-section-label {
        font-size: 0.67rem;
        letter-spacing: 0.17em;
    }

    .victory-subtitle,
    .victory-section-intro {
        font-size: 0.95rem;
    }

    .victory-scripture {
        font-size: 1rem;
    }

    .victory-section-heading h2,
    .whole-armour-inner h2,
    .hall-message h2,
    .victory-callout h2 {
        font-size: 1.85rem;
    }

    .armour-exhibit-image-link {
        aspect-ratio: 4 / 3;
    }
}


/* =========================================================
   22. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}