/* Product Pages Responsive Styles */

/*--------------------------------------------
  TABLE OF CONTENTS
  
  1. TABLET AND SMALLER DESKTOP SCREENS
    1.1 Lead Capture Section
    1.2 Benefits Section
  
  2. MOBILE SCREENS (< 768px)
    2.1 Benefits Section
    2.2 Lead Capture Section
  
  3. VERY SMALL SCREENS (< 480px)
    3.1 Benefits Section
    3.2 Lead Capture Section
--------------------------------------------*/

/*--------------------------------------------
  0. 1280x768 RESOLUTION OPTIMIZATIONS
--------------------------------------------*/
@media (max-width: 1280px) and (min-width: 1025px) {
    /* 0.1 Hero Section for 1280x768 */
    [class*="product-hero-"] {
        padding: 80px 0;
    }
    
    [class*="product-hero-"] .container {
        max-width: 1200px;
        padding: 0 40px;
    }
    
    [class*="product-hero-"] .hero-text-content {
        width: 55%;
        padding-right: 40px;
    }
    
    [class*="product-hero-"] .hero-text-content h1 {
        font-size: 44px;
        line-height: 1.2;
        margin-bottom: 20px;
    }
    
    [class*="product-hero-"] .hero-text-content p {
        font-size: 18px;
        line-height: 1.5;
        margin: 18px 0 28px;
    }
    
    [class*="product-hero-"] .hero-buttons {
        gap: 20px;
    }
    
    [class*="product-hero-"] .btn-primary,
    [class*="product-hero-"] .btn-secondary {
        padding: 12px 24px;
        font-size: 15px;
        min-width: 160px;
    }
    
    [class*="product-hero-"] .hero-image-main {
        max-width: 42%;
        right: 40px;
    }
    
    /* 0.2 Benefits Section for 1280x768 */
    [class*="product-benefits-"] {
        padding: 60px 40px;
    }
    
    [class*="product-benefits-"] .benefits-container {
        max-width: 1100px;
        margin: 0 auto;
        gap: 40px;
        padding: 32px;
    }
    
    [class*="product-benefits-"] .benefits-content {
        width: 55%;
    }
    
    [class*="product-benefits-"] .benefits-content h3 {
        font-size: 32px;
        margin-bottom: 20px;
    }
    
    [class*="product-benefits-"] .benefits-list {
        gap: 16px;
    }
    
    [class*="product-benefits-"] .benefits-list li {
        font-size: 16px;
        line-height: 1.5;
    }
    
    [class*="product-benefits-"] .benefits-image {
        width: 45%;
    }
    
    /* 0.3 Use Cases & Integrations Section for 1280x768 */
    [class*="product-use-cases-"] {
        padding: 60px 40px;
    }
    
    [class*="product-use-cases-"] .container {
        max-width: 1100px;
    }
    
    [class*="product-use-cases-"] .section-title {
        font-size: 36px;
        margin-bottom: 32px;
    }
    
    [class*="product-use-cases-"] .use-cases-integrations-wrapper {
        gap: 28px;
    }
    
    [class*="product-use-cases-"] .card {
        padding: 28px 24px;
    }
    
    [class*="product-use-cases-"] .card h3 {
        font-size: 24px;
        margin: 16px 0;
    }
    
    [class*="product-use-cases-"] .card ul li {
        font-size: 15px;
        margin-bottom: 10px;
        line-height: 1.5;
    }
    
    [class*="product-use-cases-"] .card-image {
        min-height: 200px;
    }
    
    [class*="product-use-cases-"] .card-image img {
        max-height: 180px;
    }
    
    /* 0.4 FAQ Section for 1280x768 */
    [class*="product-faq-"] {
        padding: 60px 40px;
    }
    
    [class*="product-faq-"] .container {
        max-width: 1000px;
    }
    
    [class*="product-faq-"] .section-title {
        font-size: 36px;
        margin-bottom: 32px;
    }
    
    [class*="product-faq-"] .faq-item {
        margin-bottom: 20px;
    }
    
    [class*="product-faq-"] .faq-question {
        padding: 20px 24px;
        font-size: 18px;
        line-height: 1.4;
    }
    
    [class*="product-faq-"] .faq-answer p {
        padding: 20px 24px;
        font-size: 15px;
        line-height: 1.6;
    }
    
    /* 0.5 Lead Capture Section for 1280x768 */
    .lead-capture-section {
        width: 85%;
        max-width: 1000px;
        margin-top: -120px;
        padding: 70px 40px 40px;
        min-height: 320px;
    }
    
    .lead-capture-text-content {
        gap: 16px;
    }
    
    .lead-capture-text-content h2 {
        font-size: 38px;
        line-height: 48px;
        margin-bottom: 12px;
    }
    
    .lead-capture-text-content p {
        font-size: 18px;
        line-height: 28px;
    }
    
    .lead-capture-buttons {
        gap: 20px;
        margin-top: 24px;
    }
    
    .btn-lead-demo, .btn-lead-contact {
        padding: 12px 24px;
        font-size: 15px;
        min-width: 160px;
    }
    
    .footer-decorative-image {
        top: -30px;
        max-width: 75%;
    }
    
    .lead-capture-decorative-icons-image-container {
        padding: 20px 0;
    }
}

/*--------------------------------------------
  1. TABLET AND SMALLER DESKTOP SCREENS
--------------------------------------------*/
@media (max-width: 1024px) {
    /* 1.0 Hero Section */
    [class*="product-hero-"] .hero-text-content h1 {
        font-size: 40px;
        line-height: 1.2;
    }
    
    [class*="product-hero-"] .hero-text-content p {
        font-size: 18px;
        margin: 15px 0 25px;
    }
    
    [class*="product-hero-"] .hero-buttons {
        gap: 15px;
    }
    
    [class*="product-hero-"] .hero-image-main {
        max-width: 45%;
        right: 0;
    }
    
    /* 1.1 Lead Capture Section */
    .lead-capture-section {
        width: 90%;
        height: auto;
        min-height: 300px;
        margin-top: -100px;
        padding: 60px 20px 30px;
    }
    
    .lead-capture-text-content h2 {
        font-size: 36px;
        line-height: 46px;
        white-space: normal;
    }
    
    .lead-capture-text-content p {
        font-size: 18px;
        line-height: 26px;
    }
    
    .lead-capture-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .footer-decorative-image {
        top: -25px;
        max-width: 80%;
    }
    
    /* 1.2 Benefits Section */
    /* Generic selector for all product benefit sections */
    [class*="product-benefits-"] .benefits-container {
        padding: 20px;
    }
    
    /* 1.3 Use Cases & Integrations Section */
    [class*="product-use-cases-"] .use-cases-integrations-wrapper {
        gap: 20px;
        display: flex;
        align-items: stretch;
    }
    
    [class*="product-use-cases-"] .card {
        padding: 20px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    [class*="product-use-cases-"] .card-image {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 180px;
    }
    
    [class*="product-use-cases-"] .card-image img {
        max-height: 160px;
        width: auto;
        object-fit: contain;
    }
}

/*--------------------------------------------
  2. MOBILE SCREENS (< 768px)
--------------------------------------------*/
@media (max-width: 768px) {
    /* 2.0 Hero Section */
    [class*="product-hero-"] {
        padding: 80px 0 60px;
        overflow: hidden;
        position: relative;
    }
    
    [class*="product-hero-"] .container {
        padding: 0 15px;
        z-index: 2;
        position: relative;
    }
    
    [class*="product-hero-"] .hero-text-content {
        width: 100%;
        text-align: center;
        padding-right: 0;
    }
    
    [class*="product-hero-"] .hero-text-content h1 {
        font-size: 32px;
        line-height: 1.3;
        margin-bottom: 15px;
    }
    
    [class*="product-hero-"] .hero-text-content p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 25px;
    }
    
    [class*="product-hero-"] .hero-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
    
    [class*="product-hero-"] .btn-primary,
    [class*="product-hero-"] .btn-secondary {
        width: 220px;
        padding: 12px 20px;
        font-size: 15px;
    }
    
    [class*="product-hero-"] .hero-image-main {
        position: absolute;
        top: auto;
        bottom: 0;
        right: -20%;
        max-width: 90%;
        opacity: 0.4;
        z-index: 1;
    }
    
    [class*="product-hero-"] .hero-gradient-overlay {
        opacity: 0.8;
    }
    
    /* 2.1 Benefits Section - for all product pages */
    [class*="product-benefits-"] .benefits-container {
        flex-direction: column;
        gap: 30px;
    }
    
    [class*="product-benefits-"] .benefits-content {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Hide benefits image on mobile to prevent text overlap */
    [class*="product-benefits-"] .benefits-image {
        display: none;
    }
    
    [class*="product-benefits-"] .benefits-container {
        padding: 0 5px;
        width: 100%;
        box-sizing: border-box;
    }
    
    [class*="product-benefits-"] .benefits-list {
        padding-left: 10px;
        padding-right: 0;
        width: 95%;
        max-width: 95%;
        margin-right: 0;
        box-sizing: border-box;
    }
    
    [class*="product-benefits-"] .benefits-content h3 {
        font-size: 28px;
        margin-bottom: 15px;
        margin-left: 15px;
        padding-right: 15px;
    }
    
    [class*="product-benefits-"] .benefits-list li {
        margin-bottom: 15px;
        font-size: 16px;
        line-height: 1.4;
        width: calc(100% - 5px);
        margin-right: 0;
        padding-right: 0;
        word-break: normal;
        word-wrap: normal;
    }
    
    /* 2.2 Use Cases & Integrations Section */
    [class*="product-use-cases-"] .use-cases-integrations-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    
    [class*="product-use-cases-"] .card {
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding: 25px 20px;
        display: flex;
        flex-direction: column;
    }
    
    [class*="product-use-cases-"] .card-image {
        min-height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    [class*="product-use-cases-"] .card-image img {
        max-width: 220px;
        max-height: 150px;
        margin: 0 auto;
        display: block;
        object-fit: contain;
        width: auto;
    }
    
    [class*="product-use-cases-"] .section-title {
        font-size: 28px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    [class*="product-use-cases-"] .card h3 {
        font-size: 24px;
        text-align: center;
        margin: 15px 0;
    }
    
    [class*="product-use-cases-"] .card ul {
        padding-left: 20px;
    }
    
    [class*="product-use-cases-"] .card ul li {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    /* 2.3 FAQ Section */
    [class*="product-faq-"] .section-title {
        font-size: 28px;
        margin-bottom: 20px;
        text-align: center;
        line-height: 1.3;
    }
    
    [class*="product-faq-"] .faq-item {
        margin-bottom: 15px;
    }
    
    [class*="product-faq-"] .faq-question {
        padding: 15px;
        font-size: 17px;
        line-height: 1.4;
    }
    
    [class*="product-faq-"] .faq-question span {
        width: calc(100% - 30px);
    }
    
    [class*="product-faq-"] .faq-toggle-icon {
        width: 20px;
        height: 20px;
    }
    
    [class*="product-faq-"] .faq-answer p {
        font-size: 15px;
        line-height: 1.5;
        padding: 15px;
    }
    
    /* 2.4 Lead Capture Section */
    .lead-capture-section {
        width: 92%;
        margin-top: -70px;
        padding: 40px 15px 20px;
        border-radius: 10px;
        min-height: 250px;
        box-sizing: border-box;
    }
    
    .lead-capture-text-content {
        gap: 10px;
    }
    
    .lead-capture-text-content h2 {
        font-size: 28px;
        line-height: 36px;
        padding: 0 5px;
        margin-bottom: 5px;
    }
    
    .lead-capture-text-content p {
        font-size: 16px;
        line-height: 22px;
        padding: 0 5px;
    }
    
    .lead-capture-buttons {
        flex-direction: column;
        width: 100%;
        gap: 15px;
        margin-top: 15px;
        align-items: center;
    }
    
    .btn-lead-demo, .btn-lead-contact {
        width: 100%;
        max-width: 250px;
        padding: 12px 20px;
        font-size: 15px;
        text-align: center;
    }
    
    .lead-capture-decorative-icons-image-container {
        padding-bottom: 10px;
        padding-top: 10px;
        margin-top: 10px;
    }
    
    .footer-decorative-image {
        top: -15px;
        max-width: 220px;
        margin: 0 auto;
        display: block;
    }
}

/*--------------------------------------------
  3. VERY SMALL SCREENS (< 480px)
--------------------------------------------*/
@media (max-width: 480px) {
    /* 3.0 Hero Section */
    [class*="product-hero-"] {
        padding: 60px 0 50px;
    }
    
    [class*="product-hero-"] .hero-text-content h1 {
        font-size: 28px;
        line-height: 1.3;
    }
    
    [class*="product-hero-"] .hero-text-content p {
        font-size: 15px;
        margin-bottom: 20px;
    }
    
    [class*="product-hero-"] .btn-primary,
    [class*="product-hero-"] .btn-secondary {
        width: 200px;
        padding: 10px 15px;
        font-size: 14px;
    }
    
    [class*="product-hero-"] .hero-image-main {
        right: -50%;
        max-width: 120%;
        opacity: 0.3;
    }
    /* 3.1 Benefits Section - for all product pages */
    [class*="product-benefits-"] .benefits-content h3 {
        font-size: 24px;
        text-align: center;
    }
    
    [class*="product-benefits-"] .benefits-list li {
        font-size: 15px;
    }
    
    [class*="product-benefits-"] .benefits-container {
        padding: 10px;
        gap: 20px;
    }
    
    /* 3.2 Use Cases & Integrations Section */
    [class*="product-use-cases-"] .section-title {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    [class*="product-use-cases-"] .card {
        padding: 20px 15px;
        border-radius: 8px;
    }
    
    [class*="product-use-cases-"] .card h3 {
        font-size: 22px;
        margin: 12px 0;
    }
    
    [class*="product-use-cases-"] .card ul li {
        font-size: 15px;
        margin-bottom: 8px;
    }
    
    [class*="product-use-cases-"] .card-image {
        min-height: 140px;
    }
    
    [class*="product-use-cases-"] .card-image img {
        max-width: 180px;
        max-height: 130px;
    }
    
    /* 3.3 FAQ Section */
    [class*="product-faq-"] .section-title {
        font-size: 24px;
        margin-bottom: 15px;
        padding: 0 5px;
    }
    
    [class*="product-faq-"] .faq-question {
        padding: 12px 10px;
        font-size: 16px;
        font-weight: 600;
    }
    
    [class*="product-faq-"] .faq-toggle-icon {
        width: 18px;
        height: 18px;
    }
    
    [class*="product-faq-"] .faq-answer p {
        padding: 12px 10px;
        font-size: 14px;
    }
    
    /* 3.4 Lead Capture Section */
    .lead-capture-section {
        width: 95%;
        padding: 30px 15px 10px;
    }
    
    .lead-capture-text-content h2 {
        font-size: 24px;
        line-height: 30px;
    }
    
    .lead-capture-text-content p {
        font-size: 14px;
        line-height: 20px;
        padding: 0;
        margin-bottom: 5px;
    }
    
    .lead-capture-buttons {
        margin-top: 10px;
        gap: 12px;
    }
    
    .footer-decorative-image {
        max-width: 180px;
        top: -10px;
    }
}