/* =============================================================================
   GABELICH GALLERY — REUSABLE COMPONENTS
   Normalized, token-driven versions of the recurring patterns from the
   production site. Import AFTER design-tokens.css.

   These are the "design system in code" — the same primitives the homepage
   uses, so new pages inherit identical behaviour instead of re-deriving it.
   ============================================================================= */

/* ---- CONTAINER ----------------------------------------------------------- */
.gg-container {
  max-width: var(--maxw-container);
  margin: 0 auto;
  padding-left: var(--pad-desktop);
  padding-right: var(--pad-desktop);
}
@media (max-width: 768px) {
  .gg-container { padding-left: var(--pad-mobile); padding-right: var(--pad-mobile); }
}

/* ---- BUTTON (the single global pill) ------------------------------------
   Used everywhere: DISCUSS A PROJECT, REQUEST A PRIVATE APPOINTMENT, etc.
------------------------------------------------------------------------- */
.gg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 28px;
  border: var(--hair) solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-gerstner-programm);
  font-weight: 400;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--color-ink);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.gg-button:hover { border-color: var(--color-ink); background: var(--color-wash); }
.gg-button:active { transform: translateY(1px); }
.gg-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- TYPE PRIMITIVES ----------------------------------------------------- */
.gg-label {            /* small Gerstner label / subheading */
  font-family: var(--font-gerstner-programm);
  font-weight: 400; font-style: normal;
  font-size: var(--fs-mid); line-height: var(--lh-mid);
  letter-spacing: 0; color: var(--color-ink); margin: 0;
}
.gg-display {          /* big statement heading — GROTESQUE, not serif */
  font-family: var(--font-gerstner-programm);
  font-weight: 400;
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: 0; text-align: center; text-transform: uppercase;
  color: var(--color-ink); margin: 0;
}
.gg-serif {            /* serif sub-line / description — JHA Times Now */
  font-family: var(--font-jha-times-now);
  font-weight: 350;
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: 0; text-align: center; color: var(--color-ink); margin: 0;
}
.gg-serif-large {      /* 34px serif description (network / services intros) */
  font-family: var(--font-jha-times-now);
  font-weight: 350;
  font-size: var(--fs-large); line-height: var(--lh-large);
  color: var(--color-ink); margin: 0;
}
.gg-serif-large em { font-style: italic; }
@media (max-width: 768px) {
  .gg-display { font-size: 32px; line-height: 34px; }
  .gg-serif   { font-size: 33px; line-height: 100%; }
  .gg-serif-large { font-size: 28px; line-height: 30px; }
}

/* ---- HAIRLINE RULE ------------------------------------------------------- */
.gg-hairline { border: none; border-top: var(--hair-fine) solid var(--color-hair); margin: 0; }

/* ---- HERO ---------------------------------------------------------------- */
.gg-hero {
  height: 100vh; min-height: 500px;
  width: 100%; padding: 0 20px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gg-hero-logo-wrap {
  width: 100%; max-width: var(--maxw-media);
  display: flex; align-items: center; justify-content: center;
  mix-blend-mode: difference;   /* inverts the wordmark over any background */
}
.gg-hero-logo-wrap svg { width: 100%; max-width: var(--maxw-media); height: auto; }

/* ---- DRAG-SCROLL SLIDER (services / projects / bespoke) ------------------
   Desktop = native horizontal drag-scroll with hidden scrollbar + custom
   pill cursor. JS attaches the cursor + drag; CSS below is the styling.
------------------------------------------------------------------------- */
.gg-slider {
  position: relative; width: 100%;
  overflow-x: auto; overflow-y: hidden;
  cursor: none;                 /* replaced by .gg-cursor element via JS */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  user-select: none;
}
.gg-slider::-webkit-scrollbar { display: none; }
.gg-slider-track { display: flex; gap: var(--gap-row); min-width: max-content; width: max-content; }
.gg-slider-item { flex: 0 0 auto; min-width: var(--slider-item-min); display: flex; flex-direction: column; }
.gg-slider-media {
  width: 100%; aspect-ratio: var(--card-aspect);
  overflow: hidden; background: var(--color-media-placeholder); margin-bottom: 20px;
}
.gg-slider-media > * { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The signature custom cursor (position via JS: left/top = mouse coords) */
.gg-cursor {
  position: fixed; pointer-events: none; z-index: 9999;
  width: var(--cursor-w); height: var(--cursor-h);
  background: var(--color-paper);
  border: var(--hair) solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-gerstner-programm);
  font-size: var(--fs-ui); line-height: var(--lh-ui); color: var(--color-ink);
  transform: translate(-50%, -50%);
}

/* Hover overlay on a card (e.g. project title on hover) */
.gg-card { position: relative; width: 100%; }
.gg-card-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; background: transparent;
  transition: opacity var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.gg-card-overlay-text {
  font-family: var(--font-gerstner-programm);
  font-size: var(--fs-ui); line-height: var(--lh-mid);
  text-transform: uppercase; color: #fff; text-align: center; padding: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .gg-card:hover .gg-card-overlay { opacity: 1; background: var(--color-overlay); }
}

/* Mobile slider dots (thin lines that thicken when active) */
.gg-dots { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 35px; }
@media (min-width: 769px) { .gg-dots { display: none; } }
.gg-dot {
  width: 20px; height: 1px; border: none; padding: 0; cursor: pointer;
  background: var(--color-border-soft-2);
  transition: height var(--dur-base) ease, background-color var(--dur-base) ease;
}
.gg-dot.active { height: 2px; background: var(--color-ink); }

/* ---- CURSOR-FOLLOW IMAGE (artists / network location list) --------------
   Hovering a row reveals an image that tracks the cursor (JS sets left/top).
------------------------------------------------------------------------- */
.gg-follow-image {
  position: fixed; top: 0; left: 0; pointer-events: none;
  width: var(--follow-img-w); height: var(--follow-img-h);
  object-fit: cover; z-index: 1000;
  opacity: 0; transition: opacity var(--dur-fast) ease;
}
.gg-follow-image.is-visible { opacity: 1; }
@media (max-width: 768px) { .gg-follow-image { width: 160px; height: 210px; } }

/* ---- CONFIGURABLE ARTWORK GRID ------------------------------------------
   Column counts driven by CSS vars so each instance can differ.
------------------------------------------------------------------------- */
.gg-artwork-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns-desktop, 6), 1fr);
  column-gap: var(--column-gap-desktop, 20px);
  row-gap: var(--row-gap-desktop, 20px);
}
.gg-artwork-grid > * { aspect-ratio: var(--grid-aspect); overflow: hidden; background: var(--color-media-placeholder); }
.gg-artwork-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1100px) and (min-width: 769px) {
  .gg-artwork-grid { grid-template-columns: repeat(var(--columns-tablet, 4), 1fr); }
}
@media (max-width: 768px) {
  .gg-artwork-grid {
    grid-template-columns: repeat(var(--columns-mobile, 3), 1fr);
    column-gap: var(--column-gap-mobile, 10px); row-gap: var(--row-gap-mobile, 10px);
  }
}