/* ==========================================================================
   Krishana Premium Responsive Stylesheet
   Author: Antigravity / Krishana Debnath Portfolio 2026
   All custom classes prefixed with kd-
   ========================================================================== */

/* --- Media Queries (1200px and below) --- */
@media screen and (max-width: 1200px) {
    :root {
        --kd-bezel-padding: 1.2vw;
        --kd-container-padding: 5vw;
    }

    .kd-hero-title {
        font-size: 11vw;
    }

    .kd-project-img-container {
        height: 420px;
    }

    .kd-featured-stack-card {
        height: 75vh;
        padding: 3rem;
    }
}

/* --- Media Queries (991px and below - Tablet) --- */
@media screen and (max-width: 991px) {
    :root {
        --kd-bezel-padding: 15px;
        --kd-bezel-radius: 20px;
        --kd-container-padding: 4vw;
    }

    /* Navigation collapsing */
    .kd-nav-desktop {
        display: none;
        /* Hide desktop menu bar */
    }

    /* Hero layout */
    .kd-hero-header {
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: start;
    }

    .kd-hero-title {
        font-size: 12vw;
    }

    .kd-hero-title sup {
        font-size: 3vw;
        top: -4vw;
    }

    .kd-hero-intro-wrapper {
        max-width: 100%;
        margin-bottom: 0;
    }

    .kd-hero-visual-container {
        height: 60vh;
    }

    /* About section */
    .kd-about-top {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 3.5rem;
    }

    .kd-about-heading {
        font-size: 2.2rem;
    }

    .kd-about-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }

    .kd-about-card {
        min-height: 300px;
        padding: 1.8rem;
    }

    .kd-card-number {
        font-size: 3.5rem;
    }

    /* Services section */
    .kd-services-top {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .kd-services-heading {
        font-size: 2.5rem;
    }

    .kd-services-info-col {
        max-width: 100%;
        margin-top: 0;
    }

    .kd-row-content-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .kd-service-row.active .kd-row-visuals {
        position: relative;
        display: flex;
        justify-content: flex-start;
        margin-top: 1.5rem;
    }

    .kd-row-closed-desc {
        display: none;
        /* Hide side-by-side desc on tablet for space */
    }

    /* Featured Projects tablet overrides */
    .kd-featured-stack-card {
        height: 70vh;
        padding: 2.5rem;
    }

    .kd-featured-details-title {
        font-size: 2rem;
    }

    .kd-featured-details-right {
        gap: 2.5rem;
    }

    /* Process Section */
    .kd-process-step {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2.5rem 0;
    }

    .kd-process-num-col {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .kd-process-step-num {
        top: 0;
    }

    .kd-process-content-col {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Testimonials Tablet overrides */
    .kd-testimonial-header-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    .kd-testimonial-section-title {
        font-size: 3rem;
    }

    .kd-testimonial-row-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .kd-partners-ticker-wrap {
        margin-top: 4rem;
        padding: 3rem 0;
    }

    /* Footer Tablet overrides */
    .kd-footer-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .kd-footer-logo {
        font-size: 4.5rem;
    }

    .kd-footer-period-wrap {
        align-items: flex-start;
    }

    .kd-footer-underline-line {
        width: 140px;
    }

    .kd-footer-middle-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem 2rem;
    }

    .kd-footer-info-row {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 1.5rem;
    }

    .kd-footer-back-top-item {
        grid-column: span 2;
        display: flex;
        justify-content: center;
    }
}

/* --- Media Queries (767px and below - Mobile Landscape/Portrait) --- */
@media screen and (max-width: 767px) {
    :root {
        --kd-bezel-padding: 8px;
        --kd-bezel-radius: 16px;
        --kd-container-padding: 1.5rem;
    }

    .kd-screen-inner {
        min-height: calc(100vh - (var(--kd-bezel-padding) * 2));
    }

    .kd-header {
        padding: 1.5rem var(--kd-container-padding) 1rem;
    }

    .kd-logo {
        font-size: 1.5rem;
    }

    /* Hamburger line spacing */
    .kd-hamburger-btn {
        padding: 0.3rem;
    }

    .kd-hamburger-line {
        width: 26px;
    }

    /* Overlay Fullscreen Menu */
    .kd-menu-container {
        padding: 3rem var(--kd-container-padding);
        justify-content: flex-start;
        gap: 3rem;
        overflow-y: auto;
    }

    .kd-menu-content-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-top: 1.5rem;
    }

    .kd-menu-link {
        font-size: 2.2rem;
    }

    /* Hero items */
    .kd-hero-section {
        padding: 1rem var(--kd-container-padding) 2.5rem;
        gap: 2rem;
    }

    .kd-hero-title {
        font-size: 13vw;
    }

    .kd-hero-title sup {
        font-size: 4vw;
        top: -5vw;
    }

    .kd-hero-intro-body p {
        font-size: 1.05rem;
    }

    /* Landscape Visual Box */
    .kd-hero-visual-container {
        height: 70vh;
        /* Make it taller to fit overlay components vertically */
    }

    .kd-hero-visual-content {
        padding: 1.5rem;
        justify-content: flex-start;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .kd-hero-trusted {
        max-width: 100%;
        margin-bottom: 1.5rem;
        order: 1;
    }

    .kd-trusted-text {
        font-size: 0.85rem;
    }

    /* Ticker logos stack or shrink */
    .kd-hero-partners {
        gap: 1.2rem;
        order: 2;
        margin-bottom: 2rem;
    }

    .kd-partner-logo {
        height: 14px;
    }

    .kd-partner-svg {
        height: 13px;
    }

    /* Floating Card under visual on mobile: reposition relative to make scroll easier */
    .kd-hero-floating-card {
        position: relative;
        bottom: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        margin-top: auto;
        order: 3;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        padding: 10px;
    }

    .kd-floating-card-image-wrapper {
        height: 140px;
    }

    .kd-card-title {
        font-size: 0.85rem;
    }

    .kd-card-subtitle {
        font-size: 0.7rem;
    }

    /* Section Headings */
    .kd-section-title {
        font-size: 2.2rem;
        margin-bottom: 2.5rem;
    }

    /* About Stat grid vertical */
    .kd-about-heading {
        font-size: 1.6rem;
    }

    .kd-about-cards-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .kd-about-card {
        min-height: 280px;
        padding: 1.5rem;
    }

    .kd-card-number {
        font-size: 3rem;
    }

    .kd-collab-avatars {
        gap: 8px;
    }

    .kd-collab-avatar {
        width: 36px;
        height: 36px;
    }

    /* Accordion items */
    .kd-services-heading {
        font-size: 2rem;
    }

    .kd-service-row {
        padding: 2rem 0;
    }

    .kd-row-index {
        width: 10vw;
    }

    .kd-row-title {
        font-size: 1.4rem;
    }

    .kd-row-desc {
        font-size: 0.95rem;
    }

    .kd-row-visuals {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .kd-visual-circle {
        width: 100px;
        height: 100px;
    }

    .kd-visual-rect {
        width: 130px;
        height: 100px;
        border-radius: 12px;
    }

    .kd-row-btn-col {
        width: 2.5rem;
    }

    .kd-row-toggle-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .kd-services-cta-bottom {
        margin-top: 3rem;
    }

    /* Projects slick adjustment */
    .kd-project-img-container {
        height: 320px;
    }

    .kd-project-title {
        font-size: 1.3rem;
    }

    .kd-slider-nav-arrows {
        margin-bottom: 1.5rem;
    }

    .kd-slider-arrow {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    /* Featured Projects stack mobile overrides */
    .kd-featured-stack {
        gap: 20px;
    }

    .kd-featured-stack-card {
        position: relative;
        /* Disable sticky stacking on mobile for ease of touch scroll */
        top: 0 !important;
        height: auto;
        min-height: 460px;
        padding: 2.2rem 1.5rem;
        border-radius: 18px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .kd-featured-card-top {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .kd-featured-card-desc {
        font-size: 0.9rem;
        max-width: 100%;
    }

    .kd-featured-card-index {
        text-align: left;
        font-size: 0.95rem;
    }

    .kd-featured-card-center {
        height: auto;
        margin: 3.5rem 0;
    }

    .kd-featured-logo-svg {
        height: 35px;
    }

    .kd-featured-hover-controls {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .kd-featured-btn-next {
        padding: 0.8rem 1.6rem;
        font-size: 0.85rem;
    }

    .kd-featured-card-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .kd-featured-details-title {
        font-size: 1.6rem;
        margin-bottom: 0.8rem;
    }

    .kd-featured-details-right {
        width: 100%;
        gap: 2rem;
        justify-content: space-between;
    }

    /* Process steps text columns */
    .kd-process-step-title {
        font-size: 1.4rem;
    }

    .kd-process-step-desc {
        font-size: 1rem;
    }

    /* Testimonials Mobile overrides */
    .kd-testimonial-header-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin-bottom: 2.5rem;
    }

    .kd-testimonial-section-title {
        font-size: 2.2rem;
    }

    .kd-testimonial-header-desc {
        font-size: 1rem;
    }

    .kd-testimonial-row-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .kd-testimonial-card {
        padding: 1.8rem 1.5rem;
    }

    .kd-rating-card-middle {
        margin: 2rem 0;
    }

    .kd-rating-big-num {
        font-size: 4rem;
    }

    .kd-rating-card-bottom {
        gap: 1.5rem;
    }

    .kd-testimonial-bottom-arrows-row {
        justify-content: center;
        margin-top: 1.5rem;
        padding-right: 0;
    }

    .kd-partners-ticker-wrap {
        margin-top: 3rem;
        padding: 2.5rem 0;
    }

    .kd-test-partner {
        font-size: 1.1rem;
    }

    /* Footer Mobile overrides */
    .kd-footer {
        padding: 3rem var(--kd-container-padding) 2rem;
    }

    .kd-footer-logo {
        font-size: 3.2rem;
    }

    .kd-footer-period {
        font-size: 1.6rem;
    }

    .kd-footer-middle-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .kd-footer-email-link {
        font-size: 1.6rem;
    }

    .kd-footer-info-row {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: left;
    }

    .kd-footer-back-top-item {
        grid-column: span 1;
        justify-content: flex-start;
    }

    .kd-footer-legal-row {
        flex-direction: column-reverse;
        gap: 1.5rem;
        align-items: flex-start;
    }

    .kd-footer-legal-right {
        gap: 1.5rem;
        flex-direction: column;
    }

    /* Preloader Mobile Overrides */
    .kd-preloader-logo {
        font-size: 1.8rem;
    }

    .kd-preloader-percent-wrap {
        font-size: 3rem;
    }

    .kd-preloader-bar-wrap {
        width: 140px;
    }
}

/* --- High-end Pointer Device hover disable triggers --- */
@media (hover: none) {

    /* Disable custom cursor on touch devices */
    .kd-custom-cursor,
    .kd-cursor-follower {
        display: none !important;
    }

    body {
        cursor: default !important;
    }
}

/* ==========================================================================
   Subpages Responsive Styles (Tablet and Mobile Viewports)
   ========================================================================== */

/* --- Tablet Devices (max-width: 991px) --- */
@media (max-width: 991px) {
    .kd-about-page-title {
        font-size: 3.8rem;
        margin-bottom: 2.5rem;
    }

    .kd-about-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .kd-about-hero-left .kd-about-hero-lead {
        font-size: 1.4rem;
    }

    .kd-resume-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .kd-skills-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .kd-project-hero-title {
        font-size: 3.8rem;
        margin-bottom: 2rem;
    }

    .kd-project-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }

    .kd-case-narrative-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .kd-next-case-title {
        font-size: 3.2rem;
    }

    .kd-next-case-link i {
        font-size: 2.5rem;
    }

    .kd-contact-page-title {
        font-size: 3.8rem;
    }

    .kd-contact-form-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

/* --- Mobile Devices (max-width: 767px) --- */
@media (max-width: 767px) {
    .kd-about-page-title {
        font-size: 2.6rem;
    }

    .kd-about-profile-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }

    .kd-skills-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .kd-project-hero-title {
        font-size: 2.6rem;
    }

    .kd-project-meta-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .kd-gallery-split-row {
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .kd-next-case-title {
        font-size: 2.2rem;
    }

    .kd-next-case-link i {
        font-size: 1.8rem;
    }

    .kd-contact-page-title {
        font-size: 2.6rem;
    }

    .kd-contact-page-lead {
        font-size: 1.2rem;
    }

    .kd-contact-form-container {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }

    .kd-contact-info-link {
        font-size: 1.6rem;
    }

    .kd-premium-form {
        gap: 2rem;
    }

    .kd-budget-selector {
        gap: 0.5rem;
    }

    .kd-budget-tag-pill {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}

/* --- Case Study Detailed Pages (9 Sections Responsive Layout) --- */
@media (max-width: 991px) {
    .kd-case-section {
        padding: 10vw var(--kd-container-padding);
    }

    .kd-case-title {
        font-size: 2.8rem;
        margin-bottom: 2.5rem;
    }

    .kd-overview-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        margin-bottom: 3.5rem;
    }

    .kd-overview-lead {
        font-size: 1.25rem;
    }

    .kd-challenge-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .kd-challenge-box {
        padding: 2.5rem;
    }

    .kd-research-cards-row {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .kd-ideation-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .kd-journey-flow {
        flex-direction: column;
        gap: 1.5rem;
    }

    .kd-journey-node {
        width: 100%;
    }

    .kd-journey-arrow {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }

    .kd-wireframes-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .kd-wireframe-images-row {
        gap: 1.5rem;
    }

    .kd-design-system-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .kd-visual-split-gallery {
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .kd-prototype-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .kd-embedded-figma-mock {
        max-width: 100%;
    }

    .kd-testing-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .kd-metrics-row {
        flex-direction: row;
        gap: 1.5rem;
    }

    .kd-metric-box {
        flex: 1;
        padding: 2rem;
    }
}

@media (max-width: 767px) {
    .kd-case-title {
        font-size: 2.2rem;
    }

    .kd-challenge-box {
        padding: 2rem;
    }

    .kd-wireframe-images-row {
        grid-template-columns: 1fr;
    }

    .kd-color-tokens {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .kd-figma-body {
        height: 320px;
    }

    .kd-figma-play-btn {
        padding: 1rem 1.8rem;
        font-size: 0.9rem;
    }

    .kd-metrics-row {
        flex-direction: column;
    }

    .kd-research-cards-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* --- Projects Archive Catalog Listing Page Overrides --- */
@media (max-width: 991px) {
    .kd-projects-list-title {
        font-size: 3.8rem;
    }

    .kd-catalog-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 1.8rem;
    }
}

@media (max-width: 767px) {
    .kd-projects-list-title {
        font-size: 2.6rem;
    }

    .kd-projects-list-lead {
        font-size: 1.25rem;
    }

    .kd-catalog-filter-bar {
        gap: 0.5rem;
        margin-bottom: 2.5rem;
    }

    .kd-filter-btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .kd-catalog-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .kd-catalog-img-wrap {
        height: 280px;
    }

    .kd-catalog-card-title {
        font-size: 1.4rem;
    }
}