/* Maquiven — what the home layouts share (HomeLayout, ARCHITECTURE §5.10): search card, sell strip, photo tiles, phone header
   and bottom bar. Linked by layouts/web.php with every layout but classic, never in the shared bundles. Tokens only. */

/* ---- Search card overlapping the photo ---- */
.home-search { display: flex; flex-direction: column; gap: 10px; padding: var(--sp-3); border-radius: var(--r-xl); background: var(--c-surface); box-shadow: var(--sh-lg); }
.home-search__box { display: flex; align-items: center; gap: var(--sp-2); min-height: 52px; padding: 0 4px 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--r-lg); background: var(--c-bg); color: var(--c-text-2); }
.home-search__box:focus-within { border-color: var(--c-focus); box-shadow: var(--sh-focus-field); }
.home-search__box > .ico { flex-shrink: 0; }
.home-search__q { flex: 1 1 0; min-width: 0; min-height: var(--touch); border: 0; outline: 0; background: transparent; color: var(--c-navy); font-size: 16px; -webkit-appearance: none; appearance: none; }
.home-search__q::placeholder { color: var(--c-text-2); opacity: 1; }
.home-search__q::-webkit-search-cancel-button { display: none; }
.home-search__where { position: relative; flex: 0 1 auto; min-width: 0; max-width: 56%; color: var(--c-navy); }
.home-search__where select { display: block; width: 100%; min-height: var(--touch); padding: 0 24px 0 var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-navy); font-size: 16px; font-weight: var(--fw-semibold); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; -webkit-appearance: none; appearance: none; }
.home-search__where select:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.home-search__where .ico { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.home-search__actions { display: flex; gap: var(--sp-2); }
.home-search__go { flex: 1 1 0; min-height: 48px; border-radius: var(--r-lg); font-size: 16px; font-weight: var(--fw-bold); }
.home-search__publish { flex: 1.3 1 0; min-height: 48px; padding-inline: var(--sp-2); border: 1.5px solid var(--c-navy); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-navy); font-size: 16px; font-weight: var(--fw-bold); white-space: nowrap; }
.home-search__publish:hover { background: var(--c-navy-tint); color: var(--c-navy); }

/* ---- "¿Vendes un equipo?" strip ---- */
.home-strip { display: flex; align-items: center; gap: var(--sp-3); min-height: 68px; padding: 14px var(--sp-4); border-radius: var(--r-xl); background: var(--c-navy); color: var(--c-white); text-decoration: none; }
.home-strip:hover { background: var(--c-navy-700); color: var(--c-white); }
.home-strip:focus-visible { outline: none; box-shadow: var(--sh-focus-orange); }
.home-strip__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--c-orange); color: var(--c-navy); }
.home-strip__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.3; color: var(--c-on-navy); }
.home-strip__text strong { color: var(--c-white); font-size: 16px; font-weight: var(--fw-bold); }
.home-strip > .ico { flex-shrink: 0; }

/* ---- Photo tiles ---- */
.home-cats { display: flex; gap: 10px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.home-cats::-webkit-scrollbar { display: none; }
.home-cat { flex: 0 0 112px; display: flex; flex-direction: column; gap: 6px; min-height: var(--touch); color: var(--c-navy); text-decoration: none; scroll-snap-align: start; border-radius: var(--r-lg); }
.home-cat:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.home-cat__photo { display: flex; align-items: center; justify-content: center; height: 76px; overflow: hidden; border-radius: var(--r-lg); background: var(--c-navy-tint-2); color: var(--c-navy); }
.home-cat__photo picture, .home-cat__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-cat__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.25; }
.home-cat:hover .home-cat__label { color: var(--c-orange-text); }

/* ---- From 768 px: the card goes on one row, the tiles on a grid ---- */
@media (min-width: 768px) {
  .home-search { flex-direction: row; align-items: center; gap: var(--sp-3); }
  .home-search__box { flex: 1 1 auto; min-width: 0; }
  .home-search__where { max-width: 45%; }
  .home-search__actions { flex: 0 0 auto; }
  .home-search__go { flex: 0 0 auto; min-height: 52px; padding-inline: var(--sp-8); }
  .home-search__publish { flex: 0 0 auto; min-height: 52px; padding-inline: var(--sp-5); }
  .home-strip { padding-inline: var(--sp-6); }
  .home-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .home-cat__photo { height: auto; aspect-ratio: 3 / 2; }
  .home-cat__label { font-size: 15px; }
}

/* ---- Phone: header and bottom bar ---- */
.tabbar { display: none; }
@media (max-width: 767.98px) {
  /* the burger stays (categories, how it works, language). Block M-99: the design's centred wordmark went back to the start of
     the row, since «Publicar equipo» now stays in the header on a phone too and would sit on it */
  .page--home-shell .site-header__inner { position: relative; }
  .page--has-tabbar .user-menu { display: none; }

  .tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-gap) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky-cta); display: flex; align-items: flex-end; padding: 4px; border-radius: 22px; background: var(--c-surface); box-shadow: var(--sh-lg); }
  .tabbar__item, .tabbar__account { flex: 1 1 0; min-width: 0; }
  .tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-height: 52px; padding: 4px 0; border-radius: var(--r-lg); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.2; text-decoration: none; cursor: pointer; list-style: none; }
  .tabbar__item::-webkit-details-marker { display: none; }
  .tabbar__item .ico { width: 22px; height: 22px; }
  .tabbar__item.is-active { color: var(--c-orange-text); }
  .tabbar__item:hover { color: var(--c-navy); }
  .tabbar__item:focus-visible { outline: none; box-shadow: var(--sh-focus-inset); }
  .tabbar__item--publish, .tabbar__item--publish:hover { color: var(--c-navy); font-weight: var(--fw-bold); }
  .tabbar__fab { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -18px; border-radius: 50%; background: var(--c-orange-btn); color: var(--c-white); box-shadow: 0 4px 12px rgba(201, 71, 22, .35); }
  .tabbar__fab .ico { width: 26px; height: 26px; }
  .tabbar__item--publish:focus-visible { box-shadow: none; }
  .tabbar__item--publish:focus-visible .tabbar__fab { box-shadow: var(--sh-focus-orange); }
  .tabbar__badge { position: absolute; top: 0; left: calc(50% + 4px); }
  .tabbar__account { position: relative; }
  .tabbar__account[open] > summary { color: var(--c-orange-text); }
  .tabbar__menu { position: absolute; right: 0; bottom: calc(100% + 10px); left: auto; top: auto; width: min(260px, 72vw); margin: 0; padding: var(--sp-2); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-lg); }
  .tabbar__menu .menu__item, .tabbar__menu button { min-height: var(--touch); }

  /* room for the bar: page end, and everything else that floats at the bottom */
  .page--has-tabbar .site-footer { padding-bottom: calc(var(--tabbar-space) + env(safe-area-inset-bottom, 0px)); }
  .page--has-tabbar .cookie-notice,
  .page--has-tabbar .assistant-launcher,
  .page--has-tabbar .promo--mobile_sticky_card:not(.promo--preview),
  body.page--has-tabbar:not(.page--has-cta) .toast-region { bottom: calc(var(--tabbar-space) + env(safe-area-inset-bottom, 0px)); }
}