/* Mobile homepage composition: Manolo + Alfred + LlataRoch mark.
   The uploaded transparent PNG supplies only the mobile hero artwork.
   Interactive controls remain the canonical TODOPODEROSO-derived lr-deco-button component. */

@media (max-width: 560px) {
  .home-widget-main {
    padding:
      max(18px, calc(env(safe-area-inset-top) + 12px))
      8px
      max(12px, env(safe-area-inset-bottom));
  }

  /* Keep the PR #96 mobile composition exactly as designed; only restore the
     established LlataRoch widget shell around it. */
  .home-widget {
    width: min(calc(100% - 12px), 668px);
    padding: 0 0 clamp(28px, 7vw, 36px);
    overflow: hidden;
    border: 2px solid var(--home-gold);
    border-radius: 30px;
    background: #fff;
    box-shadow:
      inset 0 0 0 2px rgba(1,23,51,.54),
      inset 0 0 0 3px rgba(244,205,133,.20),
      0 24px 64px rgba(0,0,0,.28),
      0 0 0 1px rgba(210,159,87,.18);
  }

  /* Retire the sliced legacy homepage JPG on mobile only. Desktop keeps it. */
  .home-widget-artwork,
  .home-widget-mobile-spacer {
    display: none;
  }

  /*
   * The uploaded PNG is 1535x2048 with transparent canvas around a visible
   * 784x715 composition (x:370-1154, y:601-1316). The values below crop that
   * canvas in CSS so the source file remains untouched while the visible
   * LlataRoch/Manolo/Alfred artwork fills the mobile sheet.
   */
  /* Render the uploaded composite as one continuous mobile artwork.
     Keeping LlataRoch, Manolo and Alfred in the same layer removes the
     artificial seam created by splitting and repositioning duplicate crops. */
  .home-widget::before {
    content: "";
    display: block;
    position: relative;
    z-index: 1;
    width: calc(100% + 12px);
    margin-left: -6px;
    height: auto;
    aspect-ratio: 784 / 715;
    pointer-events: none;
    background-image: url('/assets/img/Manolo_Alfred_LlataRoch_Logo.PNG.png');
    background-size: 195.8% auto;
    background-position: 49.265% 45.15%;
    background-repeat: no-repeat;
  }

  .home-widget::after {
    content: none;
    display: none;
  }

  /* Preserve the two-column x three-row layout from PR #96. */
  .home-widget-nav {
    position: relative;
    z-index: 3;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: calc(100% - 24px);
    margin: calc(clamp(-62px, -14vw, -48px) + 10px) auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: clamp(22px, 6vw, 28px) clamp(14px, 4vw, 20px);
    justify-content: initial;
    align-content: initial;
  }

  .home-widget-nav a.lr-deco-button {
    width: 90%;
    min-width: 0;
    min-height: clamp(47px, 12.6vw, 54px);
    justify-self: center;
    aspect-ratio: auto;
    padding: 5px;
    font-size: clamp(13.2px, 3.74vw, 15.4px);
    font-weight: 400;
    letter-spacing: .055em;
  }

  .home-widget-nav a.lr-deco-button[href="/todopoderoso/"] {
    padding-inline: 3px;
    font-size: clamp(10.45px, 2.915vw, 12.1px);
    letter-spacing: .01em;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .home-widget {
    padding-top: 0;
    border-radius: 26px;
  }

  .home-widget-nav {
    width: calc(100% - 16px);
    gap: 20px 12px;
    margin-top: -38px;
  }

  .home-widget-nav a.lr-deco-button {
    min-height: 45px;
    font-size: 12.65px;
  }

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