/* ============================================================
   Webcroo Design System — Responsive & Utilities
   ============================================================
   Responsive breakpoints and helper classes using
   the unified design system variables.
   ============================================================ */

/* ==== Tablet Responsive (≤1024px) ==== */
@media (max-width: 1024px) {
    .wc-slide-inner {
        padding: var(--space-2xl) var(--space-3xl) var(--space-4xl);
    }

    .wc-bottom-bar {
        padding: 0 var(--space-3xl);
    }

    .wc-nav-arrow.wc-prev {
        left: 1rem;
    }

    .wc-nav-arrow.wc-next {
        right: 1rem;
    }

    .wch-section {
        padding: var(--space-9xl) var(--space-xl);
    }

    .wch-welcome-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5xl);
    }

    .wch-welcome-visual {
        aspect-ratio: 16 / 10;
        max-height: 480px;
    }

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

    .wch-services-grid .wch-service:last-child {
        grid-column: span 2;
    }

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

    .wch-work-item.is-tall {
        grid-row: span 1;
    }

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

    .wcs-test-col-3 { display: none; }
}

/* ==== Mobile Responsive (≤768px) ==== */
@media (max-width: 768px) {
    .wc-slide-bg {
        background-image: none !important;
        background-color: var(--color-navy-dark);
    }

    .wc-slide.is-active .wc-slide-bg {
        transform: none;
    }

    .wc-slide-overlay {
        background: var(--color-navy-dark);
    }

    .wc-slide-overlay::after {
        display: none;
    }

    .wc-slide-inner {
        padding: var(--space-xl) var(--space-sm) var(--space-3xl);
    }

    .wc-slide-tag {
        font-size: var(--font-size-xs);
        margin-bottom: var(--space-sm);
    }

    .wc-slide-title {
        margin-bottom: var(--space-sm);
    }

    .wc-slide-text {
        margin-bottom: var(--space-2xl);
        font-size: var(--font-size-base);
    }

    .wc-slide-actions {
        gap: var(--space-sm);
    }

    .wc-btn {
        padding: 0.85rem 1.4rem;
        font-size: var(--font-size-sm);
    }

    .wc-bottom-bar {
        padding: 0 var(--space-sm);
        bottom: 1.5rem;
    }

    .wc-nav-arrow {
        width: 44px;
        height: 44px;
    }

    .wc-nav-arrow.wc-prev {
        left: 0.75rem;
    }

    .wc-nav-arrow.wc-next {
        right: 0.75rem;
    }

    .wc-nav-arrow svg {
        width: 18px;
        height: 18px;
    }

    .wc-counter-current {
        font-size: 1.5rem;
    }

    .wc-counter-divider {
        flex-basis: 30px;
        width: 30px;
    }

    .wc-dot {
        width: 24px;
    }

    .wc-dot.is-active {
        width: 40px;
    }

    .wch-section {
        padding: var(--space-8xl) var(--space-lg);
    }

    .wch-services-grid {
        grid-template-columns: 1fr;
    }

    .wch-services-grid .wch-service:last-child {
        grid-column: span 1;
    }

    .wch-work-grid {
        grid-template-columns: 1fr;
    }

    .wch-why-grid {
        grid-template-columns: 1fr;
    }

    .wch-cta {
        padding: var(--space-9xl) var(--space-lg);
    }

    .wch-welcome-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wch-welcome-actions .wch-btn {
        justify-content: center;
    }

    .wch-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wch-cta-actions .wch-btn {
        justify-content: center;
    }

    /* Always show work overlay on mobile for accessibility */
    .wch-work-overlay {
        opacity: 1;
        padding: var(--space-lg);
    }

    /* wcs testimonials — mobile */
    .wcs-test { padding: 4.5rem 1.25rem; }
    .wcs-test-header { margin-bottom: 3rem; }
    .wcs-test-cols { height: 640px; gap: 1rem; }
    .wcs-test-col-2 { display: none; }
    .wcs-test-col { max-width: 100%; width: 100%; }
    .wcs-card { padding: 1.75rem; border-radius: 18px; }
}

/* ==== wcs reduced-motion ==== */
@media (prefers-reduced-motion: reduce) {
    .wcs-test-track { animation: none !important; }
    .wcs-test-cols { height: auto; max-height: 720px; overflow: auto; }
}

/* ==== Small Mobile (≤480px) ==== */
@media (max-width: 480px) {
    .wc-slide-actions {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .wc-nav-arrow {
        display: none;
        /* Rely on swipe/touch */
    }

    .wc-counter {
        gap: 8px;
    }

    .wc-counter-current {
        font-size: 1.25rem;
        min-width: 28px;
    }

    .wc-counter-total {
        font-size: var(--font-size-xs);
    }
}

/* ==== Reduced Motion Preference ==== */
@media (prefers-reduced-motion: reduce) {
    .wc-slide,
    .wc-slide-bg,
    .wc-slide-tag,
    .wc-slide-title,
    .wc-slide-text,
    .wc-slide-actions,
    .wc-btn,
    .wc-nav-arrow,
    .wc-dot,
    .wc-progress-bar,
    .wch-reveal,
    .wch-service,
    .wch-work-item,
    .wch-test,
    .wch-service-icon,
    .wch-work-item img,
    .wch-why-item {
        transition: none !important;
        animation: none !important;
    }
}

/* ==== Helper Classes ==== */
.sr-only,
.wc-sr-only,
.wch-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.no-pointer,
.wc-no-pointer,
.wch-no-pointer {
    pointer-events: none;
}

.wch-text-center {
    text-align: center !important;
}

.wch-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wch-mt-auto {
    margin-top: auto;
}



/* ============================================================
   Divi Footer Widget Overrides
   ============================================================
   Divi renders widget titles as .footer-widget h3/h4 inside
   #footer-widgets. The global h2/h3 sizes in base.css make
   them huge; !important is required to beat Divi's own rules
   and any customizer-generated inline color overrides.
   ============================================================ */
#footer-widgets .footer-widget h1,
#footer-widgets .footer-widget h2,
#footer-widgets .footer-widget h3,
#footer-widgets .footer-widget h4,
#footer-widgets .footer-widget h5,
#footer-widgets .footer-widget h6,
#footer-widgets .footer-widget .widgettitle,
#footer-widgets .footer-widget .widget-title,
#main-footer .widget_block h1,
#main-footer .widget_block h2,
#main-footer .widget_block h3,
#main-footer .widget_block h4,
#main-footer .widget_block h5,
#main-footer .widget_block h6 {
    font-size: 0.68rem !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: var(--letter-spacing-wider) !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin: 0 0 0.75rem !important;
    line-height: 1.2 !important;
}

#footer-widgets .footer-widget ul,
#footer-widgets .footer-widget ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#footer-widgets .footer-widget li {
    padding: 0.2rem 0 !important;
}

#footer-widgets .footer-widget a,
#footer-widgets .footer-widget li a {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: var(--font-size-sm) !important;
    transition: color var(--transition-fast);
}

#footer-widgets .footer-widget a:hover,
#footer-widgets .footer-widget li a:hover {
    color: var(--color-accent) !important;
}

/* ============================================================
   About Page Responsive (wc-)
   ============================================================ */
@media (max-width: 1024px) {
    .wc-section   { padding: 5rem 1.5rem; }
    .wc-hero      { padding: 7rem var(--space-xl) 6rem; }
    .wc-story-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .wc-story-side { position: static; }
    .wc-skills-grid { gap: 1rem; }
    .wc-skill ul { grid-template-columns: 1fr; }
    .wc-process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .wc-section  { padding: 4.5rem 1.25rem; }
    .wc-hero     { padding: 6rem var(--space-lg) 5rem; }
    .wc-cta      { padding: 5rem 1.25rem; }
    .wc-distinct-grid { grid-template-columns: 1fr; }
    .wc-distinct-card { padding: 2rem; }
    .wc-skills-grid   { grid-template-columns: 1fr; }
    .wc-process-grid  { grid-template-columns: 1fr; gap: 2rem; }
    .wc-hero-actions  { flex-direction: column; align-items: stretch; }
    .wc-hero-actions .wc-about .wc-btn { justify-content: center; }
    .wc-cta-actions   { flex-direction: column; align-items: stretch; }
    .wc-cta-actions .wc-about .wc-btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .wc-reveal, .wc-distinct-card, .wc-skill, .wc-process-step,
    .wc-about .wc-btn, .wc-distinct-icon, .wc-skill-icon, .wc-process-num {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   Homepage Breakpoint Customizations
   ============================================================ */

/* ============================================================
   Webcroo Services Hub — Responsive (wcsv-)
   ============================================================ */
@media (max-width: 1024px) {
    .wcsv-section,
    .wcsv-pillars-section  { padding: var(--space-9xl) var(--space-xl); }
    .wcsv-hero             { padding: 6rem var(--space-xl) 5rem; }

    .wcsv-pillar {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }
    .wcsv-pillar:nth-child(even) .wcsv-pillar-content { order: 2; }
    .wcsv-pillar:nth-child(even) .wcsv-pillar-visual  { order: 1; }

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

    .wcsv-timeline::before { display: none; }
    .wcsv-timeline-grid    { grid-template-columns: 1fr 1fr; gap: var(--space-3xl) var(--space-md); }
}

@media (max-width: 768px) {
    .wcsv-section,
    .wcsv-pillars-section  { padding: 4.5rem var(--space-lg); }
    .wcsv-hero             { padding: 5rem var(--space-lg) 4.5rem; }
    .wcsv-cta              { padding: var(--space-9xl) var(--space-lg); }

    .wcsv-pillar-list      { grid-template-columns: 1fr; }
    .wcsv-pillar-num       { font-size: 3.5rem; }

    .wcsv-map-grid         { grid-template-columns: 1fr; }
    .wcsv-why-grid         { grid-template-columns: 1fr; }
    .wcsv-timeline-grid    { grid-template-columns: 1fr; }

    .wcsv-cta-actions      { flex-direction: column; align-items: stretch; }
    .wcsv-cta-actions .wcsv-btn { justify-content: center; }

    .wcsv-pillars          { gap: var(--space-xs); }
    .wcsv-pillar-pill      { font-size: 0.85rem; padding: 10px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .wcsv-reveal,
    .wcsv-pillar-pill,
    .wcsv-pillar-visual,
    .wcsv-map-item,
    .wcsv-map-icon,
    .wcsv-why-card,
    .wcsv-timeline-circle,
    .wcsv-btn {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   Webcroo Service Page — Responsive (wcs-)
   ============================================================ */
@media (max-width: 1024px) {
    .wcs-section          { padding: 5rem var(--space-xl); }
    .wcs-hero             { padding: 6rem var(--space-xl) 5rem; }
    .wcs-hero-inner       { grid-template-columns: 1fr; gap: var(--space-5xl); }
    .wcs-svc-grid         { grid-template-columns: 1fr; }
    .wcs-svc              { grid-template-columns: 1fr; }
    .wcs-svc-visual       { min-height: 220px; }
    .wcs-process-grid     { grid-template-columns: repeat(2, 1fr); }
    .wcs-tech-grid        { grid-template-columns: 1fr; gap: var(--space-5xl); }
    .wcs-pricing-grid     { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .wcs-faq-grid         { grid-template-columns: 1fr; gap: var(--space-5xl); }
    .wcs-faq-side         { position: static; }
}

@media (max-width: 768px) {
    .wcs-section          { padding: 4.5rem var(--space-lg); }
    .wcs-hero             { padding: 5rem var(--space-lg) 4.5rem; }
    .wcs-hero-stats       { padding: var(--space-xl); }
    .wcs-stat             { padding: var(--space-xs); }
    .wcs-stat-num         { font-size: 2rem; }
    .wcs-process-grid     { grid-template-columns: 1fr; }
    .wcs-tech-list        { grid-template-columns: 1fr; }
    .wcs-cta              { padding: 5rem var(--space-lg); }
    .wcs-hero-actions     { flex-direction: column; align-items: stretch; }
    .wcs-hero-actions .wcs-btn { justify-content: center; }
    .wcs-cta-actions      { flex-direction: column; align-items: stretch; }
    .wcs-cta-actions .wcs-btn { justify-content: center; }
    .wcs-faq-q            { padding: var(--space-lg); font-size: var(--font-size-base); }
    .wcs-faq-a p          { padding: 0 var(--space-lg) var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .wcs-reveal, .wcs-svc, .wcs-step, .wcs-tech-item, .wcs-plan,
    .wcs-faq-item, .wcs-faq-icon, .wcs-faq-a, .wcs-btn, .wcs-svc-icon {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   Webcroo Graphic Design Page — Responsive (wcg-)
   ============================================================ */
@media (max-width: 1024px) {
    .wcg-section      { padding: 5rem var(--space-xl); }
    .wcg-hero         { padding: 6rem var(--space-xl) 5rem; }
    .wcg-hero-inner   { grid-template-columns: 1fr; gap: var(--space-6xl); }
    .wcg-hero-stage   { height: 380px; }
    .wcg-svc-grid     { grid-template-columns: 1fr; }
    .wcg-svc          { grid-template-columns: 1fr; }
    .wcg-svc-visual   { min-height: 220px; }
    .wcg-process-grid { grid-template-columns: repeat(2, 1fr); }
    .wcg-pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .wcg-faq-grid     { grid-template-columns: 1fr; gap: var(--space-5xl); }
    .wcg-faq-side     { position: static; }
}

@media (max-width: 768px) {
    .wcg-section           { padding: 4.5rem var(--space-lg); }
    .wcg-hero              { padding: 5rem var(--space-lg) 4.5rem; }
    .wcg-hero-stage        { height: 340px; }
    .wcg-sample            { padding: 0.85rem var(--space-md); gap: 10px; }
    .wcg-sample-icon       { width: 36px; height: 36px; }
    .wcg-sample-icon svg   { width: 18px; height: 18px; }
    .wcg-sample-text       { font-size: 0.85rem; }
    .wcg-sample-text small { font-size: 0.7rem; }
    .wcg-process-grid      { grid-template-columns: 1fr; }
    .wcg-cta               { padding: 5rem var(--space-lg); }
    .wcg-hero-actions      { flex-direction: column; align-items: stretch; }
    .wcg-hero-actions .wcg-btn { justify-content: center; }
    .wcg-cta-actions       { flex-direction: column; align-items: stretch; }
    .wcg-cta-actions .wcg-btn { justify-content: center; }
    .wcg-faq-q             { padding: var(--space-lg); font-size: var(--font-size-base); }
    .wcg-faq-a p           { padding: 0 var(--space-lg) var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .wcg-reveal, .wcg-svc, .wcg-step, .wcg-plan, .wcg-faq-item,
    .wcg-faq-icon, .wcg-faq-a, .wcg-btn, .wcg-svc-icon,
    .wcg-marquee-track, .wcg-sample {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   Webcroo Digital Marketing Page — Responsive (wcm-)
   ============================================================ */
@media (max-width: 1024px) {
    .wcm-section        { padding: 5rem var(--space-xl); }
    .wcm-hero           { padding: 6rem var(--space-xl) 5rem; }
    .wcm-hero-inner     { grid-template-columns: 1fr; gap: var(--space-6xl); }
    .wcm-svc-grid       { grid-template-columns: 1fr; }
    .wcm-svc            { grid-template-columns: 1fr; }
    .wcm-svc-visual     { min-height: 220px; }
    .wcm-channels-grid  { grid-template-columns: repeat(4, 1fr); }
    .wcm-process-grid   { grid-template-columns: repeat(2, 1fr); }
    .wcm-pricing-grid   { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .wcm-faq-grid       { grid-template-columns: 1fr; gap: var(--space-5xl); }
    .wcm-faq-side       { position: static; }
}

@media (max-width: 768px) {
    .wcm-section           { padding: 4.5rem var(--space-lg); }
    .wcm-hero              { padding: 5rem var(--space-lg) 4.5rem; }
    .wcm-hero-card         { padding: var(--space-xl); }
    .wcm-hero-stat         { padding: 0.85rem; }
    .wcm-hero-stat-num     { font-size: 1.4rem; }
    .wcm-channels-grid     { grid-template-columns: repeat(3, 1fr); padding: 0 var(--space-lg); }
    .wcm-process-grid      { grid-template-columns: 1fr; }
    .wcm-cta               { padding: 5rem var(--space-lg); }
    .wcm-hero-actions      { flex-direction: column; align-items: stretch; }
    .wcm-hero-actions .wcm-btn { justify-content: center; }
    .wcm-cta-actions       { flex-direction: column; align-items: stretch; }
    .wcm-cta-actions .wcm-btn { justify-content: center; }
    .wcm-faq-q             { padding: var(--space-lg); font-size: var(--font-size-base); }
    .wcm-faq-a p           { padding: 0 var(--space-lg) var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .wcm-reveal, .wcm-svc, .wcm-step, .wcm-plan, .wcm-faq-item,
    .wcm-faq-icon, .wcm-faq-a, .wcm-btn, .wcm-svc-icon,
    .wcm-channel, .wcm-hero-chart-line, .wcm-hero-chart-area,
    .wcm-hero-chart-dot, .wcm-hero-dot {
        transition: none !important;
        animation: none !important;
    }
    .wcm-hero-chart-line { stroke-dashoffset: 0; }
    .wcm-hero-chart-area { opacity: 1; }
    .wcm-hero-chart-dot  { opacity: 1; }
}

/* ============================================================
   WCCT — CONTACT PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .wcct-hero            { padding: 6rem 1.5rem 5rem; }
    .wcct-section         { padding: 4rem 1.5rem; }
    .wcct-grid            { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .wcct-info-stack      { position: static; }
    .wcct-form-card       { padding: var(--space-5xl) var(--space-3xl); }
    .wcct-map-card {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: -120px auto 0;
        max-width: 90%;
        box-shadow: 0 24px 48px rgba(10, 37, 64, 0.12);
    }
    .wcct-map-wrap        { height: 420px; padding-bottom: 80px; }
}

@media (max-width: 768px) {
    .wcct-hero            { padding: 5rem 1.25rem 4.5rem; }
    .wcct-section         { padding: 3.5rem 1.25rem; margin-top: -2rem; }
    .wcct-form-card       { padding: var(--space-3xl) var(--space-xl); border-radius: 20px; }
    .wcct-form            { grid-template-columns: 1fr; gap: var(--space-md); }
    .wcct-info-main       { padding: var(--space-3xl) var(--space-xl); }
    .wcct-info-wa         { padding: 1.25rem; }
    .wcct-cta             { padding: var(--space-8xl) 1.25rem; }
    .wcct-cta-actions     { flex-direction: column; }
    .wcct-cta-btn         { justify-content: center; }
    .wcct-quick           { gap: var(--space-xs); }
    .wcct-quick a         { font-size: 0.82rem; padding: 8px 14px; }
    .wcct-map-wrap        { height: 380px; padding-bottom: 60px; }
    .wcct-map-card        { padding: var(--space-xl); margin-top: -100px; }
    .wcct-submit-row      { flex-direction: column; align-items: stretch; }
    .wcct-submit          { justify-content: center; }
    .wcct-submit-note     { text-align: center; }
    .wcct-captcha-row     { gap: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
    .wcct-reveal, .wcct-quick a, .wcct-info-wa, .wcct-submit,
    .wcct-info-social, .wcct-input, .wcct-select, .wcct-textarea, .wcct-cta-btn {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   WCCC — COOKIE CONSENT RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .wccc {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        padding: var(--space-xl) var(--space-lg) var(--space-lg);
        bottom: 16px;
        width: calc(100% - 32px);
        max-width: none;
    }
    .wccc-content  { padding-right: var(--space-3xl); }
    .wccc-title    { font-size: 1rem; }
    .wccc-text     { font-size: 0.88rem; }
    .wccc-accept   { padding: 0.85rem var(--space-xl); width: 100%; justify-content: center; }
    .wccc-close    { top: 10px; right: 10px; width: 28px; height: 28px; }
    .wccc-close svg { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .wccc, .wccc-accept { transition: opacity 0.2s ease, visibility 0s !important; }
    .wccc.is-visible { transform: translateX(-50%); }
    .wccc            { transform: translateX(-50%); }
}

/* ============================================================
   WCP — PORTFOLIO PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .wcp-hero    { padding: 6rem 1.5rem 5rem; }
    .wcp-section { padding: 4rem 1.5rem 5rem; }
    .wcp-grid    { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .wcp-stats   { grid-template-columns: repeat(2, 1fr); }
    .wcp-stat:nth-child(2) { border-right: none; }
    .wcp-stat:nth-child(1),
    .wcp-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 1rem; }
    .wcp-stat:nth-child(3),
    .wcp-stat:nth-child(4) { padding-top: 1rem; }
    .wcp-logos-grid  { grid-template-columns: repeat(3, 1fr); }
    .wcp-filter-wrap { gap: 1rem; }
}

@media (max-width: 768px) {
    .wcp-hero    { padding: 5rem 1.25rem 4.5rem; }
    .wcp-section { padding: 3.5rem 1.25rem 4.5rem; border-radius: 24px 24px 0 0; margin-top: -2rem; }
    .wcp-grid    { grid-template-columns: 1fr; }
    .wcp-stats   { padding: 1.25rem; gap: 0.5rem; }
    .wcp-stat-num   { font-size: 1.6rem; }
    .wcp-stat-label { font-size: 0.7rem; }
    .wcp-filter-wrap { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .wcp-filter      { width: 100%; justify-content: space-between; }
    .wcp-filter-btn  { padding: 0.6rem 1rem; font-size: 0.85rem; flex: 1; justify-content: center; }
    .wcp-logos-grid  { grid-template-columns: repeat(2, 1fr); }
    .wcp-cta         { padding: 4.5rem 1.25rem; }
    .wcp-cta-actions { flex-direction: column; }
    .wcp-btn         { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .wcp-reveal, .wcp-card, .wcp-card-img, .wcp-card-overlay,
    .wcp-card-arrow, .wcp-filter-btn, .wcp-btn, .wcp-logo-tile {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   WCB - BLOG PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .wcb-hero {
        padding: 6rem var(--space-xl) 7rem;
    }

    .wcb-main,
    .wcb-single-main {
        padding: var(--space-9xl) var(--space-xl);
    }

    .wcb-hero-inner,
    .wcb-featured,
    .wcb-layout,
    .wcb-single-hero-grid,
    .wcb-single-layout {
        grid-template-columns: 1fr;
    }

    .wcb-single-hero {
        padding: 6rem var(--space-xl);
    }

    .wcb-single-hero-card {
        max-width: 680px;
    }

    .wcb-hero-panel {
        max-width: 680px;
    }

    .wcb-featured-media {
        min-height: 340px;
    }

    .wcb-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .wcb-hero,
    .wcb-single-hero {
        padding: 5rem var(--space-lg) 6rem;
    }

    .wcb-main,
    .wcb-single-main {
        padding: 4.5rem var(--space-lg) var(--space-7xl);
    }

    .wcb-section {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }

    .wcb-hero-inner {
        gap: var(--space-4xl);
    }

    .wcb-hero-panel,
    .wcb-featured-content,
    .wcb-widget,
    .wcb-single-hero-card {
        padding: var(--space-xl);
    }

    .wcb-breadcrumb {
        margin-bottom: var(--space-3xl);
    }

    .wcb-single-featured,
    .wcb-single-featured img,
    .wcb-single-featured .wcb-media-placeholder {
        min-height: 260px;
    }

    .wcb-article {
        padding: var(--space-2xl) var(--space-xl);
    }

    .wcb-article-body {
        font-size: 1rem;
        line-height: 1.75;
    }

    .wcb-post-nav {
        grid-template-columns: 1fr;
    }

    .wcb-related-section {
        padding: 0 var(--space-lg) var(--space-7xl);
    }

    .wcb-cta {
        padding: var(--space-8xl) var(--space-lg);
    }

    .wcb-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .wcb-cta-link {
        justify-content: center;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .wcb-search {
        align-items: stretch;
        flex-direction: column;
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }

    .wcb-search svg {
        display: none;
    }

    .wcb-search input {
        min-height: 42px;
        padding: 0 var(--space-sm);
    }

    .wcb-grid,
    .wcb-sidebar {
        grid-template-columns: 1fr;
    }

    .wcb-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .wcb-featured-media {
        min-height: 260px;
    }

    .wcb-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-xs);
    }

    .wcb-filter a {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wcb-reveal,
    .wcb-card,
    .wcb-card-media img,
    .wcb-featured-media img,
    .wcb-search button,
    .wcb-read,
    .wcb-filter a,
    .wcb-page,
    .wcb-cta-link {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   WCPS — PROJECT SINGLE PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .wcps-hero     { padding: 5rem 1.5rem 7rem; }
    .wcps-showcase { padding: 0 1.5rem 5rem; }
    .wcps-story    { padding: 5rem 1.5rem; }
    .wcps-tech     { padding: 5rem 1.5rem; }

    .wcps-meta-bar { grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 1.25rem; }
    .wcps-meta-item:nth-child(1),
    .wcps-meta-item:nth-child(2) {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: var(--space-md);
    }
    .wcps-meta-item:nth-child(2) { border-right: none; }
    .wcps-meta-item:nth-child(3) {
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: var(--space-md);
    }
    .wcps-meta-item:nth-child(4) { padding-top: var(--space-md); }

    .wcps-story-grid { grid-template-columns: 1fr; gap: var(--space-md); }
    .wcps-tech-grid  { grid-template-columns: 1fr; gap: 2.5rem; }
    .wcps-shot-url   { max-width: 280px; }
}

@media (max-width: 768px) {
    .wcps-hero     { padding: 4rem 1.25rem 6rem; }
    .wcps-showcase { padding: 0 1.25rem 4rem; }
    .wcps-story    { padding: 4rem 1.25rem; }
    .wcps-tech     { padding: 4rem 1.25rem; }
    .wcps-nav      { padding: 3rem 1.25rem; }
    .wcps-cta      { padding: 4.5rem 1.25rem; }

    .wcps-shot-wrap  { margin-top: -2rem; border-radius: 16px; }
    .wcps-shot-bar   { padding: 10px 12px; gap: 10px; }
    .wcps-shot-dot   { width: 9px; height: 9px; }
    .wcps-shot-url   { font-size: 0.7rem; max-width: 170px; padding: 3px 10px; }

    .wcps-story-card { padding: 2rem 1.5rem; }
    .wcps-tech-list  { grid-template-columns: 1fr; }
    .wcps-nav-inner  { grid-template-columns: 1fr; }

    .wcps-cta-actions { flex-direction: column; }
    .wcps-btn         { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .wcps-reveal,
    .wcps-story-card,
    .wcps-story-card-icon,
    .wcps-tech-item,
    .wcps-nav-link,
    .wcps-btn {
        transition: none !important;
        animation: none !important;
    }
}