/* ═══════════════════════════════════════════════════════════
   IJS Website - Responsive Styles
   All media queries consolidated
   Breakpoints: 480px, 768px, 1024px, 1400px
   ═══════════════════════════════════════════════════════════ */

/* ── Wide Desktop (≤1400px) ── */
@media (max-width: 1400px) {
    .hero-title {
        font-size: var(--text-5xl);
    }

    /* HOME */
    .home-section-title {
        font-size: var(--text-3xl);
    }
}

/* ── Desktop (≤1024px) ── */
@media (max-width: 1024px) {
    /* Header */
    .header-nav {
        display: none;
    }

    .header-mobile-btn {
        display: flex;
    }

    .header-logo img,
    .header-logo svg {
        height: 32px;
    }

    /* Hero */
    .hero {
        height: 80vh;
        min-height: 500px;
    }

    .hero-title {
        font-size: var(--text-4xl);
    }

    .hero-desc {
        font-size: var(--text-lg);
    }

    /* Sub Visual */
    .sv {
        height: 280px;
    }

    .sv-title {
        font-size: var(--text-3xl);
    }

    .sub-visual {
        height: 280px;
    }

    .sub-visual-title {
        font-size: var(--text-3xl);
    }

    /* ESG content layout */
    .esg-content-wrap {
        grid-template-columns: 1fr;
    }

    .esg-content-reverse {
        direction: ltr;
    }

    .esg-card-grid.grid-3 {
        grid-template-columns: 1fr;
    }

    .esg-card {
        padding: var(--space-6);
    }

    .section-desc {
        font-size: var(--text-base);
    }

    /* Talent grid */
    .talent-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Card grid responsive */
    .card-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Layout */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* About page */
    .about-figures {
        grid-template-columns: repeat(3, 1fr);
    }
    .about-certs {
        grid-template-columns: 1fr 1fr;
    }
    .about-milestones {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer — stack on tablet */
    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .footer-contact-inline {
        flex-direction: column;
        gap: var(--space-2);
    }

    /* Content sections */
    .main-section {
        padding: var(--space-16) 0;
    }

    .main-section-title {
        font-size: var(--text-3xl);
    }

    /* Mega menu - disable */
    .mega-menu {
        display: none;
    }

    /* Product */
    .product-process {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .rnd-capabilities {
        grid-template-columns: repeat(2, 1fr);
    }

    .partnership-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Board */
    .board-item-num {
        display: none;
    }

    .board-item-views {
        display: none;
    }

    /* About overview */
    .about-overview {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    /* CEO section */
    .ceo-section {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .ceo-photo {
        max-width: 300px;
        margin: 0 auto;
    }

    /* Tech slide */
    .tech-slide {
        grid-template-columns: 1fr;
    }

    /* Sub visual small */
    .sub-visual-sm {
        height: 160px;
    }

    /* HOME — KPI */
    .home-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
    .home-kpi-num {
        font-size: var(--text-3xl);
    }

    /* HOME — Tech cards */
    .home-section {
        padding: 80px 0;
    }
    .home-section-header {
        margin-bottom: 40px;
    }
    .home-tech-card-body {
        padding: 32px;
    }
    .home-tech-card-body h3 {
        font-size: var(--text-xl);
    }

    /* HOME — Applications */
    .home-app-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* HOME — Snapshot */
    .home-snapshot {
        gap: 32px;
    }

    /* HOME — CTA */
    .home-cta {
        padding: 64px 0;
    }
    .home-cta-inner h2 {
        font-size: var(--text-2xl);
    }

    /* TECH — Process grid */
    .tech-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* TECH — Spec table */
    .tech-spec-table thead th,
    .tech-spec-table tbody td {
        padding: 12px 16px;
        font-size: var(--text-sm);
    }

    /* Performance Strip */
    .perf-strip-inner {
        gap: 0;
        padding: 24px 16px;
    }
    .perf-strip-item {
        padding: 0 20px;
    }
    .perf-strip-value {
        font-size: var(--text-xl);
    }
    .perf-strip-label {
        font-size: var(--text-xs);
    }

    /* Engineering Process */
    .eng-process-flow {
        flex-wrap: wrap;
        gap: 8px;
    }
    .eng-process-item {
        flex: 0 0 calc(33.333% - 16px);
        max-width: none;
        padding: 20px 12px;
    }
    .eng-process-arrow {
        display: none;
    }

    /* Client Logo Grid — 5 col */
    .client-logo-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }
    .client-logo-item {
        height: 100px;
    }
}

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {
    /* Typography */
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    h4 { font-size: var(--text-xl); }

    /* Header */
    .header {
        height: 64px;
    }

    .header-inner {
        padding: 0 var(--space-4);
    }

    /* Hero */
    .hero {
        height: 70vh;
        min-height: 450px;
    }

    .hero-title {
        font-size: var(--text-3xl);
    }

    .hero-subtitle {
        font-size: var(--text-sm);
    }

    .hero-desc {
        font-size: var(--text-base);
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-scroll {
        display: none;
    }

    /* Sub Visual */
    .sv {
        height: 220px;
        margin-top: 64px;
    }

    .sv-title {
        font-size: var(--text-2xl);
    }

    .sub-visual {
        height: 220px;
        margin-top: 64px;
    }

    .sub-visual-title {
        font-size: var(--text-2xl);
    }

    .sub-visual-breadcrumb {
        font-size: var(--text-xs);
    }

    /* Section header */
    .section-header .section-title {
        font-size: var(--text-2xl);
    }

    /* Board toolbar */
    .board-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .board-search .form-control {
        min-width: 0;
        flex: 1;
    }

    /* Card grid */
    .card-grid-3 {
        grid-template-columns: 1fr;
    }

    /* Contact */
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .contact-card {
        padding: var(--space-6);
    }

    /* ESG content */
    .esg-content-wrap {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    /* Section tabs */
    .section-tabs {
        top: 64px;
    }

    .section-tab {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-xs);
    }

    /* Container */
    .container {
        padding: 0 var(--space-4);
    }

    /* About page */
    .about-figures {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    .about-figure-num {
        font-size: var(--text-3xl);
    }
    .about-certs {
        grid-template-columns: 1fr;
    }
    .about-milestones {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grid */
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: 1fr;
    }

    .product-features {
        grid-template-columns: 1fr;
    }

    .product-apps {
        grid-template-columns: 1fr;
    }

    .rnd-capabilities {
        grid-template-columns: 1fr;
    }

    .partnership-benefits {
        grid-template-columns: 1fr;
    }

    .contact-extra {
        grid-template-columns: 1fr;
    }

    /* Section spacing */
    .section {
        padding: var(--space-12) 0;
    }

    .main-section {
        padding: var(--space-12) 0;
    }

    .main-section-title {
        font-size: var(--text-2xl);
    }

    .section-title {
        font-size: var(--text-2xl);
    }

    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Footer — stacked on mobile */
    .footer {
        padding: var(--space-8) 0 0;
    }

    .footer-inner {
        padding: 0 var(--space-4);
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .footer-col-brand {
        grid-column: auto;
    }

    .footer-cta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .footer-cta-info {
        flex-direction: column;
        gap: var(--space-2);
    }

    .footer-cta-contact {
        flex-direction: column;
        gap: var(--space-1);
    }

    .footer-cta-btn {
        width: 100%;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }

    /* Contact */
    .contact-map {
        height: 280px;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
    }

    /* Timeline — revert to left-aligned on mobile */
    .timeline::before {
        left: 15px;
        transform: none;
    }

    .timeline-item {
        width: 100%;
        padding-left: var(--space-10);
        padding-right: 0;
        text-align: left;
    }

    .timeline-left,
    .timeline-right {
        margin-left: 0;
        padding-left: var(--space-10);
        padding-right: 0;
        text-align: left;
    }

    .timeline-left .timeline-dot,
    .timeline-right .timeline-dot {
        left: 8px;
        right: auto;
    }

    .timeline-left .timeline-dot--highlight,
    .timeline-right .timeline-dot--highlight {
        left: 6px;
        right: auto;
    }

    .timeline-left .timeline-highlight .timeline-dot,
    .timeline-right .timeline-highlight .timeline-dot {
        left: 6px;
        right: auto;
    }

    .timeline-year {
        font-size: var(--text-xl);
    }

    .timeline-card {
        padding: var(--space-3);
    }

    .timeline-card--highlight {
        border-left: 3px solid var(--ijs-primary);
    }
    .timeline-right .timeline-card--highlight {
        border-right: 1px solid var(--ijs-border-light);
        border-left: 3px solid var(--ijs-primary);
    }

    .timeline-decade {
        padding: var(--space-4) 0 var(--space-3);
    }

    .timeline-decade-year {
        font-size: var(--text-base);
        padding: var(--space-1) var(--space-4);
    }

    /* History decade nav */
    .history-decade-nav {
        gap: 8px;
    }
    .history-decade-btn {
        padding: var(--space-2) var(--space-3);
    }
    .history-decade-btn-year {
        font-size: var(--text-base);
    }
    .history-decade-btn-label {
        font-size: 10px;
    }

    /* TECH — Process grid */
    .tech-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .tech-process-step {
        padding: 24px 16px;
    }
    .tech-process-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* TECH — Spec table */
    .tech-spec-table thead th,
    .tech-spec-table tbody td {
        padding: 10px 12px;
        font-size: var(--text-xs);
    }
    .tech-spec-table tbody td:first-child {
        white-space: normal;
        padding-left: 24px;
    }
    .tech-spec-table tbody td:first-child::before {
        left: 10px;
        width: 4px;
        height: 4px;
    }

    /* Perf-strip footnote */
    .perf-strip-footnote {
        text-align: center;
        padding: 4px 16px 0;
    }

    /* Patent grid */
    .patent-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    /* Board */
    .board-item {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .board-item-date {
        flex: 0 0 auto;
        text-align: left;
    }

    /* Board detail */
    .board-detail-title {
        font-size: var(--text-2xl);
    }

    .board-detail-nav {
        flex-direction: column;
        gap: var(--space-3);
    }

    /* Error page */
    .error-code {
        font-size: 80px;
    }

    /* Search overlay */
    .search-overlay-input {
        font-size: var(--text-xl);
        padding: var(--space-4) var(--space-5);
    }

    /* Scroll top */
    .scroll-top {
        width: 40px;
        height: 40px;
        bottom: var(--space-4);
        right: var(--space-4);
    }

    /* Product */
    .product-card {
        aspect-ratio: 16/9;
    }

    .product-card-title {
        font-size: var(--text-xl);
    }

    /* About overview */
    .about-overview {
        grid-template-columns: 1fr;
    }

    /* CEO section */
    .ceo-section {
        grid-template-columns: 1fr;
    }

    .ceo-greeting-title {
        font-size: var(--text-2xl);
    }

    .ceo-sign {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Board view */
    .board-view-title {
        font-size: var(--text-2xl);
    }

    .board-nav {
        flex-direction: column;
        gap: var(--space-3);
    }

    .board-nav-item {
        max-width: 100%;
    }

    .board-nav-next {
        align-items: flex-start;
        text-align: left;
    }

    /* HOME — KPI */
    .home-kpi {
        padding: 32px 0;
    }
    .home-kpi-grid {
        gap: 20px;
    }
    .home-kpi-num {
        font-size: var(--text-xl);
    }
    .home-kpi-label {
        font-size: var(--text-xs);
    }

    /* HOME — Sections */
    .home-section {
        padding: 48px 0;
    }
    .home-section-title {
        font-size: var(--text-xl);
    }

    /* HOME — Tech cards */
    .home-tech-card-body {
        padding: 20px;
    }
    .home-tech-card-body h3 {
        font-size: var(--text-lg);
    }
    .home-tech-card-body p {
        font-size: var(--text-sm);
    }

    /* HOME — Applications */
    .home-app-grid {
        grid-template-columns: 1fr;
    }
    .home-app-card {
        padding: 20px 16px;
    }

    /* HOME — Snapshot */
    .home-snapshot-facts {
        flex-direction: column;
        gap: 8px;
    }
    .home-snapshot-lead {
        font-size: var(--text-base);
    }

    /* HOME — CTA */
    .home-cta {
        padding: 40px 0;
    }
    .home-cta-inner h2 {
        font-size: var(--text-lg);
    }
    .home-cta-inner p {
        font-size: var(--text-sm);
    }

    /* TECH — Process grid */
    .tech-process-grid {
        grid-template-columns: 1fr;
    }
    .tech-process-step {
        padding: 20px 16px;
    }
    .tech-process-num {
        font-size: var(--text-2xl);
    }

    /* Performance Strip — stack to 2x2 */
    .perf-strip-inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        padding: 24px 16px;
    }
    .perf-strip-item {
        flex: 0 0 auto;
        padding: 0 16px;
    }
    .perf-strip-divider {
        display: none;
    }
    .perf-strip-value {
        font-size: var(--text-lg);
    }

    /* Engineering Process — 2 col */
    .eng-process-flow {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .eng-process-item {
        flex: none;
        max-width: none;
        padding: 20px 12px;
    }
    .eng-process-arrow {
        display: none;
    }
    .eng-process-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    /* Client Logo Grid — 4 col */
    .client-logo-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    .client-logo-item {
        height: 90px;
    }

    /* Recruit list */
    .recruit-item {
        flex-wrap: wrap;
    }

    /* Tech slide */
    .tech-slide {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* Patent grid */
    .patent-card-image {
        aspect-ratio: 1/1;
    }

    /* Policy items */
    .policy-item {
        flex-direction: column;
        gap: var(--space-3);
        align-items: flex-start;
    }

    /* Sub visual small */
    .sub-visual-sm {
        height: 140px;
        margin-top: 64px;
    }

    /* HOME — KPI */
    .home-kpi {
        padding: 40px 0;
    }
    .home-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .home-kpi-num {
        font-size: var(--text-2xl);
    }
    .home-kpi-item i {
        font-size: 22px;
        margin-bottom: 8px;
    }

    /* HOME — Sections */
    .home-section {
        padding: 64px 0;
    }
    .home-section-header {
        margin-bottom: 32px;
    }
    .home-section-title {
        font-size: var(--text-2xl);
    }
    .home-section-desc {
        font-size: var(--text-base);
    }

    /* HOME — Tech cards */
    .home-tech-card {
        grid-template-columns: 1fr;
    }
    .home-tech-card:nth-child(even) {
        direction: ltr;
    }
    .home-tech-card-visual {
        aspect-ratio: 16/9;
    }
    .home-tech-card-body {
        padding: 28px;
    }
    .home-tech-card-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
        margin-bottom: 16px;
    }
    .home-tech-card-body h3 {
        font-size: var(--text-xl);
    }

    /* HOME — Applications */
    .home-app-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .home-app-card {
        padding: 24px 16px;
    }
    .home-app-card i {
        font-size: 28px;
        margin-bottom: 12px;
    }
    .home-app-card h3 {
        font-size: var(--text-base);
    }

    /* HOME — Snapshot */
    .home-snapshot {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .home-snapshot-facts {
        gap: 12px;
    }
    .home-snapshot-fact {
        padding: 12px;
    }
    .home-snapshot-fact strong {
        font-size: var(--text-base);
    }

    /* HOME — CTA */
    .home-cta {
        padding: 56px 0;
    }
    .home-cta-inner h2 {
        font-size: var(--text-xl);
    }
    .home-cta-inner p {
        font-size: var(--text-base);
    }
    .home-cta-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* ── Mobile (≤480px) ── */
@media (max-width: 480px) {
    /* Hero */
    .hero {
        height: 60vh;
        min-height: 400px;
    }

    .hero-title {
        font-size: var(--text-2xl);
    }

    .hero-content {
        width: 95%;
    }

    /* Typography */
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }

    /* Main sections */
    .main-section {
        padding: var(--space-10) 0;
    }

    .main-section-title {
        font-size: var(--text-xl);
    }

    .main-section-desc {
        font-size: var(--text-base);
    }

    /* Cards */
    .card-body {
        padding: var(--space-4);
    }

    .card-title {
        font-size: var(--text-base);
    }

    /* About page */
    .about-figures {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
    .about-figure i {
        font-size: 24px;
    }
    .about-figure-num {
        font-size: var(--text-2xl);
    }
    .about-figure-label {
        font-size: var(--text-xs);
    }
    .about-milestones {
        grid-template-columns: 1fr;
    }
    .about-value-card {
        padding: var(--space-4);
    }

    /* Patent grid */
    .patent-grid {
        grid-template-columns: 1fr;
    }

    /* Product process */
    .product-process {
        grid-template-columns: 1fr;
    }

    /* Culture */
    .culture-values {
        grid-template-columns: 1fr;
    }

    .talent-grid {
        grid-template-columns: 1fr;
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    /* Performance Strip — vertical on mobile */
    .perf-strip-inner {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 24px;
        padding: 20px 16px;
    }
    .perf-strip-item {
        flex: 0 0 auto;
        gap: 8px;
        padding: 0;
    }
    .perf-strip-value {
        font-size: var(--text-base);
    }
    .perf-strip-label {
        font-size: 10px;
    }

    /* Engineering Process — 1 col vertical */
    .eng-process-flow {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .eng-process-item {
        display: flex;
        align-items: flex-start;
        text-align: left;
        gap: 14px;
        padding: 16px;
        background: var(--ijs-bg-alt, #f7f7f8);
        border-radius: var(--radius-lg);
    }
    .eng-process-icon {
        margin: 0;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    .eng-process-num {
        display: none;
    }
    .eng-process-title {
        margin-bottom: 4px;
    }
    .eng-process-desc {
        font-size: var(--text-xs);
    }

    /* Client Logo Grid — 3 col */
    .client-logo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .client-logo-item {
        height: 80px;
        padding: 12px;
    }

    .process-image .img-pc { display: none; }
    .process-image .img-mo { display: inline; }

    .benefit-grid {
        grid-template-columns: 1fr;
    }

    .culture-stats {
        gap: var(--space-6);
        flex-wrap: wrap;
    }

    .recruit-links {
        grid-template-columns: 1fr;
    }

    /* Pagination */
    .pagination a,
    .pagination span {
        min-width: 44px;
        height: 44px;
        font-size: var(--text-xs);
    }

    /* Breadcrumb */
    .breadcrumb {
        display: none;
    }

    /* Tabs */
    .tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
        flex: 0 0 auto;
    }

    /* Mobile nav */
    .mobile-nav {
        width: 100%;
        max-width: 100%;
    }

    /* CEO */
    .ceo-greeting-title {
        font-size: var(--text-xl);
    }

    /* Board item thumb */
    .board-item-thumb {
        flex: 0 0 60px;
        width: 60px;
        height: 45px;
    }

    /* Search form */
    .search-form {
        flex-direction: column;
    }

    /* Info table */
    .info-table th {
        width: 100px;
        padding: var(--space-3);
    }

    .info-table td {
        padding: var(--space-3);
    }
}

/* ── Print ── */
@media print {
    .header,
    .footer,
    .scroll-top,
    .search-overlay,
    .mobile-nav,
    .mobile-nav-overlay,
    .cookie-consent,
    .section-tabs {
        display: none !important;
    }

    .sv {
        margin-top: 0;
        height: auto;
        padding: 20px 0;
    }

    .sub-visual {
        margin-top: 0;
        height: auto;
        padding: 20px 0;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: white;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}