/* ============================================================
   page-gallery1.css
   Styles for the One-Column Editorial page only.
   Shared styles live in shared.css
   ============================================================ */


/* ============================================================
   EDITORIAL ITEM
   Each item = one full-width image + meta row + body copy.
   Items stack vertically with generous spacing between them.
   ============================================================ */
.editorial-item {
  margin-bottom: 96px;
}


/* ============================================================
   PHOTO
   Replace the div.photo-placeholder with a real <img>:
   <img class="photo-placeholder" src="images/photo.jpg" alt="Description" />
   ============================================================ */
.photo-placeholder {
  width:        100%;
  aspect-ratio: 16 / 7;    /* wide cinematic ratio — change to 16/9 if preferred */
  display:      block;
  object-fit:   cover;
  transition:   transform 0.6s ease;   /* subtle scale on item hover */
}
.editorial-item:hover .photo-placeholder { transform: scale(1.01); }

/* wrapper clips the overflow during the scale animation */
.photo-wrap {
  overflow: hidden;
  position: relative;
}


/* ============================================================
   ITEM NUMBER
   Small gold counter label above each photo (01, 02, 03 …)
   ============================================================ */
.item-number {
  font-family:    'Orbitron', sans-serif;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 4px;
  color:          var(--gold);
  margin-bottom:  8px;
}


/* ============================================================
   META ROW
   Category label and title on the same baseline row.
   ============================================================ */
.editorial-meta {
  display:     flex;
  align-items: baseline;
  gap:         24px;
  margin-top:  28px;
  flex-wrap:   wrap;   /* wraps on narrow screens */
}

.editorial-label {
  font-family:    'Orbitron', sans-serif;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color:          var(--gold);
  white-space:    nowrap;
}

.editorial-title {
  font-family:    'Orbitron', sans-serif;
  font-size:      clamp(18px, 2.5vw, 28px);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--white);
}


/* ============================================================
   BODY COPY
   max-width keeps line lengths comfortable on wide screens.
   ============================================================ */
.editorial-body {
  font-family: 'EB Garamond', serif;
  font-size:   18px;
  line-height: 1.8;
  color:       rgba(240, 237, 232, 0.6);
  margin-top:  16px;
  max-width:   720px;
}


/* ============================================================
   READ MORE LINK
   Gold text link with animated underline and arrow.
   ============================================================ */
.editorial-link {
  display:         inline-block;
  margin-top:      20px;
  font-family:     'Orbitron', sans-serif;
  font-size:       10px;
  font-weight:     600;
  letter-spacing:  3px;
  text-transform:  uppercase;
  color:           var(--gold);
  text-decoration: none;
  border-bottom:   1px solid transparent;
  padding-bottom:  3px;
  transition:      border-color 0.2s;
}
.editorial-link:hover { border-bottom-color: var(--gold); }

/* arrow shifts right on hover */
.editorial-link::after {
  content:    ' →';
  transition: letter-spacing 0.2s;
}
.editorial-link:hover::after { letter-spacing: 5px; }


/* ============================================================
   ITEM DIVIDER
   Thin gold-tinted line between editorial items.
   ============================================================ */
.item-divider {
  width:         100%;
  height:        1px;
  background:    rgba(201, 168, 76, 0.12);
  margin-bottom: 80px;
}


/* ============================================================
   MOBILE NAV CLEARANCE
   On tall/narrow screens the section needs extra top padding
   to push the Biography label clear of the fixed nav bar.
   ============================================================ */
@media (max-width: 900px) {
  section {
    padding-top: calc(var(--nav-height) + 24px);
  }
}