/* ============================================================
   J. CALDWELL & SONS — LOOKBOOK.CSS
   Lookbook Page Specific Styles (lookbook.html)
   ============================================================ */

/* ============================================================
   PAGE HEADER
   ============================================================ */
.lookbook-page-header {
  padding: 140px 40px 60px;
  text-align: center;
  border-bottom: 1px solid var(--color-rule);
}

.lookbook-page-header .divider-a-top {
  border: none;
  border-top: 3px solid var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  height: 6px;
  margin: 0 auto 40px;
  max-width: 800px;
}

.lookbook-page-header h1 {
  font-family: var(--font-headline);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.lookbook-page-header .subtitle {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-ink-light);
  margin-bottom: 20px;
  line-height: 1.4;
}

.lookbook-page-header .credit-line {
  font-family: var(--font-nav);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-faded);
}

.lookbook-page-header .divider-a-bottom {
  border: none;
  border-top: 1px solid var(--color-ink);
  border-bottom: 3px solid var(--color-ink);
  height: 6px;
  margin: 40px auto 0;
  max-width: 800px;
}


/* ============================================================
   EDITORIAL SPREAD 1 — [A] FULL-WIDTH + [G] TEXT
   ============================================================ */
.editorial-spread-1 {
  padding: 0 0 80px;
}

.lb-fullwidth-photo {
  width: 100%;
  height: 80vh;
  overflow: hidden;
  position: relative;
}

.lb-fullwidth-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.12) contrast(1.05);
  transition: transform 0.5s ease;
}

.lb-fullwidth-photo:hover img {
  transform: scale(1.06);
}

.editorial-text-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 40px 0;
  text-align: center;
}

.editorial-text-block h2 {
  font-family: var(--font-headline);
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 36px;
}

.editorial-columns {
  column-count: 2;
  column-gap: 40px;
  column-rule: 1px solid var(--color-rule);
  text-align: justify;
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-ink-light);
}

.editorial-columns p {
  margin-bottom: 16px;
}

.editorial-inline-illustration {
  width: 140px;
  margin: 32px auto 0;
  display: block;
  opacity: 0.65;
  filter: sepia(0.3);
}


/* ============================================================
   PHOTO GRID [F] IRREGULAR
   ============================================================ */
.lb-photo-grid-section {
  padding: 60px 40px 80px;
}

.lb-photo-grid {
  display: grid;
  grid-template-areas:
    "a a b"
    "c d d"
    "c e f";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 400px 350px 350px;
  gap: 8px;
  max-width: 1200px;
  margin: 40px auto 0;
}

.lb-grid-item {
  position: relative;
  overflow: hidden;
}

.lb-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
  filter: sepia(0.08) contrast(1.02);
}

.lb-grid-item:hover img {
  transform: scale(1.03);
}

.lb-grid-item figcaption {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faded);
  margin-top: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(245, 240, 232, 0.9));
}

.lb-grid-item--a { grid-area: a; }
.lb-grid-item--b { grid-area: b; }
.lb-grid-item--c { grid-area: c; }
.lb-grid-item--d { grid-area: d; }
.lb-grid-item--e { grid-area: e; }
.lb-grid-item--f { grid-area: f; }


/* ============================================================
   PHOTO STORY [G] EDITORIAL SPREAD × 3
   ============================================================ */
.photo-story-section {
  padding: 60px 0;
  background: var(--color-bg-primary);
}

.photo-story-set {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
  padding: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.photo-story-set--reverse {
  direction: rtl;
}

.photo-story-set--reverse > * {
  direction: ltr;
}

.photo-story-image {
  overflow: hidden;
}

.photo-story-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: sepia(0.1) contrast(1.03);
  transition: transform 0.5s ease;
}

.photo-story-image:hover img {
  transform: scale(1.04);
}

.photo-story-text h3 {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.2;
}

.photo-story-text p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-ink-light);
}


/* ============================================================
   BEHIND THE SCENES [B] NEWSPAPER COLUMNS
   ============================================================ */
.behind-scenes {
  padding: 80px 60px;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}

.behind-scenes .section-header {
  text-align: center;
  margin-bottom: 40px;
}

.behind-scenes .section-num {
  font-family: var(--font-headline);
  font-size: 48px;
  color: var(--color-ink-faded);
  line-height: 1;
  margin-bottom: 8px;
}

.behind-scenes .section-title {
  font-family: var(--font-headline);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
}

.behind-scenes-text {
  column-count: 3;
  column-gap: 36px;
  column-rule: 1px solid var(--color-rule);
  font-size: 17px;
  line-height: 1.75;
  text-align: justify;
  color: var(--color-ink-light);
  max-width: 1200px;
  margin: 0 auto;
}

.behind-scenes-text p {
  margin-bottom: 16px;
}

.bts-photo-left {
  float: left;
  width: 45%;
  margin: 0 20px 10px 0;
}

.bts-photo-left img {
  width: 100%;
  height: auto;
  display: block;
  filter: sepia(0.1);
}

.bts-photo-left figcaption,
.bts-photo-right figcaption {
  font-family: var(--font-nav);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-faded);
  margin-top: 6px;
}

.bts-photo-right {
  float: right;
  width: 40%;
  margin: 0 0 10px 20px;
}

.bts-photo-right img {
  width: 100%;
  height: auto;
  display: block;
  filter: sepia(0.1);
}


/* ============================================================
   LOOKBOOK CTA
   ============================================================ */
.lookbook-cta {
  padding: 80px 40px;
  text-align: center;
  background: var(--color-cream);
}

.lookbook-cta h2 {
  font-family: var(--font-nav);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.lookbook-cta p {
  font-family: var(--font-headline);
  font-size: 17px;
  color: var(--color-ink-light);
  margin-bottom: 28px;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}


/* ============================================================
   RESPONSIVE — TABLET (769–1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  .lb-fullwidth-photo {
    height: 60vh;
  }

  .editorial-text-block h2 {
    font-size: 34px;
  }

  .editorial-columns {
    column-count: 2;
    column-gap: 30px;
  }

  .lb-photo-grid {
    grid-template-rows: 300px 280px 280px;
  }

  .photo-story-set {
    padding: 40px;
    gap: 30px;
  }

  .behind-scenes {
    padding: 60px 40px;
  }

  .behind-scenes-text {
    column-count: 2;
  }
}


/* ============================================================
   RESPONSIVE — SP (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Page Header */
  .lookbook-page-header {
    padding: 120px 20px 40px;
  }

  .lookbook-page-header h1 {
    font-size: clamp(32px, 8vw, 48px);
  }

  .lookbook-page-header .subtitle {
    font-size: 17px;
  }

  .lookbook-page-header .credit-line {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  /* Editorial Spread 1 */
  .lb-fullwidth-photo {
    height: 50vh;
  }

  .editorial-text-block {
    padding: 40px 20px 0;
  }

  .editorial-text-block h2 {
    font-size: clamp(24px, 6vw, 32px);
  }

  .editorial-columns {
    column-count: 1;
  }

  .editorial-inline-illustration {
    width: 100px;
  }

  /* Photo Grid */
  .lb-photo-grid-section {
    padding: 40px 16px 60px;
  }

  .lb-photo-grid {
    grid-template-areas: none;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 6px;
  }

  .lb-grid-item--a,
  .lb-grid-item--b,
  .lb-grid-item--c,
  .lb-grid-item--d,
  .lb-grid-item--e,
  .lb-grid-item--f {
    grid-area: auto;
  }

  .lb-grid-item--a {
    grid-column: 1 / -1;
  }

  .lb-grid-item img {
    aspect-ratio: 4 / 3;
  }

  .lb-grid-item--a img {
    aspect-ratio: 16 / 9;
  }

  .lb-grid-item--c img {
    aspect-ratio: 3 / 4;
  }

  .lb-grid-item figcaption {
    position: static;
    background: none;
    padding: 6px 0;
    font-size: 10px;
  }

  /* Photo Story */
  .photo-story-section {
    padding: 40px 0;
  }

  .photo-story-set,
  .photo-story-set--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    padding: 30px 20px;
    gap: 20px;
  }

  .photo-story-text h3 {
    font-size: 20px;
  }

  /* Behind the Scenes */
  .behind-scenes {
    padding: 60px 20px;
  }

  .behind-scenes-text {
    column-count: 1;
  }

  .bts-photo-left,
  .bts-photo-right {
    float: none;
    width: 100%;
    margin: 0 0 16px 0;
  }

  /* CTA */
  .lookbook-cta {
    padding: 60px 20px;
  }
}


/* ============================================================
   RESPONSIVE — LARGE (1440px+)
   ============================================================ */
@media (min-width: 1440px) {

  .editorial-text-block {
    max-width: 1000px;
  }

  .lb-photo-grid {
    grid-template-rows: 480px 400px 400px;
  }

  .photo-story-set {
    padding: 80px;
  }

  .behind-scenes {
    padding: 100px 80px;
  }

  .behind-scenes-text {
    max-width: 1400px;
  }
}