/*
Theme Name: Lo Studio
Theme URI: https://www.lo-studio.co
Description: Child theme of Uncode for Lo Studio. Houses site-specific customisations and the curated Notebook homepage gallery. Safe to edit — survives Uncode updates.
Author: Pete Hellyer Ltd
Author URI: https://petehellyer.com
Template: uncode
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lo-studio-child
*/

/* =========================================================
   Notebook homepage gallery  ([notebook_gallery])
   Minimal + inherits Uncode typography. Tweak freely.
   ========================================================= */

.ls-notebook-gallery {
  display: grid;
  grid-template-columns: repeat(var(--ls-ng-cols, 3), 1fr);
  gap: 2.5rem 2rem;
  width: 100%;
}

/* Column counts driven by the shortcode's `columns` attr */
.ls-notebook-gallery.ls-cols-1 { --ls-ng-cols: 1; }
.ls-notebook-gallery.ls-cols-2 { --ls-ng-cols: 2; }
.ls-notebook-gallery.ls-cols-3 { --ls-ng-cols: 3; }
.ls-notebook-gallery.ls-cols-4 { --ls-ng-cols: 4; }

.ls-ng-item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ls-ng-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;          /* portrait, editorial feel — change to 4/3 or 1/1 to taste */
  overflow: hidden;
  margin-bottom: 1rem;
  background: #f2f2f2;
}

.ls-ng-media .ls-ng-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

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

.ls-ng-date {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.35rem;
}

.ls-ng-title {
  font-size: 1.1rem;
  line-height: 1.25;
  margin: 0;
  font-weight: inherit;         /* match Uncode heading weight */
}

/* Responsive */
@media (max-width: 960px) {
  .ls-notebook-gallery.ls-cols-3,
  .ls-notebook-gallery.ls-cols-4 { --ls-ng-cols: 2; }
}

@media (max-width: 600px) {
  .ls-notebook-gallery { --ls-ng-cols: 1 !important; gap: 2rem; }
}