/* =====================================================
   Home split-screen chooser
   Fast hover + clean CTA (no default rectangle)
   ===================================================== */

:root {
  --txt: #ffffff;
  --muted: #e9e9e9;
  --retail-accent: #006d65; /* green */
  --agro-accent:   #ff7a00; /* orange */
}

/* ---------- General layout ---------- */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--txt);
  background: #111;
}

.home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100vh;
  min-height: 100vh;
  isolation: isolate;
}

/* ---------- Each choice block ---------- */

.choice {
  position: relative;
  display: grid;
  place-items: center;
  text-decoration: none;
  overflow: hidden;
  outline: none;
}

/* ---------- Background layers ---------- */

.choice::before,
.choice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* keep transitions short and snappy */
.choice::before {
  transition: filter .14s ease-out, transform .18s ease-out;
  will-change: filter, transform;
  transform-origin: center center;
  backface-visibility: hidden;
  transform: translateZ(0); /* avoid repaint hiccups */
}

/* Retail background */
.choice--retail::before {
  background:
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)),
    linear-gradient(0deg, color-mix(in oklab, var(--retail-accent) 16%, transparent), transparent),
    url("../images/retail-hero.png") center/cover no-repeat;
  filter: brightness(.94) saturate(1);
}

/* Agro background */
.choice--agro::before {
  background:
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)),
    linear-gradient(0deg, color-mix(in oklab, var(--agro-accent) 14%, transparent), transparent),
    url("../images/agro-hero.png") center/cover no-repeat;
  filter: brightness(.94) saturate(1);
}

/* subtle vignette for readability */
.choice::after {
  z-index: -1;
  background: radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.14) 86%);
}

/* ---------- Inner content ---------- */

.choice__inner {
  text-align: center;
  padding: clamp(16px, 3vw, 36px);
  max-width: min(720px, 85%);
}

.choice__logo {
  width: clamp(56px, 9vw, 84px);
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  margin-bottom: clamp(14px, 1.8vw, 18px);
}

.choice__title {
  margin: 0 0 .25em 0;
  font-weight: 700;
  line-height: 1.05;
  font-size: clamp(26px, 4.2vw, 44px);
  color: var(--txt);
  text-shadow: 0 2px 12px rgba(0,0,0,.42);
}

.choice__subtitle {
  margin: 0 0 1.25em 0;
  color: var(--muted);
  font-size: clamp(14px, 1.8vw, 18px);
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* ---------- CTA button (transparent by default) ---------- */

.choice__cta {
  display: inline-block;
  border-radius: 999px;
  padding: .7em 1.15em;
  font-weight: 600;
  font-size: clamp(13px, 1.6vw, 15px);
  letter-spacing: .3px;
  color: #fff;
  border: none;
  background: transparent;       /* no rectangle at rest */
  transition: background .14s ease-out, box-shadow .18s ease-out, transform .14s ease-out;
  box-shadow: none;              /* no glow at rest */
  transform: translateY(0);
}

/* Glow + slight lift only on the hovered side */
.choice--retail:hover .choice__cta {
  box-shadow: 0 10px 26px color-mix(in oklab, var(--retail-accent) 55%, transparent);
  background: rgba(0,0,0,.42);
  transform: translateY(-2px);
}
.choice--agro:hover .choice__cta {
  box-shadow: 0 10px 26px color-mix(in oklab, var(--agro-accent) 55%, transparent);
  background: rgba(0,0,0,.42);
  transform: translateY(-2px);
}

/* ---------- Fast hover logic on images (no layout shift) ---------- */

/* no container-wide dimming = immediate response */
.choice:hover::before {
  filter: brightness(1.02) saturate(1.05) contrast(1.04);
  transform: scale(1.025); /* zoom image layer only */
}


/* ---------- Mobile / touch adjustments ---------- */

@media (max-width: 860px) {
  .home {
    grid-template-columns: 1fr;
    grid-auto-rows: min(52vh, 52svh);
  }
  .choice:hover::before { transform: none; } /* avoid zoom on touch */
  .choice__title { font-size: clamp(22px, 6vw, 34px); }
  .choice__cta { transform: none; }
}