/* ============================================================
   R. Plane Carpenter — Photos / Featured Work (Option A)
   Asymmetric bento mosaic. Replaces the original .gallery-s block.
   Loads alongside style.css and the other v2 stylesheets.
   ============================================================ */

.gx {
  background: #0a0806;
  padding: 100px clamp(28px, 5vw, 68px) 80px;
}
.gx-wrap { max-width: 1320px; margin: 0 auto; }

/* Header */
.gx-head {
  display: flex; align-items: flex-end; gap: 40px;
  margin-bottom: 48px; flex-wrap: wrap; justify-content: space-between;
}
.gx-eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; color: #c4873d; margin: 0 0 18px;
  display: inline-flex; align-items: center; gap: 12px;
}
.gx-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: currentColor;
}
.gx-title {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 400;
  line-height: 1.04; letter-spacing: -.025em;
  color: #fff; margin: 0;
}
.gx-title em { color: #c4873d; font-style: italic; font-weight: 300; }
.gx-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  border: 1px solid rgba(196, 135, 61, .45);
  color: #e8c89a; text-decoration: none; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; transition: all .3s;
}
.gx-cta:hover {
  background: rgba(196, 135, 61, .12);
  border-color: #c4873d; color: #fff;
}
.gx-cta svg { transition: transform .3s; }
.gx-cta:hover svg { transform: translateX(4px); }

/* Bento grid */
.gx-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}
.gx-tile {
  position: relative; overflow: hidden;
  border-radius: 14px; background: #1c1610;
  display: block; cursor: pointer;
  text-decoration: none; color: inherit;
  transform: translateY(20px); opacity: 0;
  transition: transform .7s cubic-bezier(.22, .68, 0, 1.05),
              opacity .7s cubic-bezier(.22, .68, 0, 1.05),
              box-shadow .5s ease;
}

/* Stagger reveal */
.gx-grid.is-in .gx-tile { opacity: 1; transform: none; }
.gx-grid.is-in .gx-tile:nth-child(1) { transition-delay: .05s; }
.gx-grid.is-in .gx-tile:nth-child(2) { transition-delay: .12s; }
.gx-grid.is-in .gx-tile:nth-child(3) { transition-delay: .19s; }
.gx-grid.is-in .gx-tile:nth-child(4) { transition-delay: .26s; }
.gx-grid.is-in .gx-tile:nth-child(5) { transition-delay: .33s; }
.gx-grid.is-in .gx-tile:nth-child(6) { transition-delay: .4s; }
.gx-grid.is-in .gx-tile:nth-child(7) { transition-delay: .47s; }
.gx-grid.is-in .gx-tile:nth-child(8) { transition-delay: .54s; }

/* Hover lift */
.gx-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .5);
}
.gx-tile img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  filter: brightness(.85);
  transition: transform .7s cubic-bezier(.22, .68, 0, 1.1),
              filter .4s ease;
}
.gx-tile:hover img {
  transform: scale(1.06);
  filter: brightness(1);
}
.gx-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(14, 11, 8, .85));
  pointer-events: none;
}

/* Tile label */
.gx-label {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2;
  transform: translateY(8px); opacity: .85;
  transition: transform .5s cubic-bezier(.22, .68, 0, 1.1),
              opacity .4s ease;
}
.gx-tile:hover .gx-label {
  transform: translateY(0); opacity: 1;
}
.gx-tag {
  display: block;
  font-size: 9px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: #c4873d; margin-bottom: 6px;
}
.gx-tile-title {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 15px; font-weight: 400; color: #fff;
  line-height: 1.3; letter-spacing: -.005em;
}

/* Hero tiles get bigger titles */
.gx-tile-hero  { grid-column: span 2; grid-row: span 2; }
.gx-tile-wide  { grid-column: span 2; grid-row: span 1; }
.gx-tile-hero .gx-tile-title { font-size: 22px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gx-tile {
    opacity: 1; transform: none;
    transition: box-shadow .3s ease;
  }
  .gx-tile:hover { transform: none; }
  .gx-tile:hover img { transform: none; }
}

/* Mobile / tablet */
@media (max-width: 980px) {
  .gx-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .gx-tile-hero  { grid-column: span 2; grid-row: span 2; }
  .gx-tile-wide  { grid-column: span 2; grid-row: span 1; }
  /* keep singletons as 1x1 inside the 2-col grid */
  .gx-tile:not(.gx-tile-hero):not(.gx-tile-wide) {
    grid-column: span 1; grid-row: span 1;
  }
}
@media (max-width: 540px) {
  .gx { padding: 60px 16px 60px; }
  .gx-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
  .gx-tile, .gx-tile-hero, .gx-tile-wide {
    grid-column: span 1; grid-row: span 1;
  }
  .gx-tile-hero { grid-row: span 2; }
  .gx-tile-hero .gx-tile-title { font-size: 18px; }
}