/* ============================== */
/* === Tablet: min-width 768px === */
/* ============================== */
@media (min-width: 768px) {

  /* Header — show desktop nav, hide hamburger */
  .site-nav__toggle {
    display: none;
  }

  .site-nav__menu {
    display: flex;
    position: static;
    flex-direction: row;
    gap: var(--space-xs);
    background: transparent;
    border-bottom: none;
    padding: 0;
  }

  .site-nav__menu a {
    font-size: var(--fs-sm);
    padding: var(--space-xs) var(--space-sm);
  }

  .site-nav__lang {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    margin-left: var(--space-sm);
    padding-left: var(--space-sm);
    border-left: 1px solid var(--color-border);
  }

  .site-nav__lang a {
    border: none;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-xs);
    min-height: auto;
  }

  .site-nav__lang a:hover {
    border: none;
  }

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

  /* Grid — 2 columns */
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  /* Hero */
  .hero {
    padding: 4rem 0;
  }

  .hero__image {
    max-width: 520px;
  }

  .hero__title {
    font-size: 2.25rem;
  }

  /* Feature block — image left, text right */
  .feature-block {
    grid-template-columns: 1fr 1fr;
  }

  .feature-block--reverse .feature-block__image {
    order: 2;
  }

  /* Highlight grid — 2 columns */
  .highlight-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Comparison table — 3-column grid */
  .compare-table {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    border: 1px solid var(--color-border);
  }

  .compare-table__header {
    display: contents;
  }

  .compare-table__th {
    padding: var(--space-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-border);
    text-align: center;
  }

  .compare-table__th--epoxy {
    color: var(--color-epoxy);
    background: color-mix(in srgb, var(--color-epoxy) 6%, var(--color-bg));
  }

  .compare-table__th--polyurea {
    color: #8b6f3a;
    background: color-mix(in srgb, var(--color-sand) 40%, var(--color-bg));
  }

  .compare-table__row {
    display: contents;
  }

  .compare-table__label {
    padding: var(--space-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }

  .compare-table__cell {
    padding: var(--space-md);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-left: var(--space-md);
    font-size: var(--fs-sm);
  }

  .compare-table__cell::before {
    display: none;
  }

  .compare-table__cell--epoxy {
    background: color-mix(in srgb, var(--color-epoxy) 3%, transparent);
  }

  .compare-table__cell--polyurea {
    background: color-mix(in srgb, var(--color-sand) 20%, transparent);
  }

  /* Contact page — form + info side by side */
  .contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  /* Newsletter — horizontal layout */
  .newsletter-inline {
    flex-direction: row;
  }

  /* Restore desktop spacing */
  .section {
    padding: var(--space-4xl) 0;
  }

  /* Hero CTA — horizontal on tablet+ */
  .hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .hero__cta .btn {
    width: auto;
    max-width: none;
  }
}

/* =============================== */
/* === Desktop: min-width 1024px === */
/* =============================== */
@media (min-width: 1024px) {

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

  /* Grid — 3 and 4 columns */
  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* Container padding increases */
  .container {
    padding: 0 var(--space-xl);
  }

  .container-narrow {
    padding: 0 var(--space-xl);
  }

  /* Hero */
  .hero__image {
    max-width: 640px;
  }

  .hero__title {
    font-size: 2.75rem;
  }

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

  /* Highlight grid — 4 columns */
  .highlight-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* ============================ */
/* === Wide: min-width 1280px === */
/* ============================ */
@media (min-width: 1280px) {

  body {
    font-size: var(--fs-md);
  }

  .section {
    padding: var(--space-4xl) 0;
  }
}