/* ==================================
   SEVENFOLD CONSULTING - INDUSTRIES & CASE STUDIES RESPONSIVE STYLES
   Version: 1.0
   Description: Comprehensive responsive fixes for industries and case study pages
   Covers: 320px-375px, 375px-480px, 480px-768px, 768px-1024px, 1024px+
   ================================== */

/* ==================================
   1. EXTRA SMALL MOBILE (320px - 375px)
   Target: iPhone SE, older/smaller phones
   ================================== */
@media (max-width: 375px) {
    /* Industries Hero */
    .industries-hero {
        min-height: 350px;
        margin-top: 60px;
    }

    .industries-hero .hero-content {
        padding: 40px 15px;
    }

    .industries-hero .hero-title {
        font-size: 1.6em;
        letter-spacing: -1px;
        padding: 0 10px;
    }

    .industries-hero .hero-subtitle {
        font-size: 0.95em;
        padding: 0 10px;
        line-height: 1.5;
    }

    /* Industries Section */
    .industries-section {
        padding: 40px 0;
    }

    .industries-intro {
        margin-bottom: 40px;
        padding: 0 15px;
    }

    .industries-intro h2 {
        font-size: 1.5em;
    }

    .industries-intro p {
        font-size: 1em;
    }

    /* Industries Grid */
    .industries-grid {
        padding: 0 15px;
        gap: 20px;
    }

    .industry-card {
        border-radius: 15px;
    }

    .industry-image {
        height: 180px;
    }

    .industry-card.featured .industry-image {
        min-height: 200px;
    }

    .industry-content {
        padding: 20px;
    }

    .industry-card.featured .industry-content {
        padding: 25px 20px;
    }

    .industry-content h3 {
        font-size: 1.3em;
    }

    .industry-card.featured .industry-content h3 {
        font-size: 1.5em;
    }

    .industry-tagline {
        font-size: 0.95em;
        margin-bottom: 15px;
    }

    .industry-features {
        margin-bottom: 20px;
    }

    .industry-features li {
        font-size: 0.9em;
        padding-left: 20px;
        margin-bottom: 8px;
    }

    .industry-features li::before {
        width: 6px;
        height: 6px;
        top: 7px;
    }

    .industry-cta {
        padding: 12px 22px;
        font-size: 0.85em;
        width: 100%;
        justify-content: center;
    }

    .industry-icon {
        width: 40px;
        height: 40px;
        top: 15px;
        left: 15px;
    }

    .industry-icon svg {
        width: 22px;
        height: 22px;
    }

    /* Value Showcase */
    .cross-industry-section {
        padding: 40px 0;
    }

    .value-showcase {
        padding: 30px 20px;
        margin: 0 15px;
        border-radius: 12px;
    }

    .value-content h2 {
        font-size: 1.4em;
    }

    .value-content > p {
        font-size: 0.95em;
    }

    .value-metrics {
        gap: 25px;
        flex-direction: column;
    }

    .metric-icon {
        font-size: 2em;
    }

    .metric-label {
        font-size: 0.9em;
    }

    /* CTA Section */
    .cta-section {
        padding: 40px 15px;
    }

    .cta-section h2 {
        font-size: 1.5em;
    }

    .cta-section p {
        font-size: 1em;
        margin-bottom: 25px;
    }

    .cta-button-white {
        padding: 14px 30px;
        font-size: 0.95em;
    }

    /* Footer */
    .footer-content {
        padding: 0 15px;
        gap: 25px;
    }

    footer {
        padding: 40px 0 20px;
    }

    .footer-links h4 {
        font-size: 1.1em;
        margin-bottom: 15px;
    }

    /* Case Study Hero */
    .case-study-hero {
        min-height: 50vh;
        margin-top: 60px;
    }

    .case-study-hero h1 {
        font-size: 1.5em;
    }

    .hero-content-case {
        padding: 30px 15px;
    }

    .hero-subtitle {
        font-size: 0.9em;
    }

    .industry-badge {
        font-size: 0.75em;
        padding: 5px 15px;
    }

    /* Case Study Content */
    .case-study-content {
        padding: 0 15px;
    }

    .content-section {
        padding: 40px 0;
    }

    .content-section h2 {
        font-size: 1.5em;
    }

    .content-section p {
        font-size: 0.95em;
    }

    .section-label {
        font-size: 0.75em;
        padding-left: 25px;
    }

    .section-label::before {
        width: 18px;
    }

    /* Metrics Grid */
    .metrics-grid {
        gap: 15px;
        margin: 30px 0;
    }

    .metric-card {
        padding: 25px 15px;
    }

    .metric-value {
        font-size: 1.8em;
    }

    .metric-label {
        font-size: 0.85em;
    }

    /* Highlight Box */
    .highlight-box {
        padding: 15px 18px;
        margin: 25px 0;
    }

    .highlight-box p {
        font-size: 0.95em;
    }

    /* Key Points */
    .key-points {
        margin: 25px 0;
    }

    .key-points h4 {
        font-size: 1.1em;
    }

    .key-points li {
        padding: 12px 0 12px 30px;
        font-size: 0.9em;
    }

    .key-points li::before {
        width: 16px;
        height: 16px;
    }

    .key-points li::after {
        left: 4px;
        font-size: 0.6em;
    }

    /* Pull Quote */
    .pull-quote {
        padding: 30px 0;
        margin: 30px 0;
    }

    .pull-quote blockquote {
        font-size: 1.1em;
    }

    .pull-quote blockquote::before {
        font-size: 3em;
        top: -20px;
    }

    /* Image Sections */
    .image-section {
        margin: 30px 0;
        height: 220px;
        border-radius: 12px;
    }

    .full-width-image {
        height: 280px;
        margin: 50px 0;
    }

    .full-width-image .overlay-text {
        padding: 0 20px;
    }

    .full-width-image .overlay-text h3 {
        font-size: 1.2em;
    }

    .full-width-image .overlay-text p {
        font-size: 0.95em;
    }

    /* Case Study CTA */
    .case-study-cta {
        padding: 40px 15px;
    }

    .case-study-cta h2 {
        font-size: 1.5em;
    }

    .case-study-cta p {
        font-size: 1em;
    }

    /* Related Studies */
    .related-studies {
        padding: 40px 0;
    }

    .related-studies h3 {
        font-size: 1.4em;
        margin-bottom: 30px;
    }

    .related-grid {
        padding: 0 15px;
        gap: 20px;
    }

    .related-card-image {
        height: 150px;
    }

    .related-card-content {
        padding: 18px;
    }

    .related-card-content h4 {
        font-size: 1em;
    }

    .related-card-content p {
        font-size: 0.85em;
    }

    /* Sources */
    .sources-section {
        padding: 35px 0;
    }

    .sources-section h4 {
        font-size: 1.1em;
    }

    .sources-list li {
        font-size: 0.8em;
    }
}

/* ==================================
   2. SMALL MOBILE (375px - 480px)
   Target: iPhone 12/13/14 standard, most modern phones
   ================================== */
@media (min-width: 376px) and (max-width: 480px) {
    /* Industries Hero */
    .industries-hero {
        min-height: 380px;
        margin-top: 60px;
    }

    .industries-hero .hero-content {
        padding: 50px 20px;
    }

    .industries-hero .hero-title {
        font-size: 1.9em;
        letter-spacing: -1px;
    }

    .industries-hero .hero-subtitle {
        font-size: 1.05em;
    }

    /* Industries Grid */
    .industries-grid {
        padding: 0 20px;
        gap: 22px;
    }

    .industry-image {
        height: 200px;
    }

    .industry-card.featured .industry-image {
        min-height: 220px;
    }

    .industry-content {
        padding: 25px;
    }

    .industry-card.featured .industry-content {
        padding: 30px 25px;
    }

    .industry-content h3 {
        font-size: 1.4em;
    }

    .industry-card.featured .industry-content h3 {
        font-size: 1.6em;
    }

    .industry-cta {
        padding: 13px 25px;
        font-size: 0.9em;
    }

    /* Value Showcase */
    .value-showcase {
        padding: 35px 25px;
        margin: 0 20px;
    }

    .value-content h2 {
        font-size: 1.6em;
    }

    /* Case Study */
    .case-study-hero {
        min-height: 55vh;
    }

    .case-study-hero h1 {
        font-size: 1.7em;
    }

    .hero-content-case {
        padding: 35px 20px;
    }

    .content-section h2 {
        font-size: 1.6em;
    }

    .metric-value {
        font-size: 2em;
    }

    .full-width-image {
        height: 300px;
    }

    .full-width-image .overlay-text h3 {
        font-size: 1.4em;
    }
}

/* ==================================
   3. LARGE MOBILE / SMALL TABLET (480px - 768px)
   Target: iPhone Pro Max, Galaxy large, small tablets portrait
   ================================== */
@media (min-width: 481px) and (max-width: 768px) {
    /* Industries Hero */
    .industries-hero {
        min-height: 420px;
        margin-top: 60px;
    }

    .industries-hero .hero-content {
        padding: 60px 30px;
    }

    .industries-hero .hero-title {
        font-size: 2.2em;
    }

    .industries-hero .hero-subtitle {
        font-size: 1.15em;
    }

    /* Industries Grid - 2 columns on larger phones */
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 25px;
    }

    .industry-card.featured {
        grid-column: span 2;
        grid-template-columns: 1fr;
    }

    .industry-card.featured .industry-image {
        min-height: 220px;
    }

    .industry-image {
        height: 180px;
    }

    .industry-content {
        padding: 22px;
    }

    .industry-content h3 {
        font-size: 1.3em;
    }

    .industry-card.featured .industry-content h3 {
        font-size: 1.6em;
    }

    .industry-tagline {
        font-size: 0.95em;
    }

    .industry-features li {
        font-size: 0.9em;
    }

    .industry-cta {
        padding: 12px 22px;
        font-size: 0.88em;
    }

    /* Value Showcase */
    .value-showcase {
        padding: 45px 30px;
        margin: 0 25px;
    }

    .value-content h2 {
        font-size: 1.8em;
    }

    .value-metrics {
        gap: 40px;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .metric-item {
        flex: 0 0 45%;
    }

    /* CTA Section */
    .cta-section h2 {
        font-size: 1.9em;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        text-align: left;
    }

    .footer-brand {
        grid-column: span 2;
        text-align: center;
    }

    /* Case Study - 2 column metrics */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .metric-card:last-child {
        grid-column: span 2;
    }

    .case-study-hero h1 {
        font-size: 1.9em;
    }

    .content-section h2 {
        font-size: 1.7em;
    }

    .full-width-image {
        height: 350px;
    }

    .full-width-image .overlay-text h3 {
        font-size: 1.5em;
    }

    /* Related Studies - 2 columns */
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .related-card:nth-child(3) {
        grid-column: span 2;
    }

    /* Sources - 2 columns */
    .sources-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================================
   4. TABLET / SMALL LAPTOP (768px - 1024px)
   Target: iPad, small laptops, Chromebooks
   ================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Industries Hero */
    .industries-hero {
        min-height: 450px;
        margin-top: 90px;
    }

    .industries-hero .hero-content {
        padding: 80px 40px;
    }

    .industries-hero .hero-title {
        font-size: 2.6em;
    }

    .industries-hero .hero-subtitle {
        font-size: 1.2em;
    }

    /* Industries Grid - 2 columns with featured full width */
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        max-width: 100%;
        padding: 0 30px;
    }

    .industry-card.featured {
        grid-column: span 2;
        grid-template-columns: 1fr 1fr;
    }

    .industry-card.featured .industry-image {
        min-height: 350px;
    }

    .industry-image {
        height: 200px;
    }

    .industry-content {
        padding: 28px;
    }

    .industry-card.featured .industry-content {
        padding: 35px;
    }

    .industry-content h3 {
        font-size: 1.5em;
    }

    .industry-card.featured .industry-content h3 {
        font-size: 1.9em;
    }

    /* Value Showcase */
    .value-showcase {
        padding: 50px 40px;
    }

    .value-content h2 {
        font-size: 2.2em;
    }

    .value-metrics {
        gap: 50px;
    }

    /* Case Study */
    .case-study-hero {
        margin-top: 90px;
        min-height: 60vh;
    }

    .case-study-hero h1 {
        font-size: 2.4em;
    }

    .hero-content-case {
        padding: 50px 40px;
    }

    .case-study-nav {
        top: 90px;
    }

    .case-study-nav .container {
        padding: 12px 30px;
    }

    .jump-links {
        gap: 15px;
    }

    .jump-links a {
        font-size: 0.85em;
    }

    .case-study-content {
        padding: 0 30px;
    }

    .content-section h2 {
        font-size: 1.9em;
    }

    /* Metrics - 3 columns */
    .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .metric-card {
        padding: 28px 20px;
    }

    .metric-value {
        font-size: 2.2em;
    }

    /* Full Width Image */
    .full-width-image {
        height: 400px;
    }

    /* Related Studies */
    .related-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        padding: 0 30px;
    }

    .related-card-image {
        height: 160px;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* ==================================
   5. LANDSCAPE MOBILE FIXES
   ================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .industries-hero {
        min-height: 60vh;
    }

    .industries-hero .hero-content {
        padding: 40px 40px;
    }

    .industries-hero .hero-title {
        font-size: 1.8em;
    }

    .case-study-hero {
        min-height: 70vh;
    }

    .full-width-image {
        height: 50vh;
    }
}

/* ==================================
   6. HIGH DPI ADJUSTMENTS
   ================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .industry-card {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    }

    .metric-card {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }
}

/* ==================================
   7. SAFE AREA INSETS (iPhone notch/Dynamic Island)
   ================================== */
@supports (padding: max(0px)) {
    .industries-hero .hero-content {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    .case-study-content {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    .cta-section {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    footer {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* ==================================
   8. OVERFLOW & SCROLL FIXES
   ================================== */
/* Prevent horizontal scroll issues */
.full-width-image {
    max-width: 100vw;
    overflow-x: hidden;
}

@media (max-width: 768px) {
    .full-width-image {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /* Fix Impact section overflow */
    .content-section[style*="margin: 0 -100vw"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure no horizontal scroll */
    body {
        overflow-x: hidden;
    }

    html {
        overflow-x: hidden;
    }

    .image-section {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ==================================
   9. TOUCH DEVICE OPTIMIZATIONS
   ================================== */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects that can cause sticky states on touch */
    .industry-card:hover {
        transform: none;
    }

    .industry-card:hover .industry-image img {
        transform: none;
    }

    .related-card:hover {
        transform: none;
    }

    .metric-card:hover {
        transform: none;
    }

    /* Increase tap targets */
    .industry-cta {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
    }

    .jump-links a {
        padding: 10px 5px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .share-btn {
        width: 44px;
        height: 44px;
    }
}

/* ==================================
   10. PRINT STYLES
   ================================== */
@media print {
    .industries-hero,
    .case-study-hero {
        min-height: auto;
        padding: 40px;
    }

    .value-showcase {
        background: white;
        color: black;
    }

    .cta-section,
    .case-study-nav,
    .share-buttons,
    .mobile-menu-toggle {
        display: none;
    }

    .industry-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .full-width-image {
        height: auto;
    }
}

/* ==================================
   11. CRITICAL OVERRIDE FIXES
   Maximum specificity to override inline styles
   ================================== */

/* Industries Grid - Force single column on mobile */
@media (max-width: 768px) {
    .industries-grid,
    .industries-section .industries-grid,
    section .industries-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .industry-card.featured,
    .industries-grid .industry-card.featured {
        grid-column: span 1 !important;
        grid-template-columns: 1fr !important;
    }

    /* Ensure cards are visible on load for mobile */
    .industry-card {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* Industries Grid - Force 2 columns on tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .industries-grid,
    .industries-section .industries-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .industry-card.featured {
        grid-column: span 2 !important;
    }
}

/* Small Laptop grid fix */
@media (min-width: 769px) and (max-width: 1024px) {
    .industries-grid,
    .industries-section .industries-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }

    .industry-card.featured {
        grid-column: span 2 !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Metrics Grid - Force proper columns */
@media (max-width: 480px) {
    .metrics-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .metrics-grid .metric-card:last-child:nth-child(odd) {
        grid-column: span 2 !important;
    }
}

/* Related Studies Grid */
@media (max-width: 480px) {
    .related-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .related-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .related-grid .related-card:nth-child(3) {
        grid-column: span 2 !important;
    }
}

/* Footer Grid Fix */
@media (max-width: 768px) {
    .footer-content,
    footer .footer-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .footer-content,
    footer .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
        text-align: left !important;
    }

    .footer-brand {
        grid-column: span 2 !important;
        text-align: center !important;
    }
}

/* Case Study Nav Jump Links */
@media (max-width: 768px) {
    .case-study-nav {
        display: block !important;
    }

    .case-study-nav .container {
        flex-direction: column !important;
        gap: 15px !important;
        padding: 15px !important;
    }

    .jump-to-menu {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .jump-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .jump-links a {
        font-size: 0.85em !important;
        padding: 8px 12px !important;
        background: var(--light-gray, #f5f5f5) !important;
        border-radius: 20px !important;
    }

    .share-buttons {
        justify-content: center !important;
    }
}

/* Value Metrics Flex Fix */
@media (max-width: 480px) {
    .value-metrics {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
    }

    .metric-item {
        width: 100% !important;
        max-width: 200px !important;
    }
}

/* Container max-width for readability */
@media (min-width: 769px) and (max-width: 1024px) {
    .container,
    .case-study-content,
    .industries-intro {
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Prevent text overflow in cards */
.industry-content h3,
.industry-tagline,
.industry-features li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Ensure proper z-index stacking */
.industries-hero {
    position: relative;
    z-index: 1;
}

.industries-hero .hero-content {
    position: relative;
    z-index: 2;
}

.industries-hero .hero-background,
.industries-hero .animated-gradient,
.industries-hero .floating-shapes {
    z-index: 0;
}

/* Fix animation visibility on scroll */
@media (max-width: 768px) {
    .fade-in-section,
    .fade-in-section.visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}