/**
 * Homepage CTA Component Stylesheet
 * Modern Campus CMS - HCCC Implementation
 * Version: 2.0.1 - Performance Optimized
 *
 * PERFORMANCE OPTIMIZATIONS (v2.0.1):
 * - contain: layout paint for rendering isolation
 * - aspect-ratio for CLS prevention on image containers
 * - Specific transition properties (not "all") to prevent resize lag
 * - Removed content-visibility to prevent "pop-in" for above-fold content
 * - Removed will-change on static elements to save GPU memory
 * - Optimized for Core Web Vitals (LCP, CLS, FID)
 *
 * A streamlined three-column call-to-action component designed to consolidate
 * enrollment CTAs, news/announcements, and pathway information.
 *
 * Features:
 * - 6 HCCC institutional themes
 * - 4 layout variations (three-column, two-column, stacked, fifty-fifty)
 * - 4 spacing options
 * - Responsive design (mobile-first)
 * - WCAG 2.1 AA accessibility compliance
 * - CSS custom properties for easy theming
 *
 * Table of Contents:
 * 1. CSS Custom Properties
 * 2. Base Component Styles
 * 3. Container & Grid Layout
 * 4. Header Styles
 * 5. Column Styles
 * 6. Icon Styles
 * 7. Link/Button Styles
 * 8. Theme Variations
 * 9. Layout Variations
 * 10. Spacing Variations
 * 11. Responsive Styles
 * 12. Accessibility
 * 13. Print Styles
 */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
    /* --------------------------------
       Color System
       -------------------------------- */
    /* Default theme */
    --hcta-bg: #ffffff;
    --hcta-color: #333333;
    --hcta-heading-color: #1a1a1a;
    --hcta-subheading-color: #666666;
    --hcta-column-bg: #f8f9fa;
    --hcta-column-border: #e9ecef;
    --hcta-icon-bg: #006366;
    --hcta-icon-color: #ffffff;

    /* HCCC Brand Colors */
    --hcta-hccc-teal: #006366;
    --hcta-hccc-teal-dark: #00393D;
    --hcta-hccc-blue: #2a2a86;
    --hcta-hccc-blue-dark: #080A39;
    --hcta-hccc-yellow: #ffe14f;
    --hcta-hccc-yellow-dark: #e6cb47;

    /* Anniversary Colors */
    --hcta-anniversary-black: #1a1a1a;
    --hcta-anniversary-gold: #d4af37;
    --hcta-anniversary-gold-dark: #b8960e;

    /* --------------------------------
       Layout System
       -------------------------------- */
    --hcta-container-max-width: 1200px;
    --hcta-container-padding: 48px 30px;
    --hcta-grid-gap: 30px;
    --hcta-column-padding: 30px;
    --hcta-column-border-radius: 12px;

    /* Full-width negative margins for Modern Campus CMS */
    --hcta-margin-full-width: 0 -55px 0 -52px;
    --hcta-margin-full-width-tablet: -11px -15px 0 -15px;
    --hcta-margin-full-width-mobile: 3px -35px 0 -15px;

    /* --------------------------------
       Typography System
       -------------------------------- */
    --hcta-font-family: "Montserrat", Arial, Helvetica, sans-serif;
    --hcta-heading-size: 32px;
    --hcta-heading-weight: 800;
    --hcta-subheading-size: 18px;
    --hcta-subheading-weight: 400;
    --hcta-column-title-size: 22px;
    --hcta-column-title-weight: 700;
    --hcta-description-size: 16px;
    --hcta-link-size: 16px;
    --hcta-link-weight: 600;

    /* --------------------------------
       Link/Button System
       -------------------------------- */
    /* Primary button */
    --hcta-btn-primary-bg: var(--hcta-hccc-teal);
    --hcta-btn-primary-color: #ffffff;
    --hcta-btn-primary-hover-bg: var(--hcta-hccc-teal-dark);
    --hcta-btn-primary-hover-color: #ffffff;

    /* Secondary button */
    --hcta-btn-secondary-bg: transparent;
    --hcta-btn-secondary-color: var(--hcta-hccc-teal);
    --hcta-btn-secondary-border: var(--hcta-hccc-teal);
    --hcta-btn-secondary-hover-bg: var(--hcta-hccc-teal);
    --hcta-btn-secondary-hover-color: #ffffff;

    /* Outline button */
    --hcta-btn-outline-bg: transparent;
    --hcta-btn-outline-color: var(--hcta-heading-color);
    --hcta-btn-outline-border: var(--hcta-column-border);
    --hcta-btn-outline-hover-bg: var(--hcta-column-bg);
    --hcta-btn-outline-hover-color: var(--hcta-heading-color);

    /* Link style */
    --hcta-link-color: var(--hcta-hccc-teal);
    --hcta-link-hover-color: var(--hcta-hccc-blue);

    /* Button shared properties */
    --hcta-btn-padding: 12px 24px;
    --hcta-btn-border-radius: 6px;
    --hcta-btn-border-width: 2px;

    /* --------------------------------
       Shadows
       -------------------------------- */
    --hcta-shadow-none: none;
    --hcta-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.08);
    --hcta-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
    --hcta-shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.16);
    --hcta-column-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --hcta-column-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* --------------------------------
       Transitions
       -------------------------------- */
    --hcta-transition-fast: 0.2s ease;
    --hcta-transition-normal: 0.3s ease;

    /* --------------------------------
       Accessibility
       -------------------------------- */
    --hcta-focus-color: var(--hcta-hccc-yellow);
    --hcta-focus-width: 3px;
    --hcta-focus-offset: 2px;
}

/* ==========================================================================
   2. Base Component Styles
   ========================================================================== */

.homepage-cta {
    position: relative;
    font-family: var(--hcta-font-family);
    background-color: var(--hcta-bg);
    color: var(--hcta-color);
    /* REMOVED: transition on base element causes slow resize */

    /* Performance: Isolate rendering layer */
    contain: layout style;
}

.homepage-cta--full-width {
    margin: var(--hcta-margin-full-width);
}

.homepage-cta--full-width .homepage-cta__container {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
}

.homepage-cta--full-width .homepage-cta__grid {
    max-width: none;
}

/* ==========================================================================
   3. Container & Grid Layout
   ========================================================================== */

.homepage-cta__container {
    max-width: var(--hcta-container-max-width);
    margin: 0 auto;
    padding: var(--hcta-container-padding);
}

.homepage-cta__grid {
    display: grid;
    gap: var(--hcta-grid-gap);
    width: 100%;
}

/* Four-column layout */
.homepage-cta--four-column .homepage-cta__container {
    max-width: 1400px;
}

.homepage-cta--four-column .homepage-cta__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.homepage-cta--four-column .homepage-cta__column {
    padding: 24px;
}

/* Three-column layout (default) */
.homepage-cta--three-column .homepage-cta__grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Two-column layout */
.homepage-cta--two-column .homepage-cta__grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Stacked layout */
.homepage-cta--stacked .homepage-cta__grid {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
}

/* ==========================================================================
   4. Header Styles
   ========================================================================== */

.homepage-cta__header {
    text-align: center;
    margin-bottom: 40px;
}

.homepage-cta__heading {
    margin: 0 0 12px 0;
    font-size: var(--hcta-heading-size);
    font-weight: var(--hcta-heading-weight);
    color: var(--hcta-heading-color);
    line-height: 1.2;
}

.homepage-cta__subheading {
    margin: 0;
    font-size: var(--hcta-subheading-size);
    font-weight: var(--hcta-subheading-weight);
    color: var(--hcta-subheading-color);
    line-height: 1.5;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   5. Column Styles
   ========================================================================== */

.homepage-cta__column {
    display: flex;
    flex-direction: column;
    background-color: var(--hcta-column-bg);
    border: 1px solid var(--hcta-column-border);
    border-radius: var(--hcta-column-border-radius);
    padding: var(--hcta-column-padding);
    box-shadow: var(--hcta-column-shadow);
    /* Only transition specific hover properties, not all properties */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.homepage-cta__column:hover {
    box-shadow: var(--hcta-column-shadow-hover);
    transform: translateY(-4px);
}

.homepage-cta__column-title {
    margin: 0 0 12px 0;
    font-size: var(--hcta-column-title-size);
    font-weight: var(--hcta-column-title-weight);
    color: var(--hcta-heading-color);
    line-height: 1.3;
}

.homepage-cta__column-description {
    margin: 0 0 16px 0;
    font-size: var(--hcta-description-size);
    color: var(--hcta-subheading-color);
    line-height: 1.6;
}

.homepage-cta__column-content {
    margin-bottom: 16px;
    line-height: 1.6;
}

.homepage-cta__column-content p {
    margin: 0 0 12px 0;
}

.homepage-cta__column-content ul,
.homepage-cta__column-content ol {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.homepage-cta__column-content li {
    margin-bottom: 6px;
}

.homepage-cta__column-image {
    margin-top: auto;
    padding-top: 16px;
}

.homepage-cta__column-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ==========================================================================
   6. Icon Styles
   ========================================================================== */

.homepage-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    font-size: 24px;
    color: var(--hcta-icon-color);
    background-color: var(--hcta-icon-bg);
    border-radius: 50%;
    /* Only transition transform for hover effect */
    transition: transform 0.3s ease;
}

.homepage-cta__column:hover .homepage-cta__icon {
    transform: scale(1.1);
}

/* Icon Style Variations */
.homepage-cta--icon-circle .homepage-cta__icon {
    border-radius: 50%;
}

.homepage-cta--icon-square .homepage-cta__icon {
    border-radius: 8px;
}

.homepage-cta--icon-rounded .homepage-cta__icon {
    border-radius: 12px;
}

.homepage-cta--icon-none .homepage-cta__icon {
    background: none;
    color: var(--hcta-icon-bg);
    width: auto;
    height: auto;
    font-size: 36px;
}

/* ==========================================================================
   6b. Shape Variations (Column Border Radius)
   ========================================================================== */

/* Square - No border radius on columns AND buttons */
.homepage-cta--shape-square .homepage-cta__column {
    border-radius: 0;
}

.homepage-cta--shape-square .homepage-cta__column-image img {
    border-radius: 0;
}

.homepage-cta--shape-square .homepage-cta__link--primary,
.homepage-cta--shape-square .homepage-cta__link--secondary,
.homepage-cta--shape-square .homepage-cta__link--outline {
    border-radius: 0;
}

/* Rounded - Default subtle rounding */
.homepage-cta--shape-rounded .homepage-cta__column {
    border-radius: 12px;
}

.homepage-cta--shape-rounded .homepage-cta__link--primary,
.homepage-cta--shape-rounded .homepage-cta__link--secondary,
.homepage-cta--shape-rounded .homepage-cta__link--outline {
    border-radius: 6px;
}

/* Soft - More pronounced rounding */
.homepage-cta--shape-soft .homepage-cta__column {
    border-radius: 20px;
}

.homepage-cta--shape-soft .homepage-cta__column-image img {
    border-radius: 12px;
}

.homepage-cta--shape-soft .homepage-cta__link--primary,
.homepage-cta--shape-soft .homepage-cta__link--secondary,
.homepage-cta--shape-soft .homepage-cta__link--outline {
    border-radius: 12px;
}

/* Pill - Maximum rounding */
.homepage-cta--shape-pill .homepage-cta__column {
    border-radius: 30px;
}

.homepage-cta--shape-pill .homepage-cta__column-image img {
    border-radius: 16px;
}

.homepage-cta--shape-pill .homepage-cta__link--primary,
.homepage-cta--shape-pill .homepage-cta__link--secondary,
.homepage-cta--shape-pill .homepage-cta__link--outline {
    border-radius: 50px;
}

/* ==========================================================================
   7. Link/Button Styles
   ========================================================================== */

.homepage-cta__links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.homepage-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--hcta-font-family);
    font-size: var(--hcta-link-size);
    font-weight: var(--hcta-link-weight);
    text-decoration: none;
    /* Only transition specific hover properties */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

/* Primary Button Style */
.homepage-cta__link--primary {
    justify-content: center;
    padding: var(--hcta-btn-padding);
    background-color: var(--hcta-btn-primary-bg);
    color: var(--hcta-btn-primary-color);
    border: var(--hcta-btn-border-width) solid transparent;
    border-radius: var(--hcta-btn-border-radius);
}

.homepage-cta__link--primary:hover,
.homepage-cta__link--primary:focus {
    background-color: var(--hcta-btn-primary-hover-bg);
    color: var(--hcta-btn-primary-hover-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Secondary Button Style */
.homepage-cta__link--secondary {
    justify-content: center;
    padding: var(--hcta-btn-padding);
    background-color: var(--hcta-btn-secondary-bg);
    color: var(--hcta-btn-secondary-color);
    border: var(--hcta-btn-border-width) solid var(--hcta-btn-secondary-border);
    border-radius: var(--hcta-btn-border-radius);
}

.homepage-cta__link--secondary:hover,
.homepage-cta__link--secondary:focus {
    background-color: var(--hcta-btn-secondary-hover-bg);
    color: var(--hcta-btn-secondary-hover-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Outline Button Style */
.homepage-cta__link--outline {
    justify-content: center;
    padding: var(--hcta-btn-padding);
    background-color: var(--hcta-btn-outline-bg);
    color: var(--hcta-btn-outline-color);
    border: var(--hcta-btn-border-width) solid var(--hcta-btn-outline-border);
    border-radius: var(--hcta-btn-border-radius);
}

.homepage-cta__link--outline:hover,
.homepage-cta__link--outline:focus {
    background-color: var(--hcta-btn-outline-hover-bg);
    color: var(--hcta-btn-outline-hover-color);
}

/* Link Style (text link with arrow) */
.homepage-cta__link--link {
    padding: 8px 0;
    color: var(--hcta-link-color);
    border-bottom: 1px solid transparent;
}

.homepage-cta__link--link:hover,
.homepage-cta__link--link:focus {
    color: var(--hcta-link-hover-color);
    border-bottom-color: var(--hcta-link-hover-color);
}

.homepage-cta__link--link .homepage-cta__link-arrow {
    font-size: 12px;
    transition: transform var(--hcta-transition-fast);
}

.homepage-cta__link--link:hover .homepage-cta__link-arrow {
    transform: translateX(4px);
}

/* Link Icon */
.homepage-cta__link-icon {
    font-size: 14px;
}

/* External Link Indicator */
.homepage-cta__link-external {
    font-size: 12px;
    opacity: 0.7;
}

/* ==========================================================================
   8. Theme Variations
   ========================================================================== */

/* --------------------------------
   Default Theme (Light)
   -------------------------------- */
.homepage-cta--default {
    --hcta-bg: #ffffff;
    --hcta-color: #333333;
    --hcta-heading-color: #1a1a1a;
    --hcta-column-bg: #f8f9fa;
    --hcta-column-border: #e9ecef;
}

.homepage-cta--default .homepage-cta__column-title {
    color: #1a1a1a;
}

.homepage-cta--default .homepage-cta__column-description {
    color: #555555;
}

/* --------------------------------
   HCCC Primary Theme (Teal)
   -------------------------------- */
.homepage-cta--hccc-primary {
    --hcta-bg: var(--hcta-hccc-teal);
    --hcta-color: #ffffff;
    --hcta-heading-color: #ffffff;
    --hcta-subheading-color: rgba(255, 255, 255, 0.9);
    --hcta-column-bg: rgba(255, 255, 255, 0.95);
    --hcta-column-border: rgba(255, 255, 255, 0.3);
    --hcta-icon-bg: var(--hcta-hccc-blue);
    --hcta-btn-primary-bg: var(--hcta-hccc-yellow);
    --hcta-btn-primary-color: #1a1a1a;
    --hcta-btn-primary-hover-bg: #ffffff;
    --hcta-btn-primary-hover-color: var(--hcta-hccc-teal);
    --hcta-btn-secondary-color: var(--hcta-hccc-teal);
    --hcta-btn-secondary-border: var(--hcta-hccc-teal);
    --hcta-link-color: var(--hcta-hccc-teal);
    --hcta-link-hover-color: var(--hcta-hccc-blue);
    --hcta-focus-color: var(--hcta-hccc-yellow);
}

.homepage-cta--hccc-primary .homepage-cta__column {
    color: #333333;
}

.homepage-cta--hccc-primary .homepage-cta__column-title {
    color: var(--hcta-hccc-teal);
}

.homepage-cta--hccc-primary .homepage-cta__column-description {
    color: #555555;
}

/* --------------------------------
   HCCC Secondary Theme (Blue)
   -------------------------------- */
.homepage-cta--hccc-secondary {
    --hcta-bg: var(--hcta-hccc-blue);
    --hcta-color: #ffffff;
    --hcta-heading-color: #ffffff;
    --hcta-subheading-color: rgba(255, 255, 255, 0.9);
    --hcta-column-bg: rgba(255, 255, 255, 0.95);
    --hcta-column-border: rgba(255, 255, 255, 0.3);
    --hcta-icon-bg: var(--hcta-hccc-teal);
    --hcta-btn-primary-bg: var(--hcta-hccc-yellow);
    --hcta-btn-primary-color: var(--hcta-hccc-blue);
    --hcta-btn-primary-hover-bg: #ffffff;
    --hcta-btn-primary-hover-color: var(--hcta-hccc-blue);
    --hcta-btn-secondary-color: var(--hcta-hccc-blue);
    --hcta-btn-secondary-border: var(--hcta-hccc-blue);
    --hcta-link-color: var(--hcta-hccc-blue);
    --hcta-link-hover-color: var(--hcta-hccc-teal);
    --hcta-focus-color: var(--hcta-hccc-yellow);
}

.homepage-cta--hccc-secondary .homepage-cta__column {
    color: #333333;
}

.homepage-cta--hccc-secondary .homepage-cta__column-title {
    color: var(--hcta-hccc-blue);
}

.homepage-cta--hccc-secondary .homepage-cta__column-description {
    color: #555555;
}

/* --------------------------------
   HCCC Accent Theme (Yellow highlights)
   -------------------------------- */
.homepage-cta--hccc-accent {
    --hcta-bg: #1a1a1a;
    --hcta-color: #ffffff;
    --hcta-heading-color: var(--hcta-hccc-yellow);
    --hcta-subheading-color: rgba(255, 255, 255, 0.9);
    --hcta-column-bg: #2a2a2a;
    --hcta-column-border: #3a3a3a;
    --hcta-icon-bg: var(--hcta-hccc-yellow);
    --hcta-icon-color: #1a1a1a;
    --hcta-btn-primary-bg: var(--hcta-hccc-yellow);
    --hcta-btn-primary-color: #1a1a1a;
    --hcta-btn-primary-hover-bg: #ffffff;
    --hcta-btn-primary-hover-color: #1a1a1a;
    --hcta-btn-secondary-color: var(--hcta-hccc-yellow);
    --hcta-btn-secondary-border: var(--hcta-hccc-yellow);
    --hcta-btn-secondary-hover-bg: var(--hcta-hccc-yellow);
    --hcta-btn-secondary-hover-color: #1a1a1a;
    --hcta-link-color: var(--hcta-hccc-yellow);
    --hcta-link-hover-color: #ffffff;
    --hcta-focus-color: var(--hcta-hccc-yellow);
}

.homepage-cta--hccc-accent .homepage-cta__column {
    color: #ffffff;
}

.homepage-cta--hccc-accent .homepage-cta__column-title {
    color: var(--hcta-hccc-yellow);
}

.homepage-cta--hccc-accent .homepage-cta__column-description {
    color: #cccccc;
}

/* --------------------------------
   Anniversary Theme (Black & Gold)
   -------------------------------- */
.homepage-cta--anniversary {
    --hcta-bg: var(--hcta-anniversary-black);
    --hcta-color: #ffffff;
    --hcta-heading-color: var(--hcta-anniversary-gold);
    --hcta-subheading-color: rgba(255, 255, 255, 0.9);
    --hcta-column-bg: #2a2a2a;
    --hcta-column-border: var(--hcta-anniversary-gold);
    --hcta-icon-bg: var(--hcta-anniversary-gold);
    --hcta-icon-color: var(--hcta-anniversary-black);
    --hcta-btn-primary-bg: var(--hcta-anniversary-gold);
    --hcta-btn-primary-color: var(--hcta-anniversary-black);
    --hcta-btn-primary-hover-bg: #ffffff;
    --hcta-btn-primary-hover-color: var(--hcta-anniversary-black);
    --hcta-btn-secondary-color: var(--hcta-anniversary-gold);
    --hcta-btn-secondary-border: var(--hcta-anniversary-gold);
    --hcta-btn-secondary-hover-bg: var(--hcta-anniversary-gold);
    --hcta-btn-secondary-hover-color: var(--hcta-anniversary-black);
    --hcta-link-color: var(--hcta-anniversary-gold);
    --hcta-link-hover-color: #ffffff;
    --hcta-focus-color: var(--hcta-anniversary-gold);
    --hcta-column-shadow: 0 4px 16px rgba(212, 175, 55, 0.15);
    --hcta-column-shadow-hover: 0 8px 32px rgba(212, 175, 55, 0.25);
}

.homepage-cta--anniversary .homepage-cta__column {
    color: #ffffff;
}

.homepage-cta--anniversary .homepage-cta__column-title {
    color: var(--hcta-anniversary-gold);
}

.homepage-cta--anniversary .homepage-cta__column-description {
    color: #cccccc;
}

.homepage-cta--anniversary .homepage-cta__heading {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(212, 175, 55, 0.2);
}

/* --------------------------------
   Anniversary Gold Theme
   -------------------------------- */
.homepage-cta--anniversary-gold {
    --hcta-bg: var(--hcta-anniversary-gold);
    --hcta-color: var(--hcta-anniversary-black);
    --hcta-heading-color: var(--hcta-anniversary-black);
    --hcta-subheading-color: rgba(26, 26, 26, 0.8);
    --hcta-column-bg: #ffffff;
    --hcta-column-border: var(--hcta-anniversary-black);
    --hcta-icon-bg: var(--hcta-anniversary-black);
    --hcta-icon-color: var(--hcta-anniversary-gold);
    --hcta-btn-primary-bg: var(--hcta-anniversary-black);
    --hcta-btn-primary-color: var(--hcta-anniversary-gold);
    --hcta-btn-primary-hover-bg: #333333;
    --hcta-btn-primary-hover-color: var(--hcta-anniversary-gold);
    --hcta-btn-secondary-color: var(--hcta-anniversary-black);
    --hcta-btn-secondary-border: var(--hcta-anniversary-black);
    --hcta-btn-secondary-hover-bg: var(--hcta-anniversary-black);
    --hcta-btn-secondary-hover-color: var(--hcta-anniversary-gold);
    --hcta-link-color: var(--hcta-anniversary-black);
    --hcta-link-hover-color: var(--hcta-hccc-blue);
    --hcta-focus-color: var(--hcta-anniversary-black);
}

.homepage-cta--anniversary-gold .homepage-cta__column {
    color: #333333;
}

.homepage-cta--anniversary-gold .homepage-cta__column-title {
    color: var(--hcta-anniversary-black);
}

.homepage-cta--anniversary-gold .homepage-cta__column-description {
    color: #555555;
}

/* ==========================================================================
   9. Layout Variations
   ========================================================================== */

/* Equal height columns - default behavior */
.homepage-cta__grid {
    align-items: stretch;
}

/* Centered columns (top-aligned content) */
.homepage-cta--align-top .homepage-cta__grid {
    align-items: start;
}

/* Center-aligned columns */
.homepage-cta--align-center .homepage-cta__grid {
    align-items: center;
}

/* ==========================================================================
   9b. Fifty-Fifty Layout
   ========================================================================== */

/* Split Container */
.homepage-cta__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    /* Ensure image stretches to match content height */
    align-items: stretch;
}

/* Content Side */
.homepage-cta__content-side {
    display: flex;
    align-items: stretch;
    padding: 40px;
    background-color: var(--hcta-column-bg);

    /* Stacking context: Ensure content appears above image when collapsed */
    position: relative;
    z-index: 2;
}

.homepage-cta__columns-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

/* Image Side - Performance Optimized */
.homepage-cta__image-side {
    position: relative;
    overflow: hidden;
    min-height: 400px;

    /* Performance: Reserve space to prevent CLS */
    aspect-ratio: 4 / 3;

    /* Performance: Isolate rendering layer */
    contain: layout paint;
    /* REMOVED: content-visibility causes "pop-in" for above-fold content */

    /* Stacking context: Ensure image stays below content when collapsed */
    z-index: 1;
}

.homepage-cta__image-side img,
.homepage-cta__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    /* REMOVED: will-change on static elements wastes GPU memory */
}

/* Columns within fifty-fifty layout */
.homepage-cta--fifty-fifty .homepage-cta__column {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 30px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.homepage-cta--fifty-fifty .homepage-cta__column:first-of-type {
    padding-left: 0;
}

.homepage-cta--fifty-fifty .homepage-cta__column:last-of-type {
    padding-right: 0;
}

.homepage-cta--fifty-fifty .homepage-cta__column:hover {
    transform: none;
    box-shadow: none;
}

/* Vertical Divider */
.homepage-cta__divider {
    width: 2px;
    min-height: 100%;
    align-self: stretch;
    background-color: #d0d0d0;
    margin: 0;
    flex-shrink: 0;
}

/* Image Position: Right (default) */
.homepage-cta--image-right .homepage-cta__split {
    grid-template-columns: 1fr 1fr;
}

.homepage-cta--image-right .homepage-cta__content-side {
    order: 1;
}

.homepage-cta--image-right .homepage-cta__image-side {
    order: 2;
}

/* Image Position: Left */
.homepage-cta--image-left .homepage-cta__split {
    grid-template-columns: 1fr 1fr;
}

.homepage-cta--image-left .homepage-cta__content-side {
    order: 2;
}

.homepage-cta--image-left .homepage-cta__image-side {
    order: 1;
}

/* Fifty-fifty theme adjustments */
.homepage-cta--fifty-fifty.homepage-cta--default .homepage-cta__divider {
    background-color: #d0d0d0;
}

.homepage-cta--fifty-fifty.homepage-cta--hccc-primary .homepage-cta__content-side {
    background-color: rgba(255, 255, 255, 0.98);
}

.homepage-cta--fifty-fifty.homepage-cta--hccc-primary .homepage-cta__divider {
    background-color: var(--hcta-hccc-teal);
}

.homepage-cta--fifty-fifty.homepage-cta--hccc-secondary .homepage-cta__content-side {
    background-color: rgba(255, 255, 255, 0.98);
}

.homepage-cta--fifty-fifty.homepage-cta--hccc-secondary .homepage-cta__divider {
    background-color: var(--hcta-hccc-blue);
}

.homepage-cta--fifty-fifty.homepage-cta--anniversary .homepage-cta__content-side {
    background-color: #2a2a2a;
}

.homepage-cta--fifty-fifty.homepage-cta--anniversary .homepage-cta__divider {
    background-color: var(--hcta-anniversary-gold);
}

.homepage-cta--fifty-fifty.homepage-cta--anniversary-gold .homepage-cta__content-side {
    background-color: #ffffff;
}

.homepage-cta--fifty-fifty.homepage-cta--anniversary-gold .homepage-cta__divider {
    background-color: var(--hcta-anniversary-black);
}

.homepage-cta--fifty-fifty.homepage-cta--hccc-accent .homepage-cta__content-side {
    background-color: #2a2a2a;
}

.homepage-cta--fifty-fifty.homepage-cta--hccc-accent .homepage-cta__divider {
    background-color: var(--hcta-hccc-yellow);
}

/* Full-width adjustments for fifty-fifty */
.homepage-cta--fifty-fifty.homepage-cta--full-width {
    margin-left: 0;
    margin-right: 0;
}

.homepage-cta--fifty-fifty.homepage-cta--full-width .homepage-cta__container {
    padding: 0;
    max-width: none;
}

.homepage-cta--fifty-fifty.homepage-cta--full-width .homepage-cta__header {
    padding: 40px 40px 20px 40px;
}

.homepage-cta--fifty-fifty.homepage-cta--full-width .homepage-cta__content-side {
    padding: 40px 30px 40px 40px;
}

/* ==========================================================================
   10. Spacing Variations
   ========================================================================== */

/* Compact spacing */
.homepage-cta--spacing-compact .homepage-cta__container {
    padding: 30px 20px;
}

.homepage-cta--spacing-compact .homepage-cta__grid {
    gap: 20px;
}

.homepage-cta--spacing-compact .homepage-cta__column {
    padding: 20px;
}

.homepage-cta--spacing-compact .homepage-cta__header {
    margin-bottom: 24px;
}

/* Standard spacing (default) */
.homepage-cta--spacing-standard .homepage-cta__container {
    padding: 48px 30px;
}

/* Spacious spacing */
.homepage-cta--spacing-spacious .homepage-cta__container {
    padding: 72px 40px;
}

.homepage-cta--spacing-spacious .homepage-cta__grid {
    gap: 40px;
}

.homepage-cta--spacing-spacious .homepage-cta__column {
    padding: 40px;
}

.homepage-cta--spacing-spacious .homepage-cta__header {
    margin-bottom: 56px;
}

/* Hero spacing */
.homepage-cta--spacing-hero .homepage-cta__container {
    padding: 96px 40px;
}

.homepage-cta--spacing-hero .homepage-cta__grid {
    gap: 48px;
}

/* ==========================================================================
   11. Shadow Variations
   ========================================================================== */

.homepage-cta--shadow-none {
    box-shadow: var(--hcta-shadow-none);
}

.homepage-cta--shadow-none .homepage-cta__column {
    box-shadow: none;
}

.homepage-cta--shadow-subtle {
    box-shadow: var(--hcta-shadow-subtle);
}

.homepage-cta--shadow-medium {
    box-shadow: var(--hcta-shadow-medium);
}

.homepage-cta--shadow-strong {
    box-shadow: var(--hcta-shadow-strong);
}

/* ==========================================================================
   12. Responsive Styles
   ========================================================================== */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    :root {
        --hcta-heading-size: 28px;
        --hcta-column-title-size: 20px;
        --hcta-grid-gap: 24px;
    }

    .homepage-cta--full-width {
        margin: var(--hcta-margin-full-width-tablet);
    }

    .homepage-cta--full-width .homepage-cta__container {
        padding-left: 30px;
        padding-right: 30px;
    }

    .homepage-cta--four-column .homepage-cta__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .homepage-cta--three-column .homepage-cta__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .homepage-cta--three-column .homepage-cta__column:last-child {
        grid-column: 1 / -1;
    }

    .homepage-cta__header {
        margin-bottom: 32px;
    }

    /* Fifty-fifty tablet adjustments */
    .homepage-cta__content-side {
        padding: 30px;
    }

    .homepage-cta__image-side {
        min-height: 350px;
        /* Remove aspect-ratio on tablet - let content determine height */
        aspect-ratio: unset;
        contain-intrinsic-size: unset;
    }

    /* Ensure image container stretches to match content */
    .homepage-cta__split {
        align-items: stretch;
    }

    .homepage-cta--fifty-fifty .homepage-cta__column {
        padding: 16px 24px;
    }

    .homepage-cta--fifty-fifty .homepage-cta__column:first-of-type {
        padding-left: 0;
    }

    .homepage-cta--fifty-fifty .homepage-cta__column:last-of-type {
        padding-right: 0;
    }

    .homepage-cta--fifty-fifty.homepage-cta--full-width .homepage-cta__header {
        padding: 30px 30px 0 30px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    :root {
        --hcta-heading-size: 24px;
        --hcta-subheading-size: 16px;
        --hcta-column-title-size: 18px;
        --hcta-column-padding: 24px;
        --hcta-grid-gap: 20px;
    }

    .homepage-cta--full-width {
        margin: var(--hcta-margin-full-width-mobile);
    }

    .homepage-cta--full-width .homepage-cta__container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .homepage-cta__container {
        padding: 30px 20px;
    }

    .homepage-cta--four-column .homepage-cta__grid,
    .homepage-cta--three-column .homepage-cta__grid,
    .homepage-cta--two-column .homepage-cta__grid {
        grid-template-columns: 1fr;
    }

    .homepage-cta--three-column .homepage-cta__column:last-child {
        grid-column: auto;
    }

    .homepage-cta__icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .homepage-cta__header {
        margin-bottom: 24px;
    }

    .homepage-cta__link {
        font-size: 14px;
    }

    .homepage-cta__link--primary,
    .homepage-cta__link--secondary,
    .homepage-cta__link--outline {
        padding: 10px 20px;
    }

    /* Disable hover transform on mobile */
    .homepage-cta__column:hover {
        transform: none;
    }

    /* Fifty-fifty mobile: Stack vertically with image on bottom */
    .homepage-cta--fifty-fifty .homepage-cta__split {
        grid-template-columns: 1fr;
    }

    .homepage-cta--image-right .homepage-cta__content-side,
    .homepage-cta--image-left .homepage-cta__content-side {
        order: 1;
    }

    .homepage-cta--image-right .homepage-cta__image-side,
    .homepage-cta--image-left .homepage-cta__image-side {
        order: 2;
    }

    .homepage-cta--fifty-fifty .homepage-cta__content-side {
        padding: 24px;
    }

    /* Stack columns vertically on mobile, with horizontal divider */
    .homepage-cta__columns-wrapper {
        flex-direction: column;
        gap: 0;
    }

    /* Convert vertical divider to horizontal on mobile */
    .homepage-cta--fifty-fifty .homepage-cta__divider {
        width: 100%;
        height: 2px;
        min-height: 2px;
        margin: 20px 0;
    }

    .homepage-cta--fifty-fifty .homepage-cta__column {
        padding: 16px 0;
    }

    .homepage-cta--fifty-fifty .homepage-cta__column:first-of-type,
    .homepage-cta--fifty-fifty .homepage-cta__column:last-of-type {
        padding-left: 0;
        padding-right: 0;
    }

    /* Image side on mobile - stacked layout uses fixed height */
    .homepage-cta__image-side {
        height: 250px;
        min-height: 250px;
        /* Restore aspect-ratio for stacked mobile layout */
        aspect-ratio: 16 / 9;
        contain-intrinsic-size: 0 250px;
    }

    .homepage-cta--fifty-fifty.homepage-cta--full-width .homepage-cta__header {
        padding: 20px 20px 0 20px;
    }
}

/* Small mobile (< 480px) */
@media (max-width: 479px) {
    .homepage-cta__container {
        padding: 24px 16px;
    }

    .homepage-cta__column {
        padding: 20px;
    }

    .homepage-cta__links {
        gap: 10px;
    }
}

/* ==========================================================================
   13. Accessibility
   ========================================================================== */

/* Focus indicators */
.homepage-cta__link:focus {
    outline: var(--hcta-focus-width) solid var(--hcta-focus-color);
    outline-offset: var(--hcta-focus-offset);
}

.homepage-cta__link:focus:not(:focus-visible) {
    outline: none;
}

.homepage-cta__link:focus-visible {
    outline: var(--hcta-focus-width) solid var(--hcta-focus-color);
    outline-offset: var(--hcta-focus-offset);
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .homepage-cta__column {
        border-width: 2px;
    }

    .homepage-cta__link--primary,
    .homepage-cta__link--secondary,
    .homepage-cta__link--outline {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .homepage-cta,
    .homepage-cta__column,
    .homepage-cta__link,
    .homepage-cta__icon {
        transition: none;
    }

    .homepage-cta__column:hover,
    .homepage-cta__link:hover {
        transform: none;
    }

    .homepage-cta__link--link:hover .homepage-cta__link-arrow {
        transform: none;
    }
}

/* ==========================================================================
   14. Print Styles
   ========================================================================== */

@media print {
    .homepage-cta {
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
        margin: 0 !important;
        page-break-inside: avoid;
    }

    .homepage-cta__column {
        border: 1px solid #cccccc !important;
        box-shadow: none !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    .homepage-cta__heading,
    .homepage-cta__column-title {
        color: #000000 !important;
    }

    .homepage-cta__link {
        color: #000000 !important;
        border: 1px solid #000000 !important;
        background: transparent !important;
    }

    .homepage-cta__link::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }

    .homepage-cta__icon {
        background: #cccccc !important;
        color: #000000 !important;
    }
}

/* ==========================================================================
   End of Homepage CTA Component Stylesheet
   ========================================================================== */