/* Furnishow Portfolio CSS */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.fp-root {
  font-family: 'Jost', sans-serif;
  background: #f7f4ef;
  color: #2a1f14;
  overflow-x: hidden;
}

/* ── Section ── */
.fp-section { padding: 6rem 5vw 2rem; }

.fp-label {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.8rem;
}
.fp-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #c4b49a;
  opacity: .45;
}
.fp-label-num {
  font-family: 'Jost', sans-serif;
  font-weight: 200;
  font-size: .75rem;
  letter-spacing: .22em;
  color: #9a8878;
  padding-top: .25rem;
}
.fp-label-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  letter-spacing: -.01em;
  line-height: 1;
}
.fp-label-title em { font-style: italic; }

/* ── Image cell ── */
.fp-img {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #e8e0d5;
  /* Ensure cell always has a size for the absolute image to fill */
  display: block;
}
.fp-img img {
  /* Absolute fill — image ALWAYS covers cell, no white space ever */
  /* !important guards against WordPress themes overriding position/height (e.g. img { height: auto }) */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform .85s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.fp-img:hover img { transform: scale(1.05); }
.fp-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20,10,2,0);
  transition: background .4s;
  pointer-events: none;
  z-index: 1;
}
.fp-img:hover::after { background: rgba(20,10,2,.1); }

/* ── Layout A: tall left + 3 stacked right ── */
.fp-layout-a {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 8px;
  /* Row heights drive the left cell — no height:auto needed */
  grid-template-rows: repeat(3, 38vh);
}
.fp-layout-a .fp-img { min-height: 240px; }
.fp-layout-a .fp-img:first-child {
  grid-row: 1 / 4;
  /* Height comes from spanning 3 rows — image fills via position:absolute */
}

/* ── Layout B rows (used for 8-img and 3-col equal) ── */
.fp-layout-b-r1 {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 8px;
}
.fp-layout-b-r1 .fp-img { height: 60vh; min-height: 380px; }

.fp-layout-b-r2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.fp-layout-b-r2 .fp-img { height: 52vh; min-height: 320px; }

.fp-layout-b-r3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.fp-layout-b-r3 .fp-img { height: 38vh; min-height: 240px; }

/* ── Layout C: narrow | WIDE | narrow ── */
.fp-layout-c {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 8px;
}
.fp-layout-c .fp-img { height: 62vh; min-height: 380px; }

/* ── Layout D: tall left + 2 stacked right ── */
.fp-layout-d {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}
.fp-layout-d .fp-img { height: 40vh; min-height: 260px; }
.fp-layout-d .fp-img:first-child {
  grid-row: 1 / 3;
  height: auto;
  min-height: 420px;
}

/* ── Layout E: 50/50 cinematic ── */
.fp-layout-e {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fp-layout-e .fp-img { height: 70vh; min-height: 440px; }

/* ── Divider ── */
.fp-divider {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 4rem 5vw;
}
.fp-divider::before,
.fp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #c4b49a;
  opacity: .35;
}
.fp-divider-mark {
  width: 6px;
  height: 6px;
  border: 1px solid #9a8878;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ── Lightbox ── */
.fp-lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(8,5,2,.95);
  align-items: center;
  justify-content: center;
}
.fp-lb.open { display: flex; }
.fp-lb img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  animation: fp-up .3s ease;
}
.fp-lb-close {
  position: absolute;
  top: 1.2rem;
  right: 1.8rem;
  color: #f7f4ef;
  font-size: 2.2rem;
  cursor: pointer;
  font-weight: 200;
  line-height: 1;
  opacity: .65;
  transition: opacity .2s;
  background: none;
  border: none;
}
.fp-lb-close:hover { opacity: 1; }
.fp-lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 1px solid rgba(247,244,239,.22);
  color: #f7f4ef;
  font-size: 1.4rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s, background .2s;
}
.fp-lb-btn:hover { opacity: 1; background: rgba(247,244,239,.1); }
#fpPrev { left: 1.2rem; }
#fpNext { right: 1.2rem; }
.fp-lb-counter {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(247,244,239,.4);
  font-size: .72rem;
  letter-spacing: .22em;
  font-weight: 200;
}
@keyframes fp-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══ TABLET ≤ 900px ══ */
@media (max-width: 900px) {
  .fp-layout-a { grid-template-columns: 1fr 1fr; }
  .fp-layout-a .fp-img:first-child { grid-row: auto; min-height: 260px; }
  .fp-layout-a .fp-img { height: 42vw; min-height: 200px; }

  .fp-layout-b-r1 { grid-template-columns: 1fr 1fr; }
  .fp-layout-b-r1 .fp-img:nth-child(2) { grid-column: 1 / -1; height: 50vw; }
  .fp-layout-b-r1 .fp-img { height: 40vw; min-height: 180px; }
  .fp-layout-b-r2 .fp-img { height: 44vw; min-height: 200px; }
  .fp-layout-b-r3 .fp-img { height: 36vw; min-height: 160px; }

  .fp-layout-c { grid-template-columns: 1fr 1fr; }
  .fp-layout-c .fp-img:nth-child(2) { grid-column: 1 / -1; height: 52vw; }
  .fp-layout-c .fp-img { height: 42vw; min-height: 180px; }

  .fp-layout-d { grid-template-columns: 1fr 1fr; }
  .fp-layout-d .fp-img:first-child { grid-row: auto; min-height: 240px; }
  .fp-layout-d .fp-img { height: 42vw; min-height: 200px; }

  .fp-layout-e .fp-img { height: 52vw; min-height: 280px; }
}

/* ══ MOBILE ≤ 580px — NO CROP ══ */
@media (max-width: 580px) {
  .fp-section { padding: 3rem 4vw 1rem; }
  .fp-hero-text h1 { font-size: 2.6rem; }

  .fp-layout-a,
  .fp-layout-b-r1,
  .fp-layout-b-r2,
  .fp-layout-b-r3,
  .fp-layout-c,
  .fp-layout-d,
  .fp-layout-e { grid-template-columns: 1fr !important; }

  /* Mobile: fixed aspect-ratio cells so cover always works, no white space */
  .fp-img { height: 75vw !important; min-height: unset !important; }
  .fp-img img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }

  .fp-layout-a .fp-img:first-child,
  .fp-layout-d .fp-img:first-child { grid-row: auto !important; }
  .fp-layout-b-r1 .fp-img:nth-child(2),
  .fp-layout-c .fp-img:nth-child(2) { grid-column: auto !important; }

  #fpPrev { left: .4rem; }
  #fpNext { right: .4rem; }
  .fp-lb-btn { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
}