/* Home page desktop QA @ 1440px.
   Shell (container/header/footer) lives in v2-desktop-shell.css.
   This file is home-only geometry and artwork. */
@media (min-width: 993px) {
  /*
    Figma Device 6656:35512 / image 18 (file BP5YoEwirjG1HZ8Pprmur0):
    frame 500×383 at x=-35. Asset is the original uploaded PNG (855×607)
    with transparent ground + black base pads — do not strip near-black.
    Scale so opaque subject height ≈ 383 (Figma layer).
    Hero sits in the same max-width + gutter band as header/footer (not
    full-bleed to the viewport right). Glow may paint past the column into
    side margins on wide screens; .v2-hero { overflow:hidden } clips at
    the viewport edge (no horizontal scroll).
  */
  .v2--home .v2-hero__inner {
    grid-template-columns: minmax(0, 1fr) 560px;
    max-width: var(--v2-max);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--v2-gutter);
    align-items: start;
  }

  .v2--home .v2-hero__device {
    width: 560px;
    height: 500px;
    /*
      Free on all sides so the Ellipse arc can show in the right margin on
      large viewports. Do not use overflow:hidden here — it clips the left
      bleed into the copy and turns the glow into a blue rectangle.
      Outer clip is .v2-hero { overflow:hidden }.
    */
    overflow: visible;
    clip-path: inset(-400px -400px -400px -400px);
  }

  .v2--home .v2-hero__device img {
    position: absolute;
    z-index: 1;
    /* Original 855×607; content ~560 tall → 383 * 607/560 ≈ 415 */
    width: 585px;
    height: 415px;
    max-width: none;
    left: -42px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
  }

  /*
    Ellipse: Figma center is 160px from device left (viewport 1040). Shifted
    +40px so the soft falloff reaches the clip edge (matches Offer).
  */
  .v2--home .v2-hero__device::before {
    z-index: 0;
    width: 750px;
    height: 750px;
    left: 200px;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
      circle 375px at 439px 373px,
      rgba(64, 151, 203, 0.9) 0%,
      rgba(64, 151, 203, 0) 100%
    );
  }

  .v2--home .v2-h2 {
    text-transform: capitalize;
  }

  .v2--home .v2-type-card__body {
    gap: 16px;
  }

  .v2--home .v2-type-card__body h3,
  .v2--home .v2-type-card__body p,
  .v2--home .v2-type-card__cta {
    margin: 0;
  }

  .v2--home .v2-type-card__body p {
    -webkit-line-clamp: 2;
    flex: none;
  }

  .v2--home .v2-type-card__cta {
    margin-top: 0;
  }

  /* The shared arrow is white; mask it with the home page link color. */
  .v2--home .v2-type-card__cta img {
    display: none;
  }

  .v2--home .v2-type-card__cta::after {
    content: "";
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("/img/v2/icons/arrow-up-right.svg") center / contain no-repeat;
  }

  .v2--home .v2-product-copy .v2-btn--link img {
    display: none;
  }

  .v2--home .v2-product-copy .v2-btn--link::after {
    content: "";
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url("/img/v2/home/arrow-right.svg") center / contain no-repeat;
  }

  .v2--home .v2-product-media {
    border-radius: 16px;
    overflow: hidden;
  }

  .v2--home .v2-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Expanded restaurant-types grid: 4 + 4 + 2 (Figma variant) */
  .v2--home .v2-types.is-expanded .v2-types-grid {
    grid-template-rows: auto;
  }

  .v2--home .v2-types__all .v2-btn {
    border: 0;
    cursor: pointer;
    font: inherit;
  }
}