/* =========================================================
   DESKTOP PRODUCTION POLISH
   Desktop-first hardening for conversion, grid balance, and robust layout fallbacks.
   ========================================================= */

/* Header conversion action */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    background: var(--gradient-accent);
    color: var(--text-inverse);
    font-size: var(--font-sm);
    font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 14px rgba(154, 74, 22, 0.22);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}

.header-cta:hover,
.header-cta:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(154, 74, 22, 0.28);
    filter: saturate(1.04);
}

.header-cta:focus-visible,
.theme-toggle:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible,
.portfolio-card:focus-visible,
.contact-method:focus-visible {
    outline: 3px solid var(--accent-glow);
    outline-offset: 3px;
}

/* Hero must not leave an empty right column when no hero image is configured. */
.hero-wrapper--with-image {
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
}

.hero-wrapper--solo {
    grid-template-columns: minmax(0, 780px);
    justify-content: center;
    text-align: center;
}

.hero-wrapper--solo .hero-content {
    max-width: 780px;
    margin-inline: auto;
}

.hero-wrapper--solo .hero-actions,
.hero-wrapper--solo .hero-stats {
    justify-content: center;
}

.hero-wrapper--solo .hero-subtitle {
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .hero {
        min-height: clamp(720px, 92vh, 940px);
    }

    .hero-title {
        max-width: 12ch;
    }

    .hero-wrapper--solo .hero-title {
        max-width: 14ch;
        margin-inline: auto;
    }

    .hero-wrapper--with-image .hero-image-placeholder {
        max-width: min(500px, 42vw);
    }
}

/* Keep service layouts balanced. Avoid awkward 3 + 1 orphan grids on laptops. */
.services-grid,
.portfolio-grid,
.testimonials-grid {
    align-items: stretch;
}

.service-card,
.portfolio-card,
.testimonial-card {
    height: 100%;
}

.service-card {
    display: flex;
    flex-direction: column;
}

.service-description {
    flex: 1 1 auto;
}

.service-price {
    margin-top: auto;
}

@media (min-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Portfolio desktop cards should feel deliberate and consistent. */
@media (min-width: 1024px) {
    .portfolio-card-content {
        min-height: 190px;
        display: flex;
        flex-direction: column;
    }

    .portfolio-card-description {
        margin-top: auto;
    }

    .portfolio-card-overlay {
        background: linear-gradient(to top, rgba(10, 10, 15, 0.82) 0%, rgba(10, 10, 15, 0.08) 62%, transparent 100%);
    }
}

/* Improve desktop page rhythm for inner marketing pages. */
@media (min-width: 1024px) {
    .page-hero,
    .work-hero,
    .case-study-hero,
    .legal-hero {
        padding-top: calc(var(--header-height) + var(--space-5));
        padding-bottom: var(--space-5);
    }

    .section-header {
        gap: var(--space-4);
    }
}

/* Prevent cramped desktop header when viewport is barely laptop sized. */
@media (max-width: 1100px) {
    .site-nav {
        gap: 0;
    }

    .nav-link {
        padding-inline: var(--space-2);
    }

    .header-cta {
        padding-inline: 0.875rem;
    }
}

@media (max-width: 899px) {
    .header-cta {
        display: none;
    }
}

/* Honour reduced-motion preferences for production accessibility. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}