/**
 * Reality Section - Dedicated Responsive Styles
 * Loaded after style.css and responsive-layout-fixes.css
 * Provides fluid typography, adaptive cards, and smooth breakpoint transitions.
 */

/* ============================================
   REALITY SECTION - FLUID RESPONSIVE SYSTEM
   ============================================ */

/* Base fluid title scaling */
.reality-title {
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.15;
    margin-bottom: clamp(8px, 1.2vw, 12px);
}

/* Subtitle fluid scaling */
.reality-subtitle {
    font-size: clamp(14px, 1.4vw, 18px);
    margin-top: clamp(12px, 1.5vw, 20px);
    margin-bottom: clamp(16px, 2vw, 30px);
}

/* Header area spacing */
.reality-header-area {
    margin-bottom: clamp(24px, 3.5vw, 48px);
    margin-top: clamp(-10px, -1.5vw, -30px);
    gap: clamp(16px, 2vw, 24px);
}

/* Button margin fix — scales down on mobile */
.btn-reality {
    margin-top: clamp(16px, 3vw, 60px);
    padding: clamp(10px, 1.2vw, 14px) clamp(20px, 2.5vw, 32px);
    font-size: clamp(13px, 1.1vw, 15px);
}

/* ============================================
   REALITY CARDS - ADAPTIVE LAYOUT
   ============================================ */

.reality-grid {
    gap: clamp(14px, 1.8vw, 24px);
}

.reality-card {
    padding: clamp(8px, 1vw, 12px);
    border-radius: clamp(12px, 1.2vw, 16px);
}

/* Image wrapper — fluid height based on viewport width */
.reality-image-wrapper {
    height: clamp(140px, 16vw, 220px);
    border-radius: clamp(8px, 1vw, 12px);
    margin-bottom: clamp(10px, 1.2vw, 16px);
}

/* Card title — scales with viewport */
.reality-card-title {
    font-size: clamp(13px, 1.2vw, 16px);
    line-height: 1.35;
    margin-bottom: clamp(4px, 0.6vw, 8px);
    padding: 0 clamp(4px, 0.6vw, 8px);
}

/* ============================================
   REALITY BANNER - RESPONSIVE
   ============================================ */

.reality-banner {
    margin-top: clamp(24px, 3.5vw, 48px);
    padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.5vw, 32px);
    border-radius: clamp(12px, 1.2vw, 16px);
    gap: clamp(12px, 1.5vw, 16px);
}

.banner-text {
    font-size: clamp(14px, 1.5vw, 20px);
}

.btn-banner {
    padding: clamp(10px, 1.2vw, 12px) clamp(16px, 2vw, 24px);
    font-size: clamp(13px, 1.1vw, 15px);
}

.banner-left {
    gap: clamp(10px, 1.2vw, 16px);
}

.banner-left i {
    font-size: clamp(18px, 1.8vw, 24px);
}

/* ============================================
   DECORATIVE LINE — RESPONSIVE BEHAVIOUR
   ============================================ */

.kitchen-line {
    width: clamp(180px, 22vw, 310px);
    right: clamp(20px, 8vw, 100px);
    bottom: clamp(10px, 2vw, 25px);
}

/* ============================================
   TABLET ADJUSTMENTS (<= 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .reality-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .reality-image-wrapper {
        height: clamp(150px, 20vw, 200px);
    }

    .reality-header-area {
        flex-direction: row;
        align-items: flex-end;
    }
}

/* ============================================
   SMALL TABLET / LARGE PHONE (<= 991px)
   ============================================ */
@media (max-width: 991px) {
    .reality-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .reality-header-area {
        flex-direction: column;
        align-items: flex-start;
    }

    .kitchen-line {
        display: none;
    }

    .reality-banner {
        flex-direction: column;
        text-align: center;
    }

    .banner-left {
        flex-direction: row;
        justify-content: center;
    }
}

/* ============================================
   MOBILE (<= 768px)
   ============================================ */
@media (max-width: 768px) {
    .section-reality {
        padding: clamp(36px, 8vw, 56px) 16px;
    }

    .reality-title {
        font-size: clamp(22px, 5.5vw, 28px);
        line-height: 1.2;
    }

    .reality-subtitle {
        font-size: 14px;
        margin-top: 10px;
    }

    .reality-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .reality-card {
        padding: 8px;
        border-radius: 12px;
    }

    .reality-image-wrapper {
        height: clamp(130px, 22vw, 160px);
        margin-bottom: 10px;
    }

    .reality-card-title {
        font-size: clamp(12px, 3vw, 14px);
        padding: 0 4px;
    }

    .reality-banner {
        margin-top: 28px;
        padding: 16px 20px;
        border-radius: 12px;
    }

    .banner-text {
        font-size: 14px;
    }

    .btn-banner {
        width: 100%;
        justify-content: center;
    }

    .btn-reality {
        width: 100%;
        text-align: center;
        margin-top: 16px;
    }
}

/* ============================================
   SMALL MOBILE (<= 576px)
   ============================================ */
@media (max-width: 576px) {
    .reality-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .reality-card {
        max-width: 340px;
        margin: 0 auto;
    }

    .reality-image-wrapper {
        height: clamp(160px, 45vw, 200px);
    }

    .reality-card-title {
        font-size: 14px;
    }

    .reality-banner {
        padding: 14px 16px;
        gap: 12px;
    }

    .banner-left {
        flex-direction: column;
        gap: 6px;
    }

    .banner-text {
        font-size: 13px;
    }
}

/* ============================================
   EXTRA SMALL MOBILE (<= 375px)
   ============================================ */
@media (max-width: 375px) {
    .reality-title {
        font-size: 20px;
    }

    .reality-subtitle {
        font-size: 13px;
    }

    .reality-image-wrapper {
        height: 140px;
    }

    .reality-card-title {
        font-size: 13px;
    }
}