/* =========================================================
   Favareto Leilões — Breakpoints (Mobile First)
   480 · 640 · 768 · 1024 · 1280 (menu desktop) · 1440
   ========================================================= */

/* ---------- ≥ 480px ---------- */
@media (min-width: 480px) {
  .alert-bar__domain { display: inline; }
  .features__list { grid-template-columns: repeat(2, 1fr); }
  .categories { grid-template-columns: repeat(2, 1fr); }
  .hero__buttons .btn, .cta__buttons .btn { flex: 0 0 auto; }
  .brand__logo { height: 42px; }
}

/* ---------- ≥ 640px ---------- */
@media (min-width: 640px) {
  :root { --gutter: 28px; }
  .search__tabs { gap: 6px; }
  .search__tab { flex: 0 0 auto; padding: 0 22px; }
  .search__form { grid-template-columns: 1fr 1fr; padding: 18px; border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); }
  .field--grow { grid-column: 1 / -1; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom-inner { display: flex; justify-content: space-between; text-align: left; }
  .footer__legal { display: flex; flex-wrap: wrap; gap: 8px 32px; }
}

/* ---------- ≥ 768px (tablet) ---------- */
@media (min-width: 768px) {
  :root { --section-y: 80px; --header-h: 76px; }

  .brand__seal { width: 58px; height: 58px; }
  .brand__logo { height: 46px; }
  .phone span { display: inline; }
  .phone { padding-inline: 10px; }
  .header__cta { display: inline-flex; }

  /* Hero horizontal: fotografia à direita */
  .hero__media { inset: 0 0 0 auto; width: 64%; height: auto; }
  .hero__media {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
            mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  }
  .hero__media img { object-position: 30% 60%; }
  .hero__inner { padding-block: 72px 132px; }
  .hero__content { max-width: 56%; }
  .hero__shapes span:nth-child(1) { width: 34%; height: 240px; }
  .hero__shapes span:nth-child(2) { width: 48%; height: 120px; }

  .search { margin-top: -62px; }
  .search__form { grid-template-columns: 1fr 240px auto; }
  .field--grow { grid-column: auto; }
  .search__submit { padding-inline: 28px; }

  .auctions { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .step { flex-direction: column; text-align: center; padding: 28px 20px; }
  .step__icon { width: 88px; height: 88px; }
  .step__icon svg.lucide { width: 36px; height: 36px; }

  .features { padding: 40px; }
  .info { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

  .cta__inner { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: 28px; padding-block: 60px; }
  .cta__seal { grid-row: span 2; width: 120px; height: 120px; align-self: center; }
  .cta__buttons { justify-content: flex-start; }
}

/* ---------- ≥ 1024px (desktop) ---------- */
@media (min-width: 1024px) {
  :root { --gutter: 32px; }

  .hero__inner { padding-block: 92px 150px; }
  .hero__content { max-width: 600px; }
  .hero__media { width: 60%; }

  /* Card horizontal, como na referência visual */
  .auction-card { flex-direction: row; }
  .auction-card__media { flex: 0 0 44%; aspect-ratio: auto; min-height: 250px; }
  .auction-card__body { padding: 22px 24px; }
  .auction-card__body .btn { width: auto; min-width: 170px; }

  /* Etapas com conectores */
  .steps { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
  .step { flex-direction: row; text-align: left; padding: 8px; background: none; border: 0; box-shadow: none; }
  .step__connector { display: grid; place-items: center; color: var(--mint-600); }
  .step__connector svg.lucide { width: 28px; height: 28px; }
  .step__connector::before { content: ""; position: absolute; }

  .features { grid-template-columns: 250px 1fr; align-items: center; gap: 40px; padding: 44px 48px; }
  .features__list { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .feature { padding-inline: 24px; border-left: 1px solid rgba(255, 255, 255, .16); }

  .categories { grid-template-columns: repeat(4, 1fr); gap: 20px; }

  .info { grid-template-columns: 5fr 6fr; gap: 64px; }

  .cta__inner { grid-template-columns: auto 1fr auto; align-items: center; }
  .cta__seal { grid-row: auto; }
  .cta__buttons { width: auto; flex-wrap: nowrap; }

  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 48px; padding-block: 64px 40px; }
}

/* ---------- ≥ 1280px: navegação horizontal ---------- */
@media (min-width: 1280px) {
  .brand__seal { width: 52px; height: 52px; }
  .brand__logo { height: 42px; }
  .header__actions { gap: 2px; }
  .header__cta { margin-left: 6px; }
  .hamburger, .nav__mobile-actions, .nav-backdrop { display: none !important; }
  body.menu-open { overflow: auto; }

  .nav {
    position: static; width: auto; padding: 0; flex-direction: row; background: none; box-shadow: none;
    overflow: visible; transform: none; visibility: visible; transition: none;
  }
  .nav__list { flex-direction: row; align-items: center; gap: 2px; }
  .nav__list > li { position: relative; border: 0; }
  .nav__link { position: relative; width: auto; min-height: 44px; padding: 0 9px; font-size: .85rem; }
  .nav__link::after {
    content: ""; position: absolute; left: 9px; right: 9px; bottom: 4px; height: 3px; border-radius: 2px;
    background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease);
  }
  .nav__link:hover, .nav__link.is-active { color: var(--navy); }
  .nav__link:hover::after, .nav__link.is-active::after, .has-dropdown.is-open > .nav__link::after { transform: scaleX(1); }

  .dropdown,
  .has-dropdown:not(.is-open) > .dropdown,
  .has-dropdown.is-open > .dropdown {
    position: absolute; left: 0; top: calc(100% + 10px); display: block; min-width: 250px; padding: 8px;
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  }
  /* Ponte invisível para o cursor não "perder" o dropdown */
  .dropdown::before { content: ""; position: absolute; inset: -12px 0 auto 0; height: 12px; }
  .has-dropdown:hover > .dropdown,
  .has-dropdown.is-open > .dropdown { opacity: 1; visibility: visible; transform: none; }
  .has-dropdown:hover > .nav__link svg.lucide { transform: rotate(180deg); }
}

/* ---------- ≥ 1440px: header completo ---------- */
@media (min-width: 1440px) {
  .hero__inner { padding-block: 108px 168px; }
  .brand__seal { width: 58px; height: 58px; }
  .brand__logo { height: 46px; }
  .nav__link { padding: 0 13px; font-size: .9rem; }
  .nav__link::after { left: 13px; right: 13px; }
  .login-link span { display: inline; }
  .login-link { padding-inline: 10px; }
  .header__actions { gap: 10px; }
  .features { grid-template-columns: 280px 1fr; }
}