/* ONLYDROP v94 — Above-the-fold mixed media index.
   All five disciplines remain in view on standard desktops.
   The portrait art spans both rows; reels and animatics gain wide video windows.
   Mobile (<701px) and small-tablet (701–900px) layouts are left unchanged. */

@media (min-width:901px) {
  html body #views #home.view-panel {
    height:100dvh !important;
    max-height:100dvh !important;
    overflow-y:hidden !important;
    overflow-x:hidden !important;
    overscroll-behavior-y:contain;
  }

  html body #views #home .index-screen {
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    box-sizing:border-box !important;
    height:100dvh !important;
    max-height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
    gap:clamp(6px,.85vh,12px) !important;
    padding:
      clamp(44px,5.6vh,66px)
      clamp(24px,3.35vw,68px)
      clamp(13px,1.7vh,21px) !important;
  }

  /* Reserve most of the screen for artwork; retain the graphic hero identity. */
  html body #views #home .index-topline {
    flex:0 0 auto !important;
    min-height:0 !important;
  }
  html body #views #home .index-intro {
    flex:0 0 auto !important;
    min-height:clamp(137px,19vh,200px) !important;
    max-height:24vh !important;
    margin:0 !important;
    padding:0 !important;
    align-items:center !important;
    gap:clamp(12px,1.7vw,25px) !important;
  }
  html body #views #home .index-name-lockup .name-line-primary {
    font-size:clamp(54px, min(7.6vh,6.9vw), 90px) !important;
  }
  html body #views #home .index-name-lockup .name-line-secondary {
    font-size:clamp(50px, min(7.1vh,6.4vw), 85px) !important;
    margin-top:clamp(5px,.8vh,9px) !important;
  }
  html body #views #home .index-name-block .index-alias {
    font-size:clamp(10px,.85vw,13px) !important;
    margin-top:clamp(3px,.7vh,8px) !important;
  }
  html body #views #home .index-description {
    align-self:center !important;
  }
  html body #views #home .index-description > p {
    font-size:clamp(10px,.94vw,13px) !important;
    line-height:1.4 !important;
  }
  html body #views #home .index-3d-stage {
    height:clamp(104px,15vh,162px) !important;
    min-height:0 !important;
  }
  html body #views #home .menu-heading {
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  /*
   *      ARTE 2D        ANIMACIÓN 2D       ANIMACIÓN 3D
   *      (vertical)     STORYBOARD         PROYECTOS
   *
   * The visual portions stretch to their rows. Titles and metadata overlay
   * the media instead of consuming a second, invisible area of the viewport.
   */
  html body #views #home .category-menu {
    display:grid !important;
    grid-template-columns:minmax(0,.89fr) minmax(0,1.21fr) minmax(0,1.18fr) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    flex:1 1 0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    width:100% !important;
    overflow:visible !important;
    align-items:stretch !important;
    align-content:stretch !important;
    column-gap:clamp(12px,1.45vw,23px) !important;
    row-gap:clamp(10px,1.5vh,20px) !important;
    transform:none !important;
  }

  html body #views #home .category-menu > a.category-card:nth-child(n) {
    display:flex !important;
    flex-direction:column !important;
    position:relative !important;
    align-self:stretch !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  html body #views #home .category-menu > a.cat-art2d {
    grid-column:1 !important;
    grid-row:1 / 3 !important;
  }
  html body #views #home .category-menu > a.cat-anim2d {
    grid-column:2 !important;
    grid-row:1 !important;
  }
  html body #views #home .category-menu > a.cat-anim3d {
    grid-column:3 !important;
    grid-row:1 !important;
  }
  html body #views #home .category-menu > a.cat-story {
    grid-column:2 !important;
    grid-row:2 !important;
  }
  html body #views #home .category-menu > a.cat-projects {
    grid-column:3 !important;
    grid-row:2 !important;
  }

  /* Equal height with responsive visual proportions; artwork stays portrait. */
  html body #views #home .category-menu > a.category-card .category-visual {
    display:block !important;
    flex:1 1 auto !important;
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  /* Keep the existing expressive fonts, framed over the corresponding artwork.
     The title-shadow layer in the media already improves their readability. */
  html body #views #home .category-menu > a.category-card > h2.category-title {
    position:absolute !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    top:clamp(9px,1.4vh,15px) !important;
    left:clamp(11px,1.1vw,18px) !important;
    right:clamp(8px,1vw,14px) !important;
    bottom:auto !important;
    z-index:12 !important;
    width:auto !important;
    min-height:0 !important;
    max-width:calc(100% - 22px) !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    pointer-events:none !important;
    text-shadow:0 3px 12px rgba(0,0,0,.78) !important;
  }
  html body #views #home .category-menu > a.category-card > h2.category-title > .type-lettering-readable {
    margin-top:clamp(3px,.5vh,6px) !important;
    padding:2px 5px !important;
    background:rgba(6,11,15,.55) !important;
    color:#edf0ea !important;
  }

  html body #views #home .category-menu > a.category-card .category-info {
    position:absolute !important;
    z-index:13 !important;
    left:clamp(7px,.7vw,12px) !important;
    right:clamp(7px,.7vw,12px) !important;
    bottom:clamp(7px,.9vh,13px) !important;
    width:auto !important;
    height:auto !important;
    min-height:31px !important;
    padding:clamp(7px,.75vh,11px) 10px !important;
    margin:0 !important;
    border:1px solid rgba(187,207,202,.16) !important;
    border-left:3px solid rgba(210,255,74,.65) !important;
    border-radius:1px !important;
    background:rgba(7,12,15,.78) !important;
    box-shadow:none !important;
    transform:none !important;
    backdrop-filter:blur(3px);
  }
  html body #views #home .category-menu > a.category-card .category-info p {
    font-size:clamp(8px,.66vw,10px) !important;
    color:#e1e6e5 !important;
  }

  /* Less crop than the original tall cards; modest vertical reframing
     keeps the small credits at the bottom of the reels inconspicuous. */
  html body #home .category-menu .cat-anim2d .category-slide video,
  html body #home .category-menu .cat-anim3d .category-slide video,
  html body #home .category-menu .cat-story .category-slide video {
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 43% !important;
    transform:scale(1.065) translateY(-1.5%) !important;
    transform-origin:center center !important;
  }

  html body #views #home .index-footer.od-footer-v76 {
    flex:0 0 auto !important;
    min-height:32px !important;
    padding:6px 2px 0 !important;
    margin:0 !important;
  }
}

/* Shorter desktop viewports still show all five categories:
   scale the graphic title and tighten the vertical rhythm first. */
@media (min-width:901px) and (max-height:740px) {
  html body #views #home .index-screen {
    padding-top:clamp(27px,4.2vh,39px) !important;
    padding-bottom:10px !important;
    gap:5px !important;
  }
  html body #views #home .index-intro {
    min-height:clamp(111px,17vh,145px) !important;
    max-height:21vh !important;
  }
  html body #views #home .index-name-lockup .name-line-primary {
    font-size:clamp(41px,7.1vh,66px) !important;
  }
  html body #views #home .index-name-lockup .name-line-secondary {
    font-size:clamp(38px,6.7vh,62px) !important;
  }
  html body #views #home .index-3d-stage {
    height:clamp(85px,13vh,119px) !important;
  }
  html body #views #home .category-menu {
    row-gap:8px !important;
  }
  html body #views #home .category-menu > a.category-card > h2.category-title > .type-lettering-readable {
    margin-top:2px !important;
  }
}

/* Extremely small desktop browser windows are allowed to scroll as a safety
   fallback rather than clipping links or unreadably shrinking the artworks. */
@media (min-width:901px) and (max-height:570px) {
  html body #views #home.view-panel {
    overflow-y:auto !important;
  }
  html body #views #home .index-screen {
    height:auto !important;
    max-height:none !important;
    min-height:620px !important;
    overflow:visible !important;
  }
  html body #views #home .category-menu {
    min-height:360px !important;
  }
}