/* ==========================================================================
   Student Story Component
   Modern Campus CMS Component for HCCC
   Version: 2.0.0 - Performance Optimized

   PERFORMANCE OPTIMIZATIONS (v2.0):
   - aspect-ratio for CLS prevention
   - contain: layout style paint for rendering optimization
   - GPU-accelerated transforms with will-change hints
   - Optimized for Core Web Vitals (LCP, CLS, FID)

   NOTE: This component works WITH the existing main.css styles:
   - Uses existing .cta.cta--button classes for buttons
   - Uses existing .last-word .arrow pattern for name arrows
   - Uses SVG decorations via ::before/::after like .story-home

   Responsive Breakpoints:
   - Small Mobile: < 400px
   - Mobile: 401px - 767px
   - Tablet Portrait: 768px - 899px (55/45 split)
   - Tablet Landscape: 900px - 1024px (50/50 split)
   - Desktop: 1025px+ (50/50 split, full decorations)
   - Large Desktop: 1200px+
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
    /* Default Theme Colors (HCCC Secondary Blue) */
    --student-story-bg: #2b3990;
    --student-story-color: #ffffff;
    --student-story-quote-color: #ffffff;
    --student-story-name-color: #fff200;
    --student-story-subtitle-color: #ffffff;
    --student-story-arrow-bg: #fff200;
    --student-story-arrow-color: #000000;
    --student-story-arrow-hover-bg: #ffffff;

    /* Layout */
    --student-story-content-width: 50%;
    --student-story-image-width: 50%;
    --student-story-min-height: 400px;
    --student-story-padding: 40px;
    --student-story-gap: 0;

    /* Typography */
    --student-story-font-family: "Montserrat", Arial, Helvetica, sans-serif;
    --student-story-quote-size: 1.25rem;
    --student-story-quote-weight: 700;
    --student-story-quote-line-height: 1.4;
    --student-story-name-size: 1.125rem;
    --student-story-name-weight: 700;
    --student-story-subtitle-size: 1rem;
    --student-story-subtitle-weight: 400;

    /* Animation */
    --student-story-transition: all 0.3s ease;

    /* Accessibility */
    --student-story-focus-color: #fff200;
    --student-story-focus-offset: 3px;
}

/* ==========================================================================
   Base Component Styles
   ========================================================================== */

.student-story {
    font-family: var(--student-story-font-family);
    position: relative;
    width: 100%;
    overflow: hidden;

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

.student-story__container {
    display: flex;
    flex-direction: column;
    min-height: var(--student-story-min-height);
}

/* ==========================================================================
   Content Side
   ========================================================================== */

.student-story__content {
    background-color: var(--student-story-bg);
    color: var(--student-story-color);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--student-story-padding);
    min-height: 350px;
    overflow: hidden;
}

.student-story__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* ==========================================================================
   Decorative SVG Elements (matches existing .story-home pattern)
   ========================================================================== */

.student-story__content::before {
    content: '';
    position: absolute;
    top: -136px;
    left: -116px;
    width: 300px;
    height: 300px;
    background-image: url("/assets/img/illustration-help-block.svg");
    background-size: 100% 100%;
    pointer-events: none;
}

.student-story__content::after {
    content: '';
    position: absolute;
    bottom: -250px;
    right: -45px;
    width: 330px;
    height: 330px;
    background-image: url("/assets/img/illustration-help-block2.svg");
    background-size: 100% 100%;
    pointer-events: none;
}

/* Hide decorations when disabled */
.student-story--no-decorations .student-story__content::before,
.student-story--no-decorations .student-story__content::after {
    display: none;
}

/* ==========================================================================
   Quote Styles
   ========================================================================== */

.student-story__quote {
    margin: 0 0 1.5rem 0;
    padding: 0;
    position: relative;
}

.student-story__quote p {
    font-size: var(--student-story-quote-size);
    font-weight: var(--student-story-quote-weight);
    font-style: italic;
    line-height: var(--student-story-quote-line-height);
    color: var(--student-story-quote-color);
    margin: 0;
    quotes: "\201C" "\201D";
}

.student-story__quote p::before {
    content: open-quote;
}

.student-story__quote p::after {
    content: close-quote;
}

/* ==========================================================================
   CTA Button - Contextual overrides for existing .cta.cta--button
   The base button styles come from main.css
   ========================================================================== */

.student-story .cta {
    background-color: #fff200;
    color: #000000;
    padding: 0.6em 1.28em;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.student-story .cta:hover {
    background-color: #fff;
    color: #000000;
}

/* ==========================================================================
   Attribution
   ========================================================================== */

.student-story__attribution {
    margin-top: auto;
}

.student-story__name {
    margin-bottom: 0.25rem;
}

.student-story__name a {
    font-size: var(--student-story-name-size);
    font-weight: var(--student-story-name-weight);
    color: var(--student-story-name-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: var(--student-story-transition);
}

.student-story__name a:hover,
.student-story__name a:focus {
    text-decoration: underline;
}

.student-story__name a:focus {
    outline: 2px solid var(--student-story-focus-color);
    outline-offset: var(--student-story-focus-offset);
}

/* Arrow styling - matches existing .last-word .arrow pattern from main.css */
.student-story__name .last-word {
    position: relative;
    display: inline-block;
    padding-right: 1.4em;
}

.student-story__name .arrow {
    position: absolute;
    top: 50%;
    right: 0;
    background-color: var(--student-story-arrow-bg);
    border-radius: 100%;
    transition: right 0.3s ease, background-color 0.3s ease;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.student-story__name .arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
    transition: right 0.3s ease;
    border-top: 2px solid var(--student-story-arrow-color);
    border-right: 2px solid var(--student-story-arrow-color);
    width: 4px;
    height: 4px;
    right: calc(50% - 2px);
}

.student-story__name a:hover .arrow {
    right: -12px;
    background-color: var(--student-story-arrow-hover-bg);
}

.student-story__subtitle {
    font-size: var(--student-story-subtitle-size);
    font-weight: var(--student-story-subtitle-weight);
    color: var(--student-story-subtitle-color);
    opacity: 0.9;
}

/* ==========================================================================
   Image Side - Performance Optimized for LCP and CLS
   ========================================================================== */

.student-story__image-container {
    position: relative;
    overflow: hidden;
    min-height: 350px;

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

    /* Performance: Isolate rendering layer */
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: 0 450px;
}

.student-story__image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    /* Performance: GPU layer for smooth rendering */
    transform: translateZ(0);
    will-change: transform;
}

.student-story__image-link:focus {
    outline: 3px solid var(--student-story-focus-color);
    outline-offset: -3px;
}

.student-story__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s ease;

    /* Performance: Prevent layout shift with explicit aspect-ratio */
    aspect-ratio: 4 / 5;
}

.student-story__image-link:hover .student-story__image {
    transform: scale(1.03);
}

/* ==========================================================================
   Layout Variations
   ========================================================================== */

/* Standard Layout - Content Left, Image Right (default) */
.student-story--standard .student-story__container {
    flex-direction: column;
}

/* Compact Layout */
.student-story--compact {
    --student-story-min-height: 300px;
    --student-story-padding: 30px;
    --student-story-quote-size: 1.125rem;
}

/* ==========================================================================
   Size Variations
   ========================================================================== */

/* Small Size */
.student-story--small {
    --student-story-min-height: 280px;
    --student-story-padding: 25px;
    --student-story-quote-size: 1rem;
    --student-story-name-size: 1rem;
    --student-story-subtitle-size: 0.875rem;
}

.student-story--small .student-story__content::before {
    width: 200px;
    height: 200px;
    top: -90px;
    left: -80px;
}

.student-story--small .student-story__content::after {
    width: 220px;
    height: 220px;
    bottom: -160px;
    right: -30px;
}

/* Medium Size (default) */
.student-story--medium {
    --student-story-min-height: 400px;
}

/* Large Size */
.student-story--large {
    --student-story-min-height: 550px;
    --student-story-padding: 50px;
    --student-story-quote-size: 1.5rem;
    --student-story-name-size: 1.25rem;
}

/* ==========================================================================
   Theme Variations
   ========================================================================== */

/* HCCC Secondary (Blue) - Default */
.student-story--hccc-secondary {
    --student-story-bg: #2b3990;
    --student-story-color: #ffffff;
    --student-story-quote-color: #ffffff;
    --student-story-name-color: #fff200;
    --student-story-subtitle-color: #ffffff;
    --student-story-focus-color: #fff200;
    --student-story-arrow-bg: #fff200;
    --student-story-arrow-color: #000000;
    --student-story-arrow-hover-bg: #ffffff;
}

/* HCCC Primary (Teal) */
.student-story--hccc-primary {
    --student-story-bg: #00857a;
    --student-story-color: #ffffff;
    --student-story-quote-color: #ffffff;
    --student-story-name-color: #fff200;
    --student-story-subtitle-color: #ffffff;
    --student-story-focus-color: #fff200;
    --student-story-arrow-bg: #fff200;
    --student-story-arrow-color: #000000;
    --student-story-arrow-hover-bg: #ffffff;
}

.student-story--hccc-primary .cta {
    background-color: #fff200;
    color: #000000;
}

.student-story--hccc-primary .cta:hover {
    background-color: #ffffff;
    color: #00857a;
}

/* HCCC Accent (Dark with Yellow accents) */
.student-story--hccc-accent {
    --student-story-bg: #1a1a1a;
    --student-story-color: #ffffff;
    --student-story-quote-color: #ffffff;
    --student-story-name-color: #fff200;
    --student-story-subtitle-color: #ffffff;
    --student-story-focus-color: #fff200;
    --student-story-arrow-bg: #fff200;
    --student-story-arrow-color: #000000;
    --student-story-arrow-hover-bg: #ffffff;
}

/* Anniversary (Black & Gold) */
.student-story--anniversary {
    --student-story-bg: #1a1a1a;
    --student-story-color: #ffffff;
    --student-story-quote-color: #ffffff;
    --student-story-name-color: #d4af37;
    --student-story-subtitle-color: #ffffff;
    --student-story-focus-color: #d4af37;
    --student-story-arrow-bg: #d4af37;
    --student-story-arrow-color: #000000;
    --student-story-arrow-hover-bg: #ffffff;
}

.student-story--anniversary .cta {
    background-color: #d4af37;
    color: #1a1a1a;
}

.student-story--anniversary .cta:hover {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* Anniversary Gold (Gold Background) */
.student-story--anniversary-gold {
    --student-story-bg: #d4af37;
    --student-story-color: #1a1a1a;
    --student-story-quote-color: #1a1a1a;
    --student-story-name-color: #1a1a1a;
    --student-story-subtitle-color: #1a1a1a;
    --student-story-focus-color: #1a1a1a;
    --student-story-arrow-bg: #1a1a1a;
    --student-story-arrow-color: #d4af37;
    --student-story-arrow-hover-bg: #ffffff;
}

.student-story--anniversary-gold .cta {
    background-color: #1a1a1a;
    color: #d4af37;
}

.student-story--anniversary-gold .cta:hover {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* Light Theme */
.student-story--light {
    --student-story-bg: #f5f5f5;
    --student-story-color: #1a1a1a;
    --student-story-quote-color: #1a1a1a;
    --student-story-name-color: #00857a;
    --student-story-subtitle-color: #333333;
    --student-story-focus-color: #2b3990;
    --student-story-arrow-bg: #00857a;
    --student-story-arrow-color: #ffffff;
    --student-story-arrow-hover-bg: #2b3990;
}

.student-story--light .cta {
    background-color: #2b3990;
    color: #ffffff;
}

.student-story--light .cta:hover {
    background-color: #1d2974;
    color: #ffffff;
}

/* White Theme */
.student-story--white {
    --student-story-bg: #ffffff;
    --student-story-color: #1a1a1a;
    --student-story-quote-color: #1a1a1a;
    --student-story-name-color: #00857a;
    --student-story-subtitle-color: #333333;
    --student-story-focus-color: #00857a;
    --student-story-arrow-bg: #00857a;
    --student-story-arrow-color: #ffffff;
    --student-story-arrow-hover-bg: #2b3990;
}

.student-story--white .cta {
    background-color: #00857a;
    color: #ffffff;
}

.student-story--white .cta:hover {
    background-color: #2b3990;
    color: #ffffff;
}

/* ==========================================================================
   Image Position Variations
   ========================================================================== */

.student-story--image-left .student-story__container {
    flex-direction: column-reverse;
}

.student-story--image-right .student-story__container {
    flex-direction: column;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/*
 * Responsive Breakpoint Strategy:
 * - Mobile: < 768px (stacked layout)
 * - Tablet Portrait: 768px - 899px (55/45 split, intermediate decorations)
 * - Tablet Landscape: 900px - 1024px (50/50 split, larger decorations)
 * - Desktop: 1025px+ (50/50 split, full decorations)
 * - Large Desktop: 1200px+ (enhanced padding)
 */

/* Small Mobile Enhancement */
@media (max-width: 400px) {
    .student-story {
        --student-story-quote-size: 1.125rem;
        --student-story-padding: 25px;
        --student-story-name-size: 1rem;
    }

    .student-story__content {
        min-height: 300px;
    }

    .student-story__image-container {
        min-height: 280px;
    }

    /* Smaller decorations on very small screens */
    .student-story__content::before {
        width: 200px;
        height: 200px;
        top: -90px;
        left: -80px;
    }

    .student-story__content::after {
        width: 220px;
        height: 220px;
        bottom: -160px;
        right: -30px;
    }
}

/* Mobile: 401px - 767px */
@media (min-width: 401px) and (max-width: 767px) {
    .student-story {
        --student-story-quote-size: 1.25rem;
        --student-story-padding: 35px;
    }

    .student-story__content {
        min-height: 320px;
    }

    .student-story__image-container {
        min-height: 300px;
        aspect-ratio: 4 / 3;
    }
}

/* Tablet Portrait: 768px - 899px (55/45 split for more text room) */
@media (min-width: 768px) and (max-width: 899px) {
    .student-story {
        --student-story-quote-size: 1.375rem;
        --student-story-padding: 40px;
        --student-story-content-width: 55%;
        --student-story-image-width: 45%;
    }

    .student-story__container {
        flex-direction: row;
        /* Ensure image stretches to match content height */
        align-items: stretch;
    }

    .student-story__content {
        width: var(--student-story-content-width);
        /* Remove min-height - let content determine height naturally */
        min-height: auto;
    }

    .student-story__content::before {
        top: -100px;
        left: -90px;
        width: 350px;
        height: 350px;
    }

    .student-story__content::after {
        bottom: -200px;
        right: -50px;
        width: 380px;
        height: 380px;
    }

    .student-story__image-container {
        width: var(--student-story-image-width);
        min-height: auto;
        position: relative;
        /* Remove aspect-ratio on tablet - let content determine height */
        aspect-ratio: unset;
        contain-intrinsic-size: unset;
    }

    .student-story__image {
        /* Remove aspect-ratio on tablet - fill container */
        aspect-ratio: unset;
    }

    /* Layout overrides for tablet portrait */
    .student-story--standard .student-story__container,
    .student-story--image-right .student-story__container {
        flex-direction: row;
    }

    .student-story--image-left .student-story__container {
        flex-direction: row-reverse;
    }

    /* Small variant adjustments */
    .student-story--small .student-story__content::before {
        width: 280px;
        height: 280px;
        top: -100px;
        left: -100px;
    }

    .student-story--small .student-story__content::after {
        width: 300px;
        height: 300px;
        bottom: -180px;
        right: -35px;
    }
}

/* Tablet Landscape: 900px - 1024px (50/50 split, larger decorations) */
@media (min-width: 900px) and (max-width: 1024px) {
    .student-story {
        --student-story-quote-size: 1.5rem;
        --student-story-padding: 45px;
        --student-story-content-width: 50%;
        --student-story-image-width: 50%;
    }

    .student-story__container {
        flex-direction: row;
        /* Ensure image stretches to match content height */
        align-items: stretch;
    }

    .student-story__content {
        width: var(--student-story-content-width);
        /* Remove min-height - let content determine height naturally */
        min-height: auto;
    }

    .student-story__content::before {
        top: -140px;
        left: -120px;
        width: 420px;
        height: 420px;
    }

    .student-story__content::after {
        bottom: -260px;
        right: -50px;
        width: 480px;
        height: 480px;
    }

    .student-story__image-container {
        width: var(--student-story-image-width);
        min-height: auto;
        position: relative;
        /* Remove aspect-ratio on tablet landscape - let content determine height */
        aspect-ratio: unset;
        contain-intrinsic-size: unset;
    }

    .student-story__image {
        /* Remove aspect-ratio on tablet landscape - fill container */
        aspect-ratio: unset;
    }

    /* Layout overrides */
    .student-story--standard .student-story__container,
    .student-story--image-right .student-story__container {
        flex-direction: row;
    }

    .student-story--image-left .student-story__container {
        flex-direction: row-reverse;
    }

    /* Small variant */
    .student-story--small .student-story__content::before {
        width: 340px;
        height: 340px;
        top: -120px;
        left: -110px;
    }

    .student-story--small .student-story__content::after {
        width: 380px;
        height: 380px;
        bottom: -230px;
        right: -35px;
    }

    /* Large variant - slightly wider content */
    .student-story--large {
        --student-story-content-width: 55%;
        --student-story-image-width: 45%;
    }
}

/* Desktop: 1025px+ */
@media (min-width: 1025px) {
    .student-story {
        --student-story-quote-size: 1.5rem;
        --student-story-padding: 50px;
        --student-story-content-width: 50%;
        --student-story-image-width: 50%;
        /* Match homepage-cta fifty-fifty section height for visual balance */
        --student-story-min-height: 575px;
    }

    .student-story__container {
        flex-direction: row;
        /* Ensure image stretches to match content height */
        align-items: stretch;
    }

    .student-story__content {
        width: var(--student-story-content-width);
        /* Remove min-height - let content determine height naturally */
        min-height: auto;
    }

    .student-story__content::before {
        top: -197px;
        left: -182px;
        width: 540px;
        height: 540px;
    }

    .student-story__content::after {
        bottom: -356px;
        right: -48px;
        width: 600px;
        height: 600px;
    }

    .student-story__image-container {
        width: var(--student-story-image-width);
        min-height: auto;
        position: relative;
        /* Remove aspect-ratio on desktop - let content determine height */
        aspect-ratio: unset;
        contain-intrinsic-size: unset;
    }

    .student-story__image {
        /* Remove aspect-ratio on desktop - fill container */
        aspect-ratio: unset;
    }

    /* Layout overrides */
    .student-story--standard .student-story__container,
    .student-story--image-right .student-story__container {
        flex-direction: row;
    }

    .student-story--image-left .student-story__container {
        flex-direction: row-reverse;
    }

    .student-story--small {
        --student-story-content-width: 50%;
        --student-story-image-width: 50%;
    }

    .student-story--small .student-story__content::before {
        width: 400px;
        height: 400px;
        top: -150px;
        left: -140px;
    }

    .student-story--small .student-story__content::after {
        width: 450px;
        height: 450px;
        bottom: -280px;
        right: -40px;
    }

    .student-story--large {
        --student-story-content-width: 60%;
        --student-story-image-width: 40%;
        --student-story-quote-size: 1.75rem;
    }
}

/* Large Desktop: 1200px+ */
@media (min-width: 1200px) {
    .student-story {
        --student-story-padding: 60px;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus visible for keyboard navigation */
.student-story *:focus-visible {
    outline: 2px solid var(--student-story-focus-color);
    outline-offset: var(--student-story-focus-offset);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .student-story,
    .student-story *,
    .student-story *::before,
    .student-story *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .student-story__image-link:hover .student-story__image {
        transform: none;
    }

    .student-story__name a:hover .arrow {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .student-story .cta {
        border: 2px solid currentColor;
    }

    .student-story__name a:focus,
    .student-story .cta:focus,
    .student-story__image-link:focus {
        outline-width: 3px;
    }
}

/* Print styles */
@media print {
    .student-story {
        break-inside: avoid;
    }

    .student-story__container {
        flex-direction: row;
    }

    .student-story__image-link:hover .student-story__image {
        transform: none;
    }

    .student-story__content::before,
    .student-story__content::after {
        display: none;
    }
}

/* ==========================================================================
   Screen Reader Only Helper
   ========================================================================== */

.student-story .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;
}