/* ===========================
   Studio Sol – Gallery Styles
   =========================== */

/* Base + reset-ish */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Slackside One', cursive;
  background: #ffffff;
  color: #000000;
}

/* Main layout: logo on left, gallery on right */

.wrap {
  height: 100vh;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;                 /* 🔑 both columns full height */
  column-gap: clamp(32px, 5vw, 72px);
  padding: var(--wrap-pad-y) 32px;      /* symmetric top/bottom padding */
}

/* Logo block */
.brand {
  display: flex;
  align-items: center;      /* center logo vertically */
  justify-content: center;
}
.brand img {
  width: clamp(200px, 24vh, 340px);   /* was 260px–420px */
  height: auto;
  opacity: 0.9;
}


/* Horizontal scrolling gallery strip */

/* GLOBAL TILE HEIGHT (controls everything) */
:root {
  --wrap-pad-y: 0px;   /* equal top & bottom padding */
  --row-gap: 5px;      /* vertical gap between rows */
  --grid-offset: -8px;
  /* Two rows + one gap + top & bottom padding = 100vh */
  --tile-h: calc(
    (100vh - (var(--wrap-pad-y) * 2) - var(--row-gap)) / 2
  );
}

/* MAIN GALLERY GRID: 2 rows, width & height based on vh */

.grid {
  width: 100%;
  height: 100%;                         /* fill the column height */
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, var(--tile-h));
  grid-auto-columns: calc(var(--tile-h) * 1.5);
  row-gap: var(--row-gap);
  column-gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;                           /* no extra vertical padding */
  scrollbar-width: none;
  transform: translateY(var(--grid-offset));
}

.grid::-webkit-scrollbar {
  display: none;
}

/* Each image “panel” */

.item {
  width: 100%;
  height: 100%;
  border-radius: 0 px;
  overflow: hidden;
  background: #111;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.item:hover img {
  transform: scale(1.04);
}


/* === MOBILE LAYOUT === */

@media (max-width: 600px) {

  /* Whole page: simple vertical stack, centered */
  .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;     /* center children horizontally */
    justify-content: flex-start;
    width: 100%;
    padding: 24px 0 32px;   /* top / bottom white space */
    gap: 16px;              /* space between logo and first photo */
    height: auto;           /* override desktop 100vh */
  }

  /* Logo centered at the top */
  .brand {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .brand img {
    width: 120px;
    height: auto;
  }

  /* Gallery: full-width vertical feed */
  .grid {
    display: flex !important;     /* override desktop grid */
    flex-direction: column;
    align-items: center;          /* center items horizontally */
    width: 100%;
    gap: 4px;
    padding: 0;
    margin: 0;
    overflow: visible;
    height: auto;
    transform: none !important;   /* remove desktop translateY */
  }

  /* Each photo card */
  .item {
    width: 100%;                  /* as wide as the screen */
    max-width: 99%;
    aspect-ratio: 3 / 2;
    border-radius: 0;
    overflow: hidden;
    margin: 0;   
  }

  .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}