/* =========================================================
   Real Weddings — page-specific styles
   ========================================================= */

/* --- RW · Hero --- */
.rw-hero{
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1440 / 560;
  min-height: 420px;
  background: var(--c-black-2);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.rw-hero-media{ position:absolute; inset:0; }
.rw-hero-media img{ width:100%; height:100%; object-fit:cover; object-position: center center; }
.rw-hero-media::after{
  content:"";
  position:absolute; inset: 37.143% 0 0 0;
  background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,.08) 22.596%, rgba(13,13,13,.28) 82.692%, rgba(13,13,13,.28) 100%);
}
.rw-hero-content{ position:relative; z-index:2; width:100%; padding: 64px var(--gutter-mobile) 56px; }
@media (min-width:1360px){ .rw-hero-content{ padding-left:0; padding-right:0; } }
.rw-hero-content .eyebrow{ margin-bottom: 16px; }
.rw-hero-content h1{
  font-size: clamp(32px, 5vw, 54px);
  display: block;
}
.rw-hero-content h1 .h-script{
  font-size: clamp(32px, 5.4vw, 60px);
  margin-left: 2px;
}
.rw-hero-content .lede{
  margin-top: 24px;
  max-width: 600px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: #cfc8bd;
}

/* --- RW · Categories --- */
.rw-categories{ padding: 90px 0 100px; }
.rw-categories h2{ font-size: clamp(28px, 3.6vw, 48px); letter-spacing:-0.02em; }
.rw-categories .h-script{ font-size: clamp(28px, 4vw, 54px); margin-top: 6px; }
.rw-cat-grid{
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 800px){ .rw-cat-grid{ grid-template-columns: 1fr; } }
.rw-cat-card{
  position: relative;
  display: block;
  aspect-ratio: 629/420;
  background: var(--c-black-2);
  overflow: hidden;
}
.rw-cat-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.rw-cat-card:hover img{ transform: scale(1.04); }
/* Scrim only behind the text: starts at the vertical middle of the card and
   fades to fully transparent at its top edge, so the upper half of the photo
   stays clean. */
.rw-cat-card::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; top:50%;
  background: linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,.22) 30%, rgba(13,13,13,.62) 60%, rgba(13,13,13,.95) 100%);
}
.rw-cat-text{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 0 34px 30px;
}
.rw-cat-kicker{
  display:block;
  font-family: var(--font-sans); font-weight:700; font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color: var(--c-gold);
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.7);
  margin-bottom: 10px;
}
.rw-cat-text h3{
  font-family: var(--font-serif-italic); font-weight:600; font-style:italic;
  font-size: clamp(22px, 2.4vw, 30px); color: var(--c-cream); line-height:1.1;
}
.rw-cat-text p{
  font-family: var(--font-sans); font-weight:300; font-size:14px; line-height:1.55;
  color:#d8d2c8; margin-top: 10px; max-width: 90%;
}

/* --- RW · Gallery --- */
.rw-gallery{ padding: 90px 0 100px; }
.rw-gallery h2{ font-size: clamp(28px, 3.6vw, 48px); letter-spacing:-0.02em; }
.rw-gallery .h-script{ font-size: clamp(28px, 4vw, 54px); margin-top: 6px; color: var(--c-gold-dark); }
.rw-gallery-filters{
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rw-filter-btn{
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: .5px;
  padding: 10px 18px;
  border: 1px solid rgba(201,168,76,.4);
  border-radius: 999px;
  background: transparent;
  color: var(--c-navy);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.rw-filter-btn:hover{ border-color: var(--c-gold); }
.rw-filter-btn.is-active{
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-black);
}
.rw-gallery-grid{
  margin-top: 32px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px 24px;
}
@media (max-width: 900px){ .rw-gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .rw-gallery-grid{ grid-template-columns: 1fr; } }
.rw-gallery-card{ display:block; }
.rw-gallery-photo{
  position:relative;
  aspect-ratio: 41/25;
  overflow:hidden;
  background: var(--c-black-2);
}
.rw-gallery-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.rw-gallery-card:hover .rw-gallery-photo img{ transform: scale(1.04); }
.rw-gallery-photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(13,13,13,0) 45%, rgba(13,13,13,.72) 100%);
}
.rw-gallery-name{
  position:absolute; left:24px; bottom:16px; z-index:2;
  font-family: var(--font-serif-italic); font-weight:400; font-style:italic;
  font-size: clamp(20px, 2.2vw, 28px); color: var(--c-cream);
}
.rw-gallery-meta{
  margin-top: 14px; padding-left: 4px;
  font-family: var(--font-sans); font-weight:700; font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color: var(--c-gold);
}

/* --- RW · CTA --- */
.rw-cta{
  position: relative;
  background: var(--c-navy);
  padding: 90px 0;
  overflow: hidden;
}
.rw-cta-bg{ position:absolute; inset:0; opacity:.28; }
.rw-cta-bg img{ width:100%; height:100%; object-fit:cover; }
.rw-cta::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to right, var(--c-navy) 0%, rgba(52,88,108,.55) 55%, rgba(52,88,108,.25) 100%);
}
.rw-cta .wrap{ position:relative; z-index:2; }
.rw-cta h2{
  font-family: var(--font-sans); font-weight:500; font-size: clamp(28px, 3.6vw, 44px);
  color:#fff; letter-spacing:-0.02em; line-height:1.08;
}
.rw-cta .h-script{
  color: var(--c-gold-light); font-size: clamp(30px, 4.6vw, 54px); margin-top: 4px;
}
.rw-cta p{
  margin-top: 26px; max-width: 698px;
  font-family: var(--font-sans); font-weight:300; font-size:16px; line-height:1.8;
  color: var(--c-cta-muted);
}
.rw-cta .btn{ margin-top: 34px; }

@media (max-width: 800px){
  .rw-hero{ min-height: 460px; }
  .rw-categories{ padding: 56px 0 64px; }
  .rw-gallery{ padding: 56px 0 64px; }
  .rw-cta{ padding: 64px 0; }
}