﻿/* ==========================================================================
   Public multi-column forms (quote / sample request)
   ========================================================================== */

.admin-form-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-form-span {
    grid-column: 1 / -1;
}

.admin-form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

/* ==========================================================================
   Large screens
   ========================================================================== */

@media (min-width: 1400px) {
    :root {
        --content-max-width: 1240px;
        --page-gutter: 24px;
    }
}

@media (min-width: 1800px) {
    :root {
        --content-max-width: 1320px;
    }
}

/* ==========================================================================
   Small desktop / large tablet — collapse navigation
   ========================================================================== */

@media (max-width: 1200px) {
    .nav-toggle {
        display: inline-flex;
        margin-left: auto;
    }

    .nav-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        order: 3;
        padding: 8px 0 18px;
        border-top: 1px solid rgba(36, 88, 63, 0.1);
    }

    .nav-menu.is-open {
        display: flex;
    }

    .nav-menu a:not(.btn) {
        width: 100%;
        padding: 12px 0;
    }

    .nav-menu a:not(.btn).is-active::after {
        bottom: 10px;
        left: 0;
        right: auto;
        width: 36px;
    }

    .nav-menu a.btn {
        width: 100%;
        margin-top: 10px;
        justify-content: center;
    }

    .navbar__inner {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .footer-offices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .office-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .origin-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 992px) {
    .hero-grid,
    .process-grid,
    .cta-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-card {
        max-width: none;
        width: 100%;
    }

    .card-grid,
    .stats-grid,
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .office-grid {
        grid-template-columns: 1fr;
    }

    .split-grid,
    .contact-grid,
    .origin-detail-card,
    .catalogue-layout,
    .product-detail-grid,
    .product-detail-layout {
        grid-template-columns: 1fr;
    }

    .contact-form__grid {
        grid-template-columns: 1fr;
    }

    .contact-form__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-form__submit {
        width: 100%;
    }

    .catalogue-filters {
        position: static;
    }

    .catalogue-filters__actions {
        grid-template-columns: 1fr;
    }

    .catalogue-filters__clear {
        width: 100%;
    }

    .product-grid {
        grid-template-columns: 1fr 1fr;
    }

    .insights-grid {
        grid-template-columns: 1fr 1fr;
    }

    .insight-featured {
        grid-template-columns: 1fr;
    }

    .insights-article__layout {
        grid-template-columns: 1fr;
    }

    .origin-showcase-grid {
        grid-template-columns: 1fr;
    }

    .origin-process-card {
        grid-template-columns: 1fr;
    }

    .origin-process-card img,
    .origin-process-card__media,
    .origin-process-card__media img {
        min-height: 320px;
    }

    .process-list--modern::before {
        display: none;
    }

    .process-list--modern li:hover {
        transform: none;
    }

    .cta-panel .btn,
    .cta-panel .btn-cta,
    .cta-panel .btn-primary {
        align-self: stretch;
        width: 100%;
        max-width: none;
    }

    .page-hero,
    .page-hero--about,
    .page-hero--products,
    .page-hero--sustainability,
    .page-hero--traceability,
    .page-hero--insights,
    .page-hero--contact {
        min-height: auto;
    }

    .section {
        padding: 62px 0;
    }

    .footer-offices {
        grid-template-columns: 1fr;
    }

    .admin-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   Mobile landscape / small tablet
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --page-gutter: 14px;
    }

    .top-bar__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .top-bar__inner > span {
        font-size: 0.84rem;
        line-height: 1.45;
    }

    .language-selector {
        width: 100%;
    }

    .language-selector select {
        width: 100%;
        max-width: 220px;
    }

    .navbar__inner {
        min-height: 68px;
    }

    .brand__logo {
        height: 44px;
        max-width: min(190px, 58vw);
    }

    .hero-section {
        padding: 58px 0;
        min-height: auto;
        background-position: center 40%;
    }

    .page-hero,
    .page-hero--about,
    .page-hero--products,
    .page-hero--sustainability,
    .page-hero--traceability,
    .page-hero--insights,
    .page-hero--contact {
        padding: 64px 0 56px;
        background-position: center center;
    }

    .page-hero--products {
        background-position: 58% center;
    }

    .page-hero--sustainability {
        background-position: 60% center;
    }

    .page-hero--traceability,
    .page-hero--insights,
    .page-hero--contact {
        background-position: 65% center;
    }

    .page-hero h1,
    .origin-hero__content h1,
    .hero-section h1 {
        font-size: clamp(1.95rem, 8vw, 2.8rem);
        line-height: 1.08;
    }

    .page-hero p,
    .origin-hero__content p,
    .hero-copy p {
        font-size: 1rem;
    }

    .section {
        padding: 54px 0;
    }

    .section-heading {
        margin-bottom: 26px;
    }

    .origin-hero {
        min-height: 560px;
    }

    .origin-hero__content {
        padding: 90px 0 64px;
    }

    .panel-card,
    .contact-form,
    .cta-panel,
    .info-card,
    .origin-card,
    .product-summary-card,
    .product-gallery,
    .product-copy {
        padding: 22px 18px;
    }

    .contact-form {
        padding-top: 26px;
    }

    .origin-process-card div {
        padding: 24px;
    }

    .footer-grid {
        padding: 42px 0 22px;
    }

    .footer-bottom__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .origin-lightbox {
        padding: 12px;
    }

    .origin-lightbox__dialog {
        width: 100%;
        max-height: calc(100vh - 24px);
        border-radius: 18px;
        padding: 14px;
    }

    .origin-lightbox__image {
        max-height: calc(100vh - 120px);
    }

    .insight-featured__media img,
    .insights-article__figure img {
        min-height: 220px;
    }
}

/* ==========================================================================
   Mobile portrait
   ========================================================================== */

@media (max-width: 576px) {
    :root {
        --page-gutter: 12px;
    }

    .card-grid,
    .stats-grid,
    .footer-grid,
    .split-grid,
    .contact-grid,
    .origin-detail-card,
    .product-grid,
    .insights-grid,
    .office-grid,
    .footer-offices {
        grid-template-columns: 1fr;
    }

    .insights-newsletter,
    .insights-article__cta,
    .insight-card__footer,
    .insights-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .insights-newsletter,
    .insights-article__cta {
        display: grid;
    }

    .insights-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .insights-filter {
        flex: 0 0 auto;
    }

    .filter-actions,
    .catalogue-toolbar,
    .pagination-bar,
    .product-card__footer,
    .product-meta div,
    .spec-list div {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-meta dd,
    .spec-list dd {
        text-align: left;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .btn,
    .section .btn-primary,
    .section .btn-outline,
    .cta-panel .btn,
    .cta-panel .btn-primary,
    .cta-panel .btn-cta {
        width: 100%;
    }

    .btn-cta {
        white-space: normal;
        text-align: center;
    }

    .page-hero > .container,
    .page-hero > .narrow-container,
    .origin-hero__content,
    .hero-section > .container {
        margin-inline: var(--page-gutter) auto;
    }

    .nav-menu a.btn {
        width: 100%;
    }

    .guidance-card__email-btn {
        width: 100%;
        justify-content: center;
    }

    .origin-hero {
        min-height: 520px;
    }

    .origin-hero__content {
        padding: 72px 0 52px;
    }

    .origin-showcase-card img,
    .origin-process-card img,
    .origin-process-card__media,
    .origin-process-card__media img {
        min-height: 0;
        height: 230px;
    }

    .origin-showcase-card__body,
    .origin-process-card div {
        padding: 20px;
    }

    .process-list--modern li {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        padding: 14px 16px;
    }

    .process-list__icon {
        width: 44px;
        height: 44px;
    }

    .contact-form__header,
    .guidance-card__header {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
    }

    .contact-form__badge,
    .guidance-card__badge {
        width: 40px;
        height: 40px;
    }

    .buyer-card__list li,
    .guidance-card__list li {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
    }

    .stat-card strong {
        font-size: 2rem;
    }

    h2 {
        font-size: clamp(1.45rem, 6vw, 2rem);
    }

    h3 {
        font-size: 1.12rem;
    }

    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-form-actions {
        justify-content: stretch;
    }

    .admin-form-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Very small phones
   ========================================================================== */

@media (max-width: 380px) {
    .top-bar {
        font-size: 0.82rem;
    }

    .brand__logo {
        height: 40px;
        max-width: min(170px, 62vw);
    }

    .page-hero h1,
    .origin-hero__content h1,
    .hero-section h1 {
        font-size: clamp(1.75rem, 9vw, 2.2rem);
    }

    .panel-card,
    .contact-form,
    .cta-panel {
        padding: 18px 14px;
    }
}
