/* ==========================================================================
   Story Pin Block - Responsive Design
   Mobile-First Approach with Progressive Enhancement
   ========================================================================== */

/* ==========================================================================
   Mobile Base Styles (320px - 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Remove GSAP pin-spacer wrapper effects */
    .pin-spacer {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        position: static !important;
        display: block !important;
    }
    
    /* Main wrapper adjustments */
    .blz-storypin-wrapper,
    .story-pin-block {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        transform: none !important;
        margin: 0 !important;
        padding: 3rem 0 !important;
    }
    
    /* Override GSAP inline styles */
    .blz-storypin-wrapper[style*="max-width"],
    .blz-storypin-wrapper[style*="width"] {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Background adjustments */
    .storypin-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    
    /* Ensure stage is above background */
    .storypin-stage {
        position: relative;
        z-index: 2;
    }
    
    /* Keep video on mobile */
    .storypin-bgvideo {
        display: block;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    
    /* Add dark overlay for better text readability */
    .storypin-background::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }
    
    /* Stage container - convert to vertical scroll */
    .storypin-stage {
        position: relative !important;
        width: 100%;
        height: auto !important;
        padding: 0 1rem;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    
    /* Panel cards - stack vertically */
    .storypin-panel {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        margin-bottom: 2rem;
        will-change: auto !important;
    }
    
    /* Remove 3D transforms on mobile */
    .storypin-panel[style*="transform"] {
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;
    }
    
    /* Content box - full width on mobile */
    .storypin-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        padding: 2rem 1.5rem;
        border-radius: 0.75rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        margin: 0;
        background: rgba(255, 255, 255, 0.95); /* Slightly transparent for depth */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* Alignment classes - all left-aligned on mobile */
    .storypin-align-left,
    .storypin-align-right,
    .storypin-align-center {
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    /* Typography adjustments - all left-aligned */
    .storypin-label {
        font-size: 0.75rem; /* 12px */
        margin-bottom: 0.5rem;
        letter-spacing: 0.08em;
        text-align: left !important;
    }
    
    .storypin-title {
        font-size: 1.5rem; /* 24px */
        font-size: clamp(1.25rem, 5vw, 1.75rem);
        margin-bottom: 1rem;
        line-height: 1.2;
        word-wrap: break-word;
        hyphens: manual;
        text-align: left !important;
    }
    
    .storypin-text {
        font-size: 1rem; /* 16px */
        font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
        line-height: 1.5;
        margin-bottom: 1.5rem;
        text-align: left !important;
    }
    
    .storypin-text p {
        margin-bottom: 0.75rem;
        text-align: left !important;
    }
    
    /* Arrow adjustments - left-aligned */
    .storypin-arrow {
        justify-content: flex-start;
        margin-top: 1rem;
    }
    
    .storypin-arrow svg {
        width: 40px;
        height: 40px;
    }
    
    .storypin-arrow-link {
        display: inline-flex;
        padding: 0.5rem;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Hide decorative elements on mobile */
    .storypin-deco,
    .storypin-blob {
        display: none !important;
    }
}

/* ==========================================================================
   Small Mobile (320px - 374px)
   ========================================================================== */
@media (max-width: 374px) {
    .blz-storypin-wrapper {
        padding: 2rem 0 !important;
    }
    
    .storypin-stage {
        padding: 0 0.75rem;
        gap: 1.5rem;
    }
    
    .storypin-box {
        padding: 1.5rem 1.25rem;
    }
    
    .storypin-title {
        font-size: 1.25rem; /* 20px */
    }
    
    .storypin-text {
        font-size: 0.875rem; /* 14px */
    }
    
    .storypin-arrow svg {
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   Medium Mobile (375px - 479px)
   ========================================================================== */
@media (min-width: 375px) and (max-width: 479px) {
    .storypin-title {
        font-size: 1.375rem; /* 22px */
    }
    
    .storypin-text {
        font-size: 0.9375rem; /* 15px */
    }
}

/* ==========================================================================
   Large Mobile (480px - 767px)
   ========================================================================== */
@media (min-width: 480px) and (max-width: 767px) {
    .storypin-stage {
        padding: 0 1.5rem;
        gap: 2.5rem;
    }
    
    .storypin-box {
        padding: 2rem;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .storypin-title {
        font-size: 1.625rem; /* 26px */
    }
    
    .storypin-text {
        font-size: 1.0625rem; /* 17px */
    }
    
    .storypin-arrow svg {
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   Tablet Portrait (768px - 900px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 900px) {
    .blz-storypin-wrapper,
    .story-pin-block {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 4rem 0 !important;
    }
    
    .storypin-stage {
        padding: 0 2rem;
        gap: 3rem;
    }
    
    /* Keep video on tablets */
    .storypin-bgvideo {
        display: block;
    }
    
    /* Lighter overlay on tablets */
    .storypin-background::after {
        background: rgba(0, 0, 0, 0.3);
    }
    
    /* Panel layout - 2 columns grid */
    .storypin-stage {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .storypin-panel {
        position: relative !important;
        margin-bottom: 0;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
    }
    
    .storypin-box {
        max-width: 600px;
        margin: 0 auto;
        padding: 2.5rem;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    }
    
    .storypin-label {
        font-size: 0.875rem;
    }
    
    .storypin-title {
        font-size: 2rem; /* 32px */
        margin-bottom: 1.25rem;
    }
    
    .storypin-text {
        font-size: 1.125rem; /* 18px */
        margin-bottom: 2rem;
    }
    
    /* Show decorative elements with reduced size */
    .storypin-deco {
        display: block !important;
        opacity: 0.5;
    }
    
    .storypin-deco-1 {
        width: 200px;
        height: 200px;
        top: -100px;
        left: -100px;
    }
    
    .storypin-deco-2 {
        width: 150px;
        height: 150px;
        bottom: -75px;
        right: -75px;
    }
}

/* ==========================================================================
   Tablet Landscape (901px - 1024px)
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1024px) {
    .blz-storypin-wrapper,
    .story-pin-block {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        padding: 4rem 0 !important;
    }

    .storypin-stage {
        padding: 0 3rem;
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .storypin-panel {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        margin: 0;
    }

    .storypin-box {
        width: 100% !important;
        max-width: 640px !important;
        min-width: auto !important;
        margin: 0 auto;
        padding: 2.5rem;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    }

    .storypin-title {
        font-size: 1.875rem; /* 30px */
    }

    .storypin-text {
        font-size: 1.25rem; /* 20px */
    }

    .storypin-deco,
    .storypin-blob {
        display: block !important;
        opacity: 0.3;
    }
}

/* ==========================================================================
   Landscape Orientation Mobile
   ========================================================================== */
@media (max-height: 600px) and (orientation: landscape) and (max-width: 900px) {
    .blz-storypin-wrapper {
        padding: 2rem 0 !important;
    }
    
    .storypin-stage {
        gap: 1.5rem;
    }
    
    .storypin-box {
        padding: 1.5rem;
    }
    
    .storypin-title {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
    
    .storypin-text {
        font-size: 0.9375rem;
        margin-bottom: 1rem;
    }
    
    .storypin-arrow svg {
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   GSAP ScrollTrigger & Animation Overrides
   ========================================================================== */
@media (max-width: 900px) {
    /* Disable GSAP pinning */
    [data-panel-index] {
        position: relative !important;
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Reset all GSAP transforms */
    .storypin-panel[style*="transform-style"],
    .storypin-panel[style*="perspective"] {
        transform-style: flat !important;
        perspective: none !important;
        transform: none !important;
    }
    
    /* Remove blur effects */
    .storypin-panel[style*="filter"] {
        filter: none !important;
    }
    
    /* Ensure visibility */
    .storypin-panel {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Disable floating animations */
    .storypin-deco[style*="transform"] {
        transform: none !important;
    }
}

/* ==========================================================================
   Accessibility & Performance
   ========================================================================== */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .storypin-panel,
    .storypin-arrow svg,
    .storypin-deco,
    .storypin-blob {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    /* Keep video visible but static */
    .storypin-bgvideo {
        display: block;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .storypin-arrow-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .storypin-arrow svg:hover {
        transform: none;
    }
    
    .storypin-arrow-link:active svg {
        transform: scale(0.95);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .storypin-title {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
    .blz-storypin-wrapper {
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
    }
    
    .storypin-panel {
        -webkit-transform-style: preserve-3d;
    }
}

/* Print styles */
@media print {
    .blz-storypin-wrapper {
        height: auto !important;
        padding: 1rem 0 !important;
    }
    
    .storypin-background,
    .storypin-deco,
    .storypin-blob {
        display: none !important;
    }
    
    .storypin-panel {
        page-break-inside: avoid;
        margin-bottom: 1rem !important;
    }
    
    .storypin-box {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
    
    .storypin-title {
        font-size: 18pt !important;
        color: black !important;
    }
    
    .storypin-text {
        font-size: 11pt !important;
        color: black !important;
    }
    
    .storypin-arrow {
        display: none !important;
    }
}