/* src/styles/global.css - Swiss-inspired minimalist styling */
/* Palette: only black / white / greys, typographic contrast using weight */
:root{
  --container-width: 1000px;
  --gap: 1rem;
  --muted: #7a7a7a;
  --accent: #111; /* near-black */
  --muted-2: #e9e9e9;
  --bg: #fff;
  --card-bg: #fbfbfb;

  /* typographic scale */
  --fs-base: 16px;
  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-h3: 16px;

  --fw-light: 300;
  --fw-medium: 500;
  --fw-bold: 700;
}

* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Helvetica Neue", "Inter", Arial, sans-serif;
  color: var(--accent);
  background: var(--bg);
  line-height: 1.45;
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* make layout stretch so footer can stick to bottom */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Narrower container, generous vertical rhythm */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 1.25rem;
}

/* Header / nav */
.site-header {
  background: white;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0.5rem 0;
}
.site-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.site-title a { text-decoration: none; color: inherit; }

/* Global link styles: monochrome, underline-only (no purple/visited color) */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:visited { color: var(--accent); }
a:hover, a:focus {
  color: var(--accent);
  text-decoration-thickness: 2px;
  outline: none;
}

/* nav links */
.main-nav a {
  margin-left: 1rem;
  text-decoration: none;
  color: var(--muted);
  font-weight: var(--fw-medium);
  padding: 0.4rem 0.5rem;
  border-radius: 2px;
  transition: color 160ms ease, transform 160ms ease;
}
.main-nav a:hover,
.main-nav a:focus {
  color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}

/* Hero */
.hero { padding: 2rem 0; }
.hero h2 { font-size: var(--fs-h1); margin: 0 0 0.5rem 0; font-weight: var(--fw-bold); }
.hero p { color: var(--muted); margin: 0 0 1rem 0; }

.btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  background: #0b0b0b; /* strong near-black for high contrast */
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 6px;
  font-weight: var(--fw-medium);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(11,11,11,0.12);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn:hover,
.btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(11,11,11,0.16);
  background: #111111;
  outline: none;
}

/* Collections landing - tightened thumbnails, centered cards, and lightbox visuals
   Explicit responsive columns to ensure collections render in multiple columns.
   Mobile: 1, Tablet: 2, Desktop: 3 (>=900px), Large: 4 (>=1200px)
*/
.collections-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
  margin-top: 1rem;
  align-items: start;
}
@media (min-width: 600px) {
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .collections-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .collections-grid { grid-template-columns: repeat(4, 1fr); }
}
.collection-card {
  border: 1px solid var(--muted-2);
  padding: 0.75rem;
  border-radius: 6px;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow 180ms ease, transform 180ms ease;
  /* allow cards to fill their grid cell so multiple columns lay out correctly */
  max-width: none;
  margin: 0;
}
.collection-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(17,17,17,0.06);
}
.collection-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;        /* slightly taller, balanced thumbnail */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.collection-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* use cover inside constrained thumbnail for better fill */
  display: block;
  border-radius: 4px;
}

/* show a subtle hover "View" overlay */
.collection-thumb::after {
  content: "View";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.95);
  background: rgba(0,0,0,0);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: background 180ms ease, opacity 180ms ease;
}
.collection-card:hover .collection-thumb::after {
  background: rgba(0,0,0,0.32);
  opacity: 1;
  backdrop-filter: blur(2px);
  transform: translateZ(0);
  cursor: pointer;
}

/* Collection description styling (muted, readable, subtle) */
/* Clamped to 2 lines to keep card heights uniform */
.collection-desc {
  color: var(--muted);
  font-style: italic;
  margin: 0.5rem 0 1rem;
  max-width: 60ch;
  line-height: 1.4;
  font-size: 0.99rem;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.4em * 2);
}

/* Lightbox styling (used on collections page) - constrained to viewport and generic selector */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;            /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* show any lightbox when aria-hidden is false */
.lightbox[aria-hidden="false"] {
  display: flex;
}

.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  pointer-events: auto;
}

/* Lightbox layout: controls positioned consistently
   - Close stays top-right
   - Prev / Next are centered below the image (in-page footer)
*/
.lb-close, .lb-nav {
  background: rgba(255,255,255,0.98);
  border: 0;
  color: var(--accent);
  font-size: 1rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(17,17,17,0.08);
  z-index: 1010;
}

/* Close remains top-right */
.lb-close { position: absolute; top: 12px; right: 12px; }

/* .lightbox-backdrop will layout content top-to-bottom so controls can live under image */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  pointer-events: auto;
  flex-direction: column; /* stack content vertically */
}

/* Content container (image + caption) */
.lb-content {
  position: relative;
  max-width: min(1100px, calc(100% - 48px));
  width: 100%;
  max-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
}

/* Lightbox controls container: full-size overlay so arrows can be placed at left/right center */
.lb-controls {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none; /* allow clicks only on the buttons themselves */
  z-index: 1020;
}

/* Prev and Next overlay arrows: centered vertically, left/right over the image */
.lb-prev, .lb-next {
  position: relative;
  top: 0;
  transform: none;
  background: rgba(255,255,255,0.96);
  border: 0;
  color: var(--accent);
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(17,17,17,0.08);
  z-index: 1021;
  pointer-events: auto; /* enable button interaction */
}

/* place prev on the left edge, next on the right edge (inside backdrop) */
.lb-controls .left { margin-left: 12px; }
.lb-controls .right { margin-right: 12px; }

/* Image sizing */
.lb-content img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  display: block;
}
.lb-caption {
  color: var(--muted);
  font-weight: var(--fw-medium);
  font-size: 0.95rem;
  text-align: center;
  margin: 0;
}

/* Mobile: allow touch interactions; hint UI */
@media (max-width: 699px) {
  .img-loupe { display: none; }
  .touch-hint {
    display: block;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
  }
}

/* Ensure visit link is monochrome underline-only */
.visit-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* collection title styling (Swiss feel) */
.collection-title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--accent);
  letter-spacing: 0.01em;
}
/* Title links: remove underline, make bold, inherit color */
.collection-title a {
  text-decoration: none;
  font-weight: var(--fw-bold);
  color: inherit;
}

/* Gallery grid (Instagram default) */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}


/* Standard Instagram-style grid item (used elsewhere) */
.gallery-item {
  margin: 0;
  padding: 0.75rem;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 160ms ease;
}
.gallery-item:hover {
  /* Subtle emphasis without movement */
  box-shadow: 0 8px 22px rgba(17,17,17,0.06);
}
.gallery-item .img-wrap {
  width: 100%;
  aspect-ratio: 16/10;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  border-radius: 6px;
  background: #fafafa;
}
.gallery-item img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  display:block;
  transition: filter 180ms ease;
}
.gallery-item:hover img {
  filter: brightness(1.05) contrast(1.03);
}

/* gallery caption uses strict monochrome & hierarchy */
/* Truncate captions/descriptions to 2 lines so items keep uniform height */
.gallery-item figcaption {
  margin: 0;
  font-size: 0.95rem;
  color: var(--accent);
  font-weight: var(--fw-medium);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
}

/* subtle link-like underline on hover for captions
   Disabled: keep captions readable without decorative underlines on hover */
.gallery-item:hover figcaption {
  text-decoration: none;
  cursor: default;
}

/* Reduce harsh placeholder glow: neutral background and smoother transitions */
.gallery-item .img-wrap {
  background: #f6f7f8;
  transition: background-color 260ms ease;
}
.gallery-item img {
  background-color: #f6f7f8;
  opacity: 1;
  transition: opacity 260ms ease, filter 260ms ease;
}

/* Ensure main content grows to push footer to bottom, then footer styles */
main {
  flex: 1 0 auto;
}
.site-footer {
  padding: 1rem 0;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 2rem;
}
.footer-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.footer-right .socials {
  display:flex;
  gap:0.6rem;
  align-items:center;
}
.social-link {
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:6px;
  background:transparent;
  transition: background 140ms ease, color 140ms ease, transform 120ms ease;
  text-decoration:none;
}
.social-link:hover {
  background:#f5f5f5;
  color:var(--accent);
  transform:translateY(-2px);
}
.footer-left small { color: var(--muted); display:block; }

/* Responsive: Instagram grid becomes 2 columns on wider screens (default) */
/* Responsive gallery columns: mobile 1, tablet 2, desktop 3, large-desktop 4 */
@media (min-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}