/* ==========================================================================
   Component Base Styles
   File: css/components/base.css
   Structural rules shared across all template contexts.
   No colours, no typography, no decorative values here.
   ========================================================================== */

/* ==========================================================================
   Template Wrapper
   ========================================================================== */
.site-main.template-campaign {
    width: 100%;
}


/* ==========================================================================
   Feature Highlight
   ========================================================================== */
.feature-highlight {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

.feature-highlight-text {
    flex: 1 1 300px;
    min-width: 0;
}

.feature-highlight .feature-highlight-heading {
    font-family: var(--font-family-secondary);
    font-size: clamp(1.75rem, 3vw + 0.5rem, 2.2rem);
    color: var(--color-blue-dark);
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.feature-highlight .feature-highlight-description {
    margin: 10px 0 0 0;
    font-family: var(--font-family-primary);
    font-size: var(--copy-size-standard);
    line-height: 1.5;
    color: var(--color-black);
    font-weight: 400;
}

.feature-highlight-image {
    flex: 1 1 300px;
    position: relative;
    width: 100%;
    padding-top: 50px;
    min-width: 0;
}

.feature-img-uploaded {
    width: 90%;
    aspect-ratio: 1.4 / 1;
    object-fit: cover;
    border-top-right-radius: 90px;
    border-top-left-radius: 10px;
    display: block;
}

.feature-highlight-image .feature-shape {
    position: absolute;
    top: 0;
    right: 0;
    width: 90%;
    height: auto;
    z-index: -1;
}

/* ── Mobile — always stack ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .feature-highlight {
        flex-direction: column;
        align-items: flex-start;
    }

    .feature-highlight-text,
    .feature-highlight-image {
        flex-basis: 100%;
        max-width: 100%;
    }

    .feature-img-uploaded {
        border-top-right-radius: 60px;
    }
}



/* ==========================================================================
   Important Announcement
   ========================================================================== */
.announcement {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px 20px;
}

.announcement .announcement-heading {
    font-family: var(--font-family-primary);
    font-size: 1.5rem;
    color: var(--color-rose-medium);
    font-weight: 600;
    margin: 0;
    padding: 0;
    max-width: var(--component-max-width);
}

.announcement .announcement-text {
    font-weight: 500;
    margin: 10px 0 0 0;
    padding: 0;
    max-width: 900px;
    font-family: var(--font-family-primary);
    font-size: var(--copy-size-standard);
    line-height: 1.5;
}

/* ==========================================================================
   Hero Video
   ========================================================================== */
.campaign-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.campaign-hero-container {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ==========================================================================
   CTA Block
   ========================================================================== */
.campaign-cta-container {
    max-width: var(--component-max-width);
    margin: 50px auto;
    padding: 0 var(--component-padding-inline);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ==========================================================================
   Infographic / Stats
   ========================================================================== */
.campaign-infographic-container {
    max-width: var(--component-max-width);
    margin: 0 auto;
    padding: 0 var(--component-padding-inline);
}

.infographic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.stat-card {
    display: flex;
    align-items: stretch;
    gap: var(--space-l);
    padding: var(--space-l);
}

.stat-icon {
    flex: 0 0 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.icon-placeholder {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.icon-placeholder svg {
    width: 40px;
    height: 40px;
}

.stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ==========================================================================
   Photo Cards
   ========================================================================== */
.campaign-photo-cards-container {
    max-width: var(--component-max-width);
    margin: auto;
    padding: 80px var(--component-padding-inline) 120px;
}

.photo-cards-content {
    width: 100%;
}

/* ==========================================================================
   Photo Text CTAs
   ========================================================================== */
.ptc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    max-width: var(--component-max-width);
    padding: 0 var(--component-padding-inline);
    margin: 0 auto;
}

.ptc-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px;
}

.ptc-image {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.ptc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.campaign-photo-text-ctas .btn-sacomms {
    max-width: max-content;
}

/* ==========================================================================
   Text Blocks
   ========================================================================== */
.campaign-text-blocks-container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 var(--component-padding-inline);
}

.text-blocks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl) var(--space-2xl);
}

.text-block {
    display: block;
    padding: 0;
    background-color: transparent;
    text-decoration: none;
}

.text-block.has-link {
    cursor: pointer;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

.text-block.has-link:hover {
    opacity: 0.8;
}

.text-block.has-link:focus {
    outline: 2px solid var(--color-medium-blue);
    outline-offset: 4px;
}

.text-block-arrow {
    display: inline;
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    margin-left: 4px;
    vertical-align: middle;
}

.text-block.has-link:hover .text-block-arrow {
    transform: translateX(3px);
}

/* ==========================================================================
   Testimonial
   ========================================================================== */
.campaign-testimonial-container {
    max-width: var(--component-max-width);
    margin: 0 auto;
    padding: 0 var(--component-padding-inline);
}

.testimonial-image-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
}

.testimonial-bg-rectangle {
    position: absolute;
    bottom: -25px;
    left: -25px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.testimonial-image {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.testimonial-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.testimonial-attribution {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ==========================================================================
   Button Component
   Base: white bg, 1px black border, rounded pill, primary font, regular weight.
   Size:  .btn-sacomms--regular  |  .btn-sacomms--sm
   Hover: .btn-sacomms--gold     |  .btn-sacomms--blue
   ========================================================================== */

a.btn-sacomms {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family-primary);
    font-weight: var(--fw-regular);
    text-decoration: none !important;
    color: var(--color-black) !important;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: 999px;
    cursor: pointer;
}

/* ── Sizes ─────────────────────────────────────────────────────────────────── */
a.btn-sacomms.btn-sacomms--regular {
    padding: 0.7rem 1.8rem;
    font-size: 1rem;
    text-align: center;
}

a.btn-sacomms.btn-sacomms--sm {
    padding: 0.6rem 1rem;
    font-size: 0.87rem;
    text-align: center;
}

/* ── Focus (shared) ────────────────────────────────────────────────────────── */
a.btn-sacomms:focus-visible {
    outline: 2px solid var(--color-berkeley-blue);
    outline-offset: 2px;
}

/* ── Shared hover underline ────────────────────────────────────────────────── */
a.btn-sacomms:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    border: 1px solid var(--color-black) !important;
}

/* ── Gold hover variant ────────────────────────────────────────────────────── */
a.btn-sacomms.btn-sacomms--gold:hover {
    background-color: #FFE18D;
    border: 1px solid var(--color-black);
    color: var(--color-black);
}

a.btn-sacomms.btn-sacomms--gold:active {
    background-color: var(--color-california-gold);
    color: var(--color-black);
    border: 1px solid var(--color-black);
}

/* ── Blue hover variant ────────────────────────────────────────────────────── */
a.btn-sacomms.btn-sacomms--blue:hover {
    background-color: #CFE8FF;
    color: var(--color-black);
    border: 1px solid var(--color-black);
}

a.btn-sacomms.btn-sacomms--blue:active {
    background-color: var(--color-berkeley-blue);
    color: var(--color-white);
    border: 1px solid var(--color-black);
}

/* ── Button alignment wrapper ──────────────────────────────────────────────── */
.sacomms-button-wrap {
    display: flex;
}

.sacomms-button-align-left {
    justify-content: flex-start;
}

.sacomms-button-align-center {
    justify-content: center;
}

.sacomms-button-align-right {
    justify-content: flex-end;
}

/* ── Berkeley Blue filled variant ──────────────────────────────────────────── */
a.btn-sacomms.btn-sacomms--berkeley {
    background-color: var(--color-berkeley-blue);
    color: var(--color-white) !important;
    border: 1px solid var(--color-black);
}

a.btn-sacomms.btn-sacomms--berkeley:hover {
    background-color: #010133;
    color: var(--color-white);
    border: 1px solid var(--color-black);
}

a.btn-sacomms.btn-sacomms--berkeley:active {
    background-color: #010133;
    color: var(--color-white);
    border: 1px solid var(--color-black);
}

a.btn-sacomms.btn-sacomms--berkeley:focus-visible {
    outline: 2px solid var(--color-california-gold);
    outline-offset: 2px;
}