/* Homepage navigation widget · LlataRoch
   The approved original JPG remains the artwork/geometry source of truth.
   TODOPODEROSO's deco-controls.css is the interaction chrome source of truth. */

:root {
  --home-gold: #d29f57;
  --home-navy: #011733;
  --home-cream: #f7f4ee;
}

html {
  background: var(--home-navy);
}

.lr-home-widget-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(10,44,94,.92), transparent 46%),
    linear-gradient(180deg, #031f49 0%, #021a3c 42%, #011733 100%);
}

.home-widget-main {
  min-height: auto;
  box-sizing: border-box;
  padding: clamp(28px,4vw,48px) 16px clamp(22px,3vw,34px);
  background: transparent;
}

.home-widget {
  position: relative;
  width: min(680px, calc(100vw - 36px));
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid var(--home-gold);
  border-radius: 40px;
  background: var(--home-cream);
  box-shadow:
    inset 0 0 0 2px rgba(1,23,51,.54),
    inset 0 0 0 3px rgba(244,205,133,.20),
    0 34px 82px rgba(0,0,0,.34),
    0 0 0 1px rgba(210,159,87,.18);
  isolation: isolate;
}

.home-widget-artwork {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 997;
  object-fit: contain;
  background: var(--home-cream);
  image-rendering: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.home-widget-mobile-spacer {
  display: none;
}

.home-widget-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.home-widget-nav {
  position: absolute;
  z-index: 3;
  left: 2.2%;
  right: 2.2%;
  top: 69.4%;
  bottom: 3.5%;
  display: grid;
  grid-template-columns: repeat(3, 25.8%);
  grid-template-rows: repeat(2, auto);
  justify-content: space-between;
  align-content: space-between;
  pointer-events: none;
}

.home-widget-nav a {
  width: 100%;
  aspect-ratio: 2.36 / 1;
  padding: 8px 5px;
  transform: translateY(0);
  transition: transform 170ms ease;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .home-widget-nav a:hover {
    z-index: 2;
    transform: translateY(-8px);
  }
}

@media (min-width: 561px) and (hover: none) and (pointer: coarse) {
  .home-widget-main {
    padding-bottom: clamp(20px, 3vw, 30px);
  }
}

@media (max-width: 560px) {
  .lr-home-widget-page {
    min-height: 100dvh;
    background:
      radial-gradient(ellipse at 50% 22%, rgba(16,80,147,.58) 0%, rgba(10,44,94,.34) 34%, rgba(3,31,73,0) 64%),
      linear-gradient(180deg, #011733 0%, #011733 5%, #031f49 15%, #0a2c5e 28%, #031f49 49%, #021a3c 72%, #011733 100%);
    background-color: var(--home-navy);
  }

  .home-widget-main {
    padding:
      max(calc(28px + 10vh), calc(env(safe-area-inset-top) + 20px + 10vh))
      8px
      max(8px, env(safe-area-inset-bottom));
  }

  .home-widget {
    --home-mobile-gap: clamp(52px, 15vw, 70px);
    --home-mobile-cut: calc((100vw - 16px) * .288);
    --home-mobile-nav-shift: clamp(16px, 4.6vw, 22px);
    width: min(100%, 680px);
    border-width: 2px;
    border-radius: 30px;
    background: #fff;
  }

  .home-widget-artwork {
    position: relative;
    z-index: 0;
    opacity: 0;
    margin-bottom: var(--home-mobile-gap);
    background: #fff;
  }

  .home-widget::before,
  .home-widget::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    pointer-events: none;
    background-image: url('/assets/img/LlataRoch%20Home.jpg?v=6d04929');
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .home-widget::before {
    top: 0;
    height: var(--home-mobile-cut);
    background-position: center top;
  }

  .home-widget::after {
    top: calc(var(--home-mobile-cut) + var(--home-mobile-gap));
    bottom: 0;
    background-position: center bottom;
  }

  .home-widget-mobile-spacer {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: var(--home-mobile-cut);
    height: var(--home-mobile-gap);
    background: #fff;
    pointer-events: none;
  }

  .home-widget-nav {
    left: 2.5%;
    right: 2.5%;
    top: calc(69.2% + var(--home-mobile-nav-shift));
    bottom: calc(3.6% - 2px);
    grid-template-columns: repeat(3, 29.1%);
    grid-template-rows: repeat(2, auto);
  }

  .home-widget-nav a.lr-deco-button {
    aspect-ratio: 2.35 / 1;
    min-height: 0;
    padding: 4px 2px;
    color: #ffe0a3;
    font-size: clamp(10.5px, 3vw, 12px);
    font-weight: 600;
    letter-spacing: .035em;
    text-shadow:
      0 1px 0 rgba(0,0,0,.70),
      0 0 8px rgba(255,224,163,.24);
  }

  .home-widget-nav a.lr-deco-button[href="/todopoderoso/"] {
    padding-inline: 1px;
    font-size: clamp(8.75px, 2.45vw, 10px);
    letter-spacing: 0;
    white-space: nowrap;
  }

  .home-widget-nav a.lr-deco-button[href="/juegos/"] {
    padding-inline: 1px;
    font-size: clamp(8.75px, 2.45vw, 10px);
    letter-spacing: 0;
    white-space: nowrap;
  }

  .home-widget-nav a.lr-deco-button::before {
    inset: 4px;
    border-radius: 7px;
  }
}

@media (max-width: 360px) {
  .home-widget-nav a.lr-deco-button {
    font-size: 10px;
    letter-spacing: .02em;
  }

  .home-widget-nav a.lr-deco-button[href="/todopoderoso/"] {
    font-size: 8.6px;
    letter-spacing: 0;
  }

  .home-widget-nav a.lr-deco-button[href="/juegos/"] {
    font-size: 8.6px;
    letter-spacing: 0;
  }
}

.lr-home-widget-page .lr-footer::before {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-widget-nav a {
    transition: none;
  }
}