/* ==========================================================================
   Kjøtt Huset — responsive.css
   60rem = layout breakpoint · 40rem = typography breakpoint
   ========================================================================== */

/* ============================================
   LAYOUT BREAKPOINT (60rem ≈ 960px)
   ============================================ */
@media (max-width: 60rem) {
  /* Masthead: links collapse behind the menu button */
  .masthead__nav { display: none; }
  .masthead__menu-btn { display: flex; }
  .masthead__row { min-height: 44px; }

  /* Hero: caption never overlaps the text block */
  .hero__caption { display: none; }

  /* Facts: 4 → 2 */
  .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__item + .facts__item { border-left: none; padding-left: 0; }
  .facts__item:nth-child(even) {
    border-left: var(--rule-hair) solid var(--color-rule);
    padding-left: var(--space-md);
  }
  .facts__item:nth-child(n+3) {
    border-top: var(--rule-hair) solid var(--color-rule);
  }

  /* Products: 3-up → 2-up */
  .products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-md);
  }

  /* Split sections stack */
  .tilbud__inner,
  .about__grid,
  .halal__grid,
  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

  .tilbud__inner { padding-block: var(--space-xl); }

  .about__grid,
  .halal__grid { padding-block: var(--space-2xl); }

  .about__media { aspect-ratio: 4 / 3; }
  .halal__media { aspect-ratio: 4 / 3; max-width: 480px; }
  .tilbud__media { aspect-ratio: 16 / 9; }

  .contact__map,
  .contact__map iframe { min-height: 340px; }
}

/* ============================================
   TYPOGRAPHY BREAKPOINT (40rem ≈ 640px)
   ============================================ */
@media (max-width: 40rem) {
  .masthead { padding-top: var(--space-sm); }

  .masthead__wordmark {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  /* Info line wraps instead of clipping on phones (non-clickable text) */
  .masthead__line {
    white-space: normal;
    line-height: 1.5;
  }

  .masthead__line { font-size: var(--text-xs); }

  /* Hero headline: never wraps past two lines on a phone */
  .hero { min-height: 480px; }

  .hero__title {
    font-size: clamp(2.3rem, 10vw, 3rem);
  }

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

  .hero__actions {
    gap: var(--space-sm);
  }

  .hero__actions .btn { flex: 1 1 auto; }

  .section__head {
    padding-block: var(--space-xl) var(--space-lg);
  }

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

  /* Facts: one quiet column */
  .facts__list { grid-template-columns: minmax(0, 1fr); }
  .facts__item:nth-child(even) { border-left: none; padding-left: 0; }
  .facts__item:nth-child(n+2) {
    border-top: var(--rule-hair) solid var(--color-rule);
  }
  .facts__item { padding-block: var(--space-sm); }

  /* Products: 2-up → 1-up */
  .products__grid {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--space-2xl);
  }

  .tilbud { padding-block: var(--space-xl); }
  .tilbud__title { font-size: var(--text-xl); }

  .about__grid,
  .halal__grid,
  .contact__grid { padding-block: var(--space-xl); }

  .contact__map,
  .contact__map iframe { min-height: 280px; }

  /* Nav links: 44px hit targets */
  .masthead__nav a { padding-block: var(--space-xs); }

  /* Cookie notice stacks */
  .cookie-notice {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: var(--space-sm);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  }

  .cookie-notice__actions { justify-content: center; }

  .footer__line {
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .footer__sep { display: none; }
}

/* ============================================
   TOUCH — no hover-only affordances
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  .btn:hover { transform: none; }
  .btn:active { transform: scale(0.98); }

  .contact__social-link:hover { transform: none; }
  .contact__social-link:active {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  .product:hover .product__media img { transform: none; }
  .contact__map iframe { filter: grayscale(0.2) contrast(1); }
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer {
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  }
}