/* -----------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------- IMPORTED STYLES --------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


@import "../../universal_styles/variables.css?v=20261101-1600";



/* ---------------------------------------------- vv SITE-SPECIFIC STYLES vv ---------------------------------------------- */

/* Grid view of the drop page (URL /drops, drop.html #dropGrid, scripts/page_scripts/drops/drops.js).
   Figma: Drop Page - Grid (2599:5780), single <-> grid motion (2602:6209). Desktop sizes from Figma (1920 x 1080).
   Layers (bottom -> top): dark background · wall of tiles (tilted -2°) · shadow inside the frame · white frame.
   The single view stays underneath; drops.js animates the layers in / out */





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------ LAYERS -------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* above the drops and the up / down buttons (20), inside #dropLayer, so it moves with the page transition.
   Only there while the grid is open or moving (isActive) */
#dropGrid {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;   /* cuts the tiles off at the screen edges (not the wall: it moves, its own edge would crop) */
  visibility: hidden;
  pointer-events: none;
}

#dropGrid.isActive {
  visibility: visible;
}

/* the wall reacts while the grid is open (also while it is still coming in) */
#dropGrid.isOpen .dropGridWall {
  pointer-events: auto;
}

/* dark background: slides up over the single view (drops.js: yPercent 100 -> 0) */
.dropGridBg {
  position: absolute;
  inset: 0;
  background-color: var(--color-dark);
  will-change: transform;
}

/* the wall: comes in from below, scaled 120% and transparent (drops.js). Scaled around the screen center.
   No overflow: hidden here: while it moves in / out, the tiles above its box must stay visible.
   touch-action: none -> touch drags move the wall instead of the browser trying to scroll / zoom */
.dropGridWall {
  position: absolute;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, opacity;
}

/* tilt: the screen center is the wall's (0, 0); the tiles are placed from there along the tilted rows + columns */
.dropGridTilt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(-2deg);
}

/* shadow of the white frame onto the wall (Figma: Shadow, 100px blur, #141416 at 50%) */
.dropGridShadow {
  position: absolute;
  inset: var(--screen-frame-inset);
  border-radius: var(--screen-frame-radius);
  box-shadow: inset 0 0 100px rgba(var(--color-dark-rgb), 0.5);
  will-change: opacity;
}

/* white frame with rounded corners (same as the single view's .dropFrameMask) */
.dropGridFrame {
  position: absolute;
  inset: var(--screen-frame-inset);
  border-radius: var(--screen-frame-radius);
  box-shadow: 0 0 0 100vmax var(--color-white);
}

/* clipped to the frame's rounded box too, so no sliver of the wall shows at the edges while zoomed out
   (see drop.css .dropScreen) */
#dropGrid {
  clip-path: inset(var(--screen-frame-inset) round var(--screen-frame-radius));
}





/* -----------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------- TILES -------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------- */


/* one drop on the wall (Figma: Picture 500 x 500, 120px apart, drop shadow 0 37px 37px black 50%).
   Placed by drops.js with a transform. Links to the drop's single view */
.dropGridTile {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--drop-grid-tile) * var(--drop-grid-scale) * var(--drop-grid-fit, 1));
  height: calc(var(--drop-grid-tile) * var(--drop-grid-scale) * var(--drop-grid-fit, 1));
  overflow: hidden;
  background-color: var(--color-placeholder);   /* shown while a drop has no image yet */
  box-shadow: 0 calc(37px * var(--drop-grid-scale) * var(--drop-grid-fit, 1)) calc(37px * var(--drop-grid-scale) * var(--drop-grid-fit, 1)) rgba(0, 0, 0, 0.5);
  will-change: transform;
  -webkit-user-drag: none;
}

/* tile size + gap (drops.js reads them). Responsive grid frames (Justus, 2026-11-01): Figma 2645:606 (<1600),
   2645:878 (<1350), 2645:1156 (<1200), 2645:1439 (<1100), 2645:1763 (<850), 2645:2293 (<700), 2645:2028 (<550),
   2645:2565 (<450), 2645:2855 (<390), 2645:3122 (<350). The image keeps the same crop at every size.
   The wall is about square, so from 850 down the same sizes also follow the screen height (Justus) */
#dropGrid {
  --drop-grid-tile: 500px;
  --drop-grid-gap: 120px;
  --drop-grid-scale: 1;    /* the whole wall (tiles, gaps, tile shadow) 10% smaller than Figma below 1350: Justus, 2026-11-01 */
  /* --drop-grid-fit (inline, drops.js fitGridToEdges): small extra scale so every screen edge cuts a tile */
}

@media (width < 1350px), (height < 850px) { #dropGrid { --drop-grid-scale: 0.9; } }

@media (width < 1600px) { #dropGrid { --drop-grid-tile: 435px; --drop-grid-gap: 110px; } }
@media (width < 1350px) { #dropGrid { --drop-grid-tile: 400px; --drop-grid-gap: 100px; } }
@media (width < 1100px) { #dropGrid { --drop-grid-tile: 380px; } }
@media (width < 850px), (height < 850px) { #dropGrid { --drop-grid-tile: 370px; --drop-grid-gap: 100px; } }
@media (width < 700px), (height < 700px) { #dropGrid { --drop-grid-tile: 350px; --drop-grid-gap: 80px; } }
@media (width < 550px), (height < 550px) { #dropGrid { --drop-grid-tile: 320px; --drop-grid-gap: 70px; } }
@media (width < 450px), (height < 450px) { #dropGrid { --drop-grid-tile: 280px; --drop-grid-gap: 50px; } }
@media (width < 390px), (height < 390px) { #dropGrid { --drop-grid-tile: 250px; } }
@media (width < 350px), (height < 350px) { #dropGrid { --drop-grid-tile: 220px; --drop-grid-gap: 40px; } }

/* cropped to the square like the single view's picture; Figma shows it 3.5% larger than the tile (517 / 500px) */
.dropGridTile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  pointer-events: none;
}