/* ============================================================
   GoGiftings — Last Layout Responsive Only
   Keeps the laptop/desktop hero exactly as V39, fixes tablet/mobile.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; height: auto; }
body { overflow-x: hidden; }
.container { width: min(100% - 32px, var(--container, 1180px)); margin-inline: auto; }

/* Keep desktop/laptop layout untouched */
@media (min-width: 1181px) {
  .hero-grid-refined {
    grid-template-columns: 1fr minmax(300px, 380px) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }
  .hero-card-fullbleed {
    min-height: 420px !important;
    max-height: 540px !important;
  }
}

/* Tablet: stack cleanly without changing the desktop design */
@media (max-width: 1180px) {
  .hero-grid-refined {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .hero-card-fullbleed {
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: 16 / 7 !important;
    border-radius: 22px !important;
  }
  .hero-bg-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  .why-panel-compact {
    width: 100% !important;
  }
  .side-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
}

/* Phones: compact hero image box, same visual style, no cropping disasters */
@media (max-width: 760px) {
  .container { width: min(100% - 24px, var(--container, 1180px)) !important; }
  .page-pad { padding-top: 12px !important; }

  .hero-grid-refined {
    gap: 12px !important;
  }
  .hero-card-fullbleed {
    aspect-ratio: 16 / 9 !important;
    min-height: 205px !important;
    max-height: 310px !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 28px rgba(87,42,114,.12) !important;
  }
  .hero-bg-photo {
    object-fit: cover !important;
    object-position: center center !important;
    transform-origin: center !important;
  }
  .hero-slider-arrow {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
  }
  .hero-slider-arrow.prev { left: 8px !important; }
  .hero-slider-arrow.next { right: 8px !important; }
  .hero-slider-dots { bottom: 10px !important; gap: 6px !important; }
  .hero-slider-dot { width: 7px !important; height: 7px !important; }
  .hero-slider-dot.active { width: 22px !important; }

  .why-panel-compact {
    border-radius: 22px !important;
    padding: 16px !important;
  }
  .why-head h2,
  .side-category-head h2,
  .section-head h2 { font-size: clamp(22px, 6vw, 28px) !important; }
  .why-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .why-mini {
    min-width: 0 !important;
    padding: 12px 10px !important;
  }
  .ai-mini-banner {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
  }
  .side-category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .side-category-card {
    min-height: 88px !important;
    padding: 10px 6px !important;
  }
  .side-category-card strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }
  .side-category-icon { font-size: 26px !important; }

  .stat-strip,
  .occasion-row,
  .product-row,
  .listing-grid,
  .banner-row,
  .mini-grid,
  .tile-grid,
  .addon-grid,
  .feature-grid,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .product-card,
  .occasion-card,
  .tile-card,
  .panel,
  .card { min-width: 0 !important; }
  .product-card h4,
  .product-card p,
  .tile-card h3 { overflow-wrap: anywhere !important; }
}

/* Small phones */
@media (max-width: 430px) {
  .container { width: min(100% - 18px, var(--container, 1180px)) !important; }
  .hero-card-fullbleed {
    aspect-ratio: 1.55 / 1 !important;
    min-height: 188px !important;
    border-radius: 18px !important;
  }
  .side-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .why-grid-compact,
  .stat-strip,
  .occasion-row,
  .product-row,
  .listing-grid,
  .banner-row,
  .mini-grid,
  .tile-grid,
  .addon-grid,
  .feature-grid,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .btn { white-space: normal !important; }
}

/* Very narrow phones */
@media (max-width: 360px) {
  .hero-card-fullbleed { min-height: 172px !important; }
  .why-grid-compact,
  .stat-strip,
  .occasion-row,
  .product-row,
  .listing-grid,
  .banner-row,
  .mini-grid,
  .tile-grid,
  .addon-grid,
  .feature-grid,
  .plan-grid {
    grid-template-columns: 1fr !important;
  }
}