/* Piece detail page styles — used by The Rhea, Dione, Elara, Phoebe, Selene */

/* Hero */
.piece-hero {
  padding: 40px 64px 120px;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 96px;
  align-items: start;
}
.piece-hero .image {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--cream-soft);
  min-width: 0;
}
.piece-hero .image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.piece-hero .panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 48px;
}
.piece-hero .eyebrow { margin-bottom: 24px; }
.piece-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 4.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
}
.piece-hero h1 em { font-style: italic; color: var(--charcoal-soft); }
.piece-hero .subtitle {
  font-family: var(--serif);
  font-size: clamp(20px, 1.6vw, 24px);
  color: var(--charcoal-soft);
  margin: 0 0 36px;
  font-style: italic;
}
.piece-hero .opener {
  font-family: var(--serif);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  margin: 0 0 40px;
}
.piece-hero .specs {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}
.piece-hero .specs dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  margin: 0 0 32px;
}
.piece-hero .specs dt {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal-faint);
  margin-bottom: 4px;
}
.piece-hero .specs dd {
  font-family: var(--serif);
  font-size: 18px;
  margin: 0;
}
.piece-hero .ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Description */
.piece-description {
  background: var(--cream-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 120px 64px;
}
.piece-description-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
}
.piece-description .eyebrow { margin-bottom: 20px; }
.piece-description h2 {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  margin: 0;
}
.piece-description h2 em { font-style: italic; color: var(--charcoal-soft); }
.piece-description p {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 1.2em;
}
.piece-description p:last-child { margin-bottom: 0; }

/* Gallery */
.piece-gallery {
  padding: 120px 64px;
  max-width: 1440px;
  margin: 0 auto;
}
.piece-gallery .head {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  margin-bottom: 64px;
  align-items: end;
}
.piece-gallery h2 {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  margin: 0;
}
.piece-gallery h2 em { font-style: italic; color: var(--charcoal-soft); }
.piece-gallery .head .eyebrow { margin-bottom: 28px; }
.piece-gallery .head p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin: 0;
  max-width: 50ch;
}
.piece-gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  grid-auto-rows: 200px;
}
.piece-gallery-grid .tile {
  background: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.piece-gallery-grid .tile > img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  background: var(--cream-soft);
  transition: transform 800ms ease;
}
.piece-gallery-grid .tile:hover > img { transform: scale(1.01); }
.piece-gallery-grid .tile .caption {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  padding: 12px 0 0;
  flex: 0 0 auto;
}
.tile-4-2 { grid-column: span 4; grid-row: span 2; }
.tile-2-1 { grid-column: span 2; grid-row: span 1; }
.tile-3-2 { grid-column: span 3; grid-row: span 2; }
.tile-6-2 { grid-column: span 6; grid-row: span 2; }

/* Joinery (dark) */
.joinery {
  background: var(--charcoal);
  color: var(--cream);
  padding: 140px 64px;
}
.joinery-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.joinery .eyebrow { color: var(--charcoal-faint); margin-bottom: 28px; }
.joinery h2 {
  color: var(--cream);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  margin: 0 0 80px;
  max-width: 18ch;
}
.joinery h2 em { font-style: italic; color: var(--charcoal-faint); }
.joinery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 56px;
  border-top: 1px solid rgba(244,236,216,0.18);
  padding-top: 48px;
}
.joinery-item h3 {
  font-size: 26px;
  margin: 0 0 16px;
  color: var(--cream);
}
.joinery-item .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--sage);
  margin-bottom: 16px;
}
.joinery-item p {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(244,236,216,0.78);
  margin: 0;
  max-width: 32ch;
}

/* Options grid */
.options {
  padding: 140px 64px;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
}
.options .eyebrow { margin-bottom: 28px; }
.options h2 {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  margin: 0 0 24px;
}
.options h2 em { font-style: italic; color: var(--charcoal-soft); }
.options .left p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal-soft);
  margin: 0;
}
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.opt {
  border: 1px solid var(--rule);
  padding: 28px;
  background: var(--cream-soft);
}
.opt h4 {
  font-size: 22px;
  margin: 0 0 8px;
}
.opt p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--charcoal-soft);
  margin: 0;
}
.opt .swatch {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
  border-radius: 2px;
}
.swatch.walnut { background: linear-gradient(135deg, #6b4a2e 0%, #4a2f17 100%); }
.swatch.oak { background: linear-gradient(135deg, #d6b787 0%, #b08e5d 100%); }
.swatch.cherry { background: linear-gradient(135deg, #b97852 0%, #7d4527 100%); }
.swatch.painted { background: linear-gradient(135deg, #d6c89c 0%, #c4b07e 100%); }
.swatch.bespoke {
  background: conic-gradient(from 45deg, #6b4a2e, #d6b787, #98a193, #f4ecd8, #6b4a2e);
}

/* CTA */
.piece-cta {
  padding: 160px 64px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.piece-cta .eyebrow { margin-bottom: 28px; }
.piece-cta h2 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  margin: 0 0 28px;
}
.piece-cta h2 em { font-style: italic; color: var(--charcoal-soft); }
.piece-cta p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--charcoal-soft);
  margin: 0 0 40px;
}

/* Related */
.related {
  padding: 100px 64px;
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
}
.related .eyebrow { margin-bottom: 28px; }
.related h2 {
  font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 56px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.related-card {
  cursor: pointer;
  transition: transform 320ms;
}
.related-card:hover { transform: translateY(-4px); }
.related-card .img {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--cream-soft);
  margin-bottom: 20px;
}
.related-card .img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms;
}
.related-card:hover .img img { transform: scale(1.02); }
.related-card h3 {
  font-size: 24px;
  margin: 0 0 4px;
}
.related-card p {
  font-size: 13.5px;
  color: var(--charcoal-soft);
  margin: 0;
}

@media (max-width: 960px) {
  .piece-hero { grid-template-columns: 1fr; padding: 32px 24px 64px; gap: 32px; }
  .piece-description { padding: 64px 24px; }
  .piece-description-inner { grid-template-columns: 1fr; gap: 24px; }
  .piece-gallery { padding: 64px 24px; }
  .piece-gallery .head { grid-template-columns: 1fr; gap: 24px; }
  .piece-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .piece-gallery-grid .tile { aspect-ratio: 4/3; grid-column: span 1 !important; grid-row: span 1 !important; }
  .joinery { padding: 80px 24px; }
  .joinery-grid { grid-template-columns: 1fr; gap: 40px; }
  .options { padding: 80px 24px; grid-template-columns: 1fr; gap: 40px; }
  .options-grid { grid-template-columns: 1fr; }
  .piece-cta { padding: 80px 24px; }
  .related { padding: 64px 24px; }
  .related-grid { grid-template-columns: 1fr; gap: 32px; }
}