/* ============================================================
   RESPONSIVE.CSS - Media Queries (Mobile-First)
   Breakpoints: <768px (mobile), 768-1024px (tablet), >1024px (desktop)
   ============================================================ */

/* ============================================================
   TABLET (768px and up)
   ============================================================ */
@media (min-width: 768px) {

    /* Variables */
    :root {
        --container-padding: var(--spacing-6);
        --header-height-mobile: var(--header-height);
    }

    /* Typography */
    h1 {
        font-size: var(--font-size-5xl);
    }

    h2 {
        font-size: var(--font-size-4xl);
    }

    h3 {
        font-size: var(--font-size-3xl);
    }

    /* Layout */
    body {
        padding-top: var(--header-height);
    }

    .section {
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-12);
    }

    .section-lg {
        padding-top: var(--spacing-24);
        padding-bottom: var(--spacing-24);
    }

    /* Header */
    .header {
        height: var(--header-height);
    }

    .menu-toggle {
        display: none;
    }

    .nav {
        display: flex;
        align-items: center;
    }

    .mobile-nav {
        display: none;
    }

	    /* Hero */
	    .hero {
	        justify-content: flex-start;
	        padding: calc(var(--spacing-16) * 1.0) 0 var(--spacing-12);
	    }

	    .hero-content {
	        flex-direction: row;
	        align-items: flex-end;
	        justify-content: space-between;
	        gap: var(--spacing-12);
	    }

	    .hero-qr {
	        flex: 0 0 220px;
	    }

	    /* Methodology process (home) */
	    .methodology-process {
	        grid-template-columns: repeat(4, minmax(0, 1fr));
	    }

	    .methodology-step::after {
	        display: block;
	        position: absolute;
	        top: calc(var(--spacing-6) + 10px);
	        left: 100%;
	        width: var(--spacing-8);
	        height: 1px;
	        background: var(--border-color);
	        pointer-events: none;
	    }

	    .methodology-step:last-child::after {
	        display: none;
	    }

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

    /* Knowledge */
    .knowledge-hero-inner {
        grid-template-columns: 1.45fr 1fr;
        align-items: end;
        gap: var(--spacing-8);
    }

    .knowledge-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .knowledge-integrated-grid {
        grid-template-columns: 1.2fr 1fr;
        align-items: start;
    }

    /* Expertise */
    .expertise-hero-inner {
        grid-template-columns: 1.15fr 1fr;
        align-items: end;
        gap: var(--spacing-8);
    }

    .expertise-stack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Advisory */
    .advisory-hero-inner {
        grid-template-columns: 1.2fr 1fr;
        align-items: end;
        gap: var(--spacing-8);
    }

    .advisory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }

    /* Grid utilities */
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Flex utilities */
    .md\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }

    /* Display utilities */
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:flex { display: flex; }

    /* ----------------------------------------
       PROJECTS PAGE - TABLET
       ---------------------------------------- */

	    /* Projects Grid */
	    .projects-grid {
	        grid-template-columns: repeat(2, 1fr);
	    }

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

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

    /* Projects List */
    .project-list-item {
        grid-template-columns: 2fr 1fr 1fr;
        align-items: center;
    }

    .project-list-meta {
        justify-content: flex-end;
    }

    /* Filters */
    .filters-row {
        flex-wrap: nowrap;
        align-items: center;
    }

    /* Project Landing */
    .challenge-solution-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tech-stack-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

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

/* ============================================================
   DESKTOP (1024px and up)
   ============================================================ */
@media (min-width: 1024px) {

    /* Variables */
    :root {
        --container-padding: var(--spacing-8);
    }

    /* Typography */
    h1 {
        font-size: var(--font-size-6xl);
    }

    /* Nav */
    .nav-list {
        gap: var(--spacing-10);
    }

    .nav-link {
        font-size: var(--font-size-base);
    }

    /* Hero */
    .hero-actions {
        gap: var(--spacing-6);
    }

    /* Knowledge */
    .knowledge-hero {
        padding-top: calc(var(--spacing-16) * 0.95);
        padding-bottom: var(--spacing-12);
    }

    .knowledge-content {
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-14);
    }

    .knowledge-timeline {
        gap: var(--spacing-6);
    }

    /* Expertise */
    .expertise-hero {
        padding-top: calc(var(--spacing-16) * 0.95);
        padding-bottom: var(--spacing-12);
    }

    .expertise-content {
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-14);
    }

    .expertise-stack-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-5);
    }

    /* Advisory */
    .advisory-hero {
        padding-top: calc(var(--spacing-16) * 0.95);
        padding-bottom: var(--spacing-12);
    }

    .advisory-content {
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-14);
    }

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

    /* Grid utilities */
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Display utilities */
    .lg\:hidden { display: none; }
    .lg\:block { display: block; }
    .lg\:flex { display: flex; }

    /* ----------------------------------------
       PROJECTS PAGE - DESKTOP
       ---------------------------------------- */

    /* Projects Grid */
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-8);
    }

    /* Project Card hover effects */
    .project-card {
        transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    .project-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    /* Project Landing */
    .project-hero {
        padding: var(--spacing-16) 0 var(--spacing-20);
    }

    .project-section {
        padding: var(--spacing-16) 0;
    }

    .tech-stack-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .related-projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   LARGE DESKTOP (1280px and up)
   ============================================================ */
@media (min-width: 1280px) {

    /* Grid utilities */
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

    /* Projects */
    .projects-grid {
        gap: var(--spacing-10);
    }
}

/* ============================================================
   EXPERTISE PAGE
   ============================================================ */

/* Timeline */
.timeline {
    position: relative;
    padding-left: var(--spacing-8);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--border-color);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--spacing-8);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(var(--spacing-8) * -1);
    top: 8px;
    width: 12px;
    height: 12px;
    background-color: var(--color-primary);
    transform: translateX(-5px);
    /* NO BORDER RADIUS */
}

.timeline-date {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    margin-bottom: var(--spacing-2);
}

.timeline-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-1);
}

.timeline-company {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-4);
}

.timeline-description {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
    .timeline {
        padding-left: var(--spacing-12);
    }

    .timeline-item::before {
        left: calc(var(--spacing-12) * -1);
    }
}

/* Tech Stack Grid */
.expertise-tech-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .expertise-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .expertise-tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Certifications */
.certifications-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

.certification-item {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    border: var(--border-width) solid var(--border-color);
    /* NO BORDER RADIUS */
}

.certification-badge {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-color: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    /* NO BORDER RADIUS */
}

.certification-info h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-1);
}

.certification-info p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 0;
}

@media (min-width: 768px) {
    .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   ADVISORY PAGE
   ============================================================ */

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

.service-card {
    padding: var(--spacing-8);
    border: var(--border-width) solid var(--border-color);
    transition: border-color var(--transition-fast);
    /* NO BORDER RADIUS */
}

.service-card:hover {
    border-color: var(--color-primary);
}

.service-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-4);
    color: var(--color-accent);
}

.service-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
}

.service-description {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Process Steps */
.process-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
    counter-reset: process;
}

.process-step {
    position: relative;
    padding: var(--spacing-6);
    padding-left: var(--spacing-16);
    border: var(--border-width) solid var(--border-color);
    counter-increment: process;
    /* NO BORDER RADIUS */
}

.process-step::before {
    content: counter(process);
    position: absolute;
    left: var(--spacing-4);
    top: var(--spacing-6);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    background-color: var(--color-primary);
    color: var(--color-bg);
    /* NO BORDER RADIUS */
}

.process-step-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-2);
}

.process-step-description {
    font-size: var(--font-size-base);
    color: var(--color-text);
}

@media (min-width: 768px) {
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .process-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================
   KNOWLEDGE PAGE
   ============================================================ */

/* Featured Book */
.featured-book {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    padding: var(--spacing-8);
    background-color: var(--color-gray-100);
    margin-bottom: var(--spacing-12);
    /* NO BORDER RADIUS */
}

.featured-book-cover {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 2/3;
    object-fit: cover;
    background-color: var(--color-gray-200);
    /* NO BORDER RADIUS */
}

.featured-book-info h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
}

.featured-book-info p {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
    .featured-book {
        grid-template-columns: auto 1fr;
    }

    .featured-book-cover {
        width: 200px;
    }
}

/* Articles Grid */
.articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

.article-card {
    border: var(--border-width) solid var(--border-color);
    overflow: hidden;
    transition: border-color var(--transition-fast);
    /* NO BORDER RADIUS */
}

.article-card:hover {
    border-color: var(--color-primary);
}

.article-card-image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background-color: var(--color-gray-100);
}

.article-card-content {
    padding: var(--spacing-6);
}

.article-card-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-2);
}

.article-card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-3);
    line-height: var(--line-height-snug);
}

.article-card-excerpt {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .articles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

/* Contact Grid */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-12);
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-16);
    }
}

/* Contact Info */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.contact-info-item {
    display: flex;
    gap: var(--spacing-4);
}

.contact-info-icon {
    width: 24px;
    height: 24px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.contact-info-content h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-1);
}

.contact-info-content p,
.contact-info-content a {
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.contact-info-content a:hover {
    color: var(--color-accent);
}

/* Contact Form */
.contact-form {
    padding: var(--spacing-8);
    border: var(--border-width) solid var(--border-color);
    /* NO BORDER RADIUS */
}

@media (min-width: 768px) {
    .contact-form {
        padding: var(--spacing-10);
    }
}

/* Form Row (side by side fields) */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   PILLARS SECTION (HOME)
   ============================================================ */
.pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
}

.pillar-item {
    padding: var(--spacing-8);
    border: var(--border-width) solid var(--border-color);
    transition: border-color var(--transition-fast);
    /* NO BORDER RADIUS */
}

.pillar-item:hover {
    border-color: var(--color-primary);
}

.pillar-number {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-200);
    line-height: 1;
    margin-bottom: var(--spacing-4);
}

.pillar-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
}

.pillar-description {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
}

@media (min-width: 768px) {
    .pillars-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .header,
    .footer,
    .mobile-nav,
    .menu-toggle,
    .flowise-widget {
        display: none !important;
    }

    body {
        padding-top: 0;
    }

    .section {
        page-break-inside: avoid;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}