/* ==========================================================================
   BauConcept GmbH — Responsive Stylesheet
   responsive.css — Mobile-First Media Queries & Breakpoints

   Breakpoints:
   - Base:    < 480px  (small phones — styles in style.css)
   - 480px:   Large phones
   - 768px:   Tablets
   - 1024px:  Desktops
   - 1200px:  Large desktops
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base / Mobile — Promise grid centering
   -------------------------------------------------------------------------- */
.promise-grid {
    justify-content: center;
    justify-items: center;
}

/* --------------------------------------------------------------------------
   Large Phones (480px+)
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
    /* Slightly more generous padding */
    :root {
        --container-padding: 2rem;
    }

    /* Hero */
    .hero__title {
        font-size: var(--font-size-3xl);
    }

    /* Grid: 2-col for small items on larger phones */
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats side by side */
    .stats {
        gap: var(--spacing-xl);
    }

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

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

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

/* --------------------------------------------------------------------------
   Tablets (768px+)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* Section spacing */
    .section {
        padding: var(--spacing-3xl) 0;
    }

    /* Hero */
    .hero {
        min-height: 60vh;
    }

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

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

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

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

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

    /* Section titles bigger */
    .section__title {
        font-size: var(--font-size-2xl);
    }

    /* Services: side by side */
    .service {
        grid-template-columns: 1fr 1fr;
    }

    /* Alternating service layout */
    .service:nth-child(even) .service__image {
        order: 2;
    }

    .service:nth-child(even) .service__content {
        order: 1;
    }

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

    /* Footer: 2 columns with more space */
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }

    /* Values: 3 columns */
    .values {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Team: 3 columns */
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Desktops (1024px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    /* Navigation: show full nav, hide hamburger */
    .nav-toggle {
        display: none;
    }

    .nav {
        display: flex;
    }

    .nav--open {
        position: static;
        box-shadow: none;
        padding: 0;
        background-color: transparent;
    }

    .nav__list {
        flex-direction: row;
        gap: var(--spacing-xs);
        align-items: center;
    }

    .nav__item {
        border-bottom: none;
    }

    .nav__link {
        padding: var(--spacing-xs) var(--spacing-sm);
        position: relative;
        background-color: transparent;
        color: var(--color-white);
    }

    .nav__link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        height: 2px;
        background-color: var(--color-accent);
        transform: scaleX(0);
        transition: transform var(--transition-base);
    }

    .nav__link:hover::after,
    .nav__link:focus-visible::after {
        transform: scaleX(1);
    }

    .nav__link--active {
        color: var(--color-accent);
        border-left: none;
    }

    .nav__link--active::after {
        transform: scaleX(1);
    }

    .nav__link:hover {
        background-color: transparent;
        color: var(--color-accent);
    }

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

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

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

    /* Grid: full columns */
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

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

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

    /* About intro larger */
    .about-intro {
        font-size: var(--font-size-xl);
    }

    /* Values: 4 columns if needed */
    .values {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Large Desktops (1200px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    /* Typography: larger headings */
    h1 {
        font-size: var(--font-size-4xl);
    }

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

    /* More generous section spacing */
    .section {
        padding: var(--spacing-3xl) 0;
    }

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

    /* Hero: max impact */
    .hero {
        min-height: 75vh;
    }

    .hero__content {
        max-width: 900px;
    }

    /* Grid spacing */
    .grid {
        gap: var(--spacing-xl);
    }

    /* Service sections: more breathing room */
    .service {
        gap: var(--spacing-xl);
    }

    /* Nav links slightly larger spacing */
    .nav__list {
        gap: var(--spacing-sm);
    }

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

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {
    /* Hide interactive and navigation elements */
    .header,
    .nav-toggle,
    .cookie-banner,
    .lightbox,
    .scroll-top,
    .btn,
    .hero::before {
        display: none !important;
    }

    /* Reset backgrounds and colors for print */
    body {
        color: #000;
        background: #fff;
    }

    .section--dark,
    .section--gray {
        background: #fff;
        color: #000;
    }

    .section--dark h2,
    .section--dark h3,
    .section--dark h4 {
        color: #000;
    }

    .footer {
        background: #fff;
        color: #000;
    }

    /* Ensure links are visible */
    a {
        color: #000;
        text-decoration: underline;
    }

    /* Show URLs after links */
    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
    }

    /* Avoid page breaks inside elements */
    .card,
    .service,
    img {
        break-inside: avoid;
    }
}