/* 10-responsive.css — All media queries consolidated */

@media (min-width: 992px) {
  .wine-detail-hero__grid {
    grid-template-columns: 1fr auto;
  }

  .wine-detail-hero__grid--with-photo {
    grid-template-columns: auto 1fr auto;
  }

  .wine-detail-hero__quality {
    border-left: 1px solid var(--border-default);
    padding-left: var(--space-5);
  }
}

@media (max-width: 991.98px) {
  .wine-detail-hero__quality {
    border-top: 1px solid var(--border-default);
    padding-top: var(--space-4);
  }
}

/* ─── Responsive ─── */

@media (max-width: 768px) {
  .hero {
    padding: 4rem 0 3rem;
  }

  .hero__title {
    font-size: 2.5rem;
  }

  .app-main {
    padding: 2rem 0 3rem;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .navbar .nav-link.active::after {
    display: none;
  }

  .page-header h1 {
    font-size: 2rem;
  }

  .wine-detail-hero {
    padding: 1rem;
  }

  .wine-detail-hero h1 {
    font-size: 1.5rem;
  }

  .wine-detail-hero__grid--with-photo {
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto;
  }

  .wine-detail-hero__grid--with-photo .wine-detail-photo {
    grid-row: 1;
    grid-column: 1;
  }

  .wine-detail-hero__grid--with-photo .wine-detail-hero__info {
    grid-row: 1;
    grid-column: 2;
  }

  .wine-detail-hero__grid--with-photo .wine-detail-hero__quality {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .wine-detail-photo__img {
    max-height: 140px;
    width: 100%;
  }

  .vintage-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }

  .vintage-row__actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 576px) {
  .filter-panel {
    padding: 1rem;
  }

  .wine-detail-hero__quality {
    min-width: auto;
  }

  .search-overlay__panel {
    margin: 0 var(--space-2);
    max-width: none;
  }

  .search-overlay {
    padding-top: 8vh;
  }

  .rec-card__actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 375px) {
  .hero__title {
    font-size: 2rem;
  }

  .page-header h1 {
    font-size: 1.5rem;
  }

  .app-main {
    padding: 1.5rem 0 2rem;
  }

  .toast-container {
    right: 0.5rem;
    left: 0.5rem;
  }
}

/* ─── Touch Devices ─── */

@media (pointer: coarse) {
  /* Apple HIG / Material both put the touch-target floor at 44×44. Header
   * controls use Bootstrap btn-sm by default, which is ~28–32px tall — fine
   * for mouse, too small for thumbs. Bump every navbar control + the search
   * trigger to 44px minimum on coarse pointers. Desktop stays compact. */
  .navbar .btn,
  .search-trigger,
  .navbar-toggler {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Bump compact stars up to a 44px tap target on touch devices. The
   * .star-rating__hit button sits at inset:0 inside the unit, so
   * resizing the unit also resizes the hit area. Intentionally NO
   * .star-rating--compact .star-rating__hit rule — that's how the
   * previous overlap bug was structurally eliminated. */
  .star-rating--compact .star-rating__unit {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .star-rating--compact .star-rating__icon,
  .star-rating--compact .star-rating__icon svg {
    width: 22px;
    height: 22px;
  }

  .wine-card__actions {
    opacity: 1;
  }

  .wine-card__action-btn {
    width: 44px;
    height: 44px;
  }

  .wine-card__action-btn .icon {
    width: 18px;
    height: 18px;
  }
}