/* Bride Stories page (page-bride-stories.php). Lifted from the mockup Webby
   built against the live theme, so type, colour and spacing match the rest of
   the site. Loaded on that template only, so none of this is in main.css. */

.dab-head-sec { margin:70px 0 0; }
/* the theme only centres h1 when it is a direct child of .col-12, and it carries
   a large default bottom margin, so set both here rather than fighting it */
.dab-head-sec h1 { text-align:center; margin:0 0 26px; }
.dab-intro { max-width:720px; margin:0 auto; text-align:center; }
.dab-intro p {
  font-family:'Fira Sans Condensed',sans-serif; font-size:18px; line-height:1.75;
  color:#4a4441; margin:0 0 14px;
}
.dab-intro p:last-child { margin-bottom:0; }
/* the boutique's own line about their brides, set in the heading serif so it
   reads as Dell'Amore speaking rather than as more intro copy */
.dab-intro p.dab-voice {
  font-family:'Playfair Display',serif; font-style:italic; font-size:20px;
  line-height:1.62; color:#3a3330; margin:26px auto 0; max-width:640px;
}
.dab-rule {
  display:block; width:56px; height:1px; background:#b2907a; border:0;
  margin:32px auto 0; padding:0;
}

/* one testimonial per band, stacked down the page, image side alternating */
.dab-stories { margin:64px 0 0; }
.dab-band { padding:80px 0; }
.dab-band.-alt { background:#fbf7f4; }

.dab-story {
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:0 74px; align-items:center; max-width:1240px; margin:0 auto;
}
.dab-story.-flip .dab-figures { order:2; }

.dab-figures { min-width:0; }
/* the source photos run 2:3, which at this column width makes the band far
   taller than the words beside it, so hold the lead at 4:5 and crop from the
   full frame rather than from Google's square thumbnail */
.dab-lead { margin:0; overflow:hidden; background:#efe6df; }
.dab-lead img {
  display:block; width:100%; height:100%; aspect-ratio:4/5;
  object-fit:cover; object-position:center 35%;
}
/* some brides only posted landscape shots, and squeezing those into the upright
   slot cuts the sides off, so give the lead the shape the photo already has */
.dab-lead.-wide img { aspect-ratio:3/2; object-position:center center; }
.dab-support { display:grid; gap:12px; margin-top:12px; }
.dab-support.-n1 { grid-template-columns:1fr; }
.dab-support.-n2 { grid-template-columns:repeat(2,1fr); }
.dab-support.-n3 { grid-template-columns:repeat(3,1fr); }
.dab-support figure { margin:0; overflow:hidden; background:#efe6df; }
.dab-support img { display:block; width:100%; height:100%; object-fit:cover; }
.dab-support.-n1 img { aspect-ratio:16/9; }
.dab-support.-n2 img { aspect-ratio:4/3; }
.dab-support.-n3 img { aspect-ratio:1/1; }

/* every photo links to its large copy, which bride-stories.js opens in the
   viewer; the figure clips the slow zoom on hover */
.dab-zoom { display:block; height:100%; cursor:zoom-in; }
.dab-zoom img { transition:transform .6s ease; }
.dab-zoom:hover img { transform:scale(1.03); }
.dab-zoom:focus-visible { outline:2px solid #b2907a; outline-offset:-2px; }

.dab-text { min-width:0; }
.dab-head {
  font-family:'Playfair Display',serif; font-weight:400; font-size:34px;
  line-height:1.22; color:#0f0f0f; text-align:left; margin:0 0 22px;
}
.dab-words p {
  font-family:'Fira Sans Condensed',sans-serif; font-size:17px; line-height:1.78;
  color:#4a4441; margin:0 0 16px;
}
.dab-words p:last-child { margin-bottom:0; }
.dab-sign { margin-top:28px; padding-top:20px; border-top:1px solid #e3d6cc; }
.dab-sign .dab-name {
  display:block; font-family:'Fira Sans Condensed',sans-serif; font-size:15px;
  font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#0f0f0f;
}
.dab-sign .dab-when {
  display:block; font-family:'Fira Sans Condensed',sans-serif; font-size:13px;
  letter-spacing:.04em; color:#9b8d82; margin-top:7px;
}

/* the theme puts 150px of margin on every section, which would leave a white
   band between this cream CTA and the footer, so pin the bottom margin to 0 */
.dab-cta { background:#fbf7f4; text-align:center; padding:74px 0 78px; margin:64px 0 0; }
.dab-cta h2 { margin-top:0; }
.dab-cta p {
  font-family:'Fira Sans Condensed',sans-serif; font-size:17px; line-height:1.7;
  color:#4a4441; max-width:620px; margin:0 auto 30px;
}
/* the theme adds 10px above and below a button that is alone in its group,
   which the mockup's two-button row never triggered */
.dab-cta .button-group .button { margin:0; }

/* photo viewer, built by bride-stories.js. It sits above the theme's floating
   cart and wishlist buttons, and resets the theme's own button styling */
html.dab-lb-locked { overflow:hidden; }
.dab-lightbox {
  position:fixed; inset:0; z-index:100000; background:rgba(15,15,15,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease;
}
.dab-lightbox[hidden] { display:none; }
.dab-lightbox.is-open { opacity:1; }
.dab-lightbox button {
  appearance:none; -webkit-appearance:none; background:none; border:0; border-radius:0;
  box-shadow:none; margin:0; padding:0; min-width:0; min-height:0; width:auto; height:auto;
  color:#fff; font:inherit; letter-spacing:0; text-transform:none; cursor:pointer;
}
.dab-lightbox button[hidden] { display:none; }
.dab-lightbox button:focus-visible { outline:2px solid #b2907a; outline-offset:2px; }
.dab-lb-figure {
  margin:0; display:flex; flex-direction:column; align-items:center;
  max-width:calc(100vw - 180px);
}
.dab-lb-figure img {
  display:block; width:auto; height:auto; max-width:100%;
  max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px);
  transition:opacity .2s ease;
}
.dab-lb-figure img.is-loading { opacity:0; }
.dab-lb-caption {
  font-family:'Fira Sans Condensed',sans-serif; font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:#fff; margin-top:16px; text-align:center;
}
.dab-lightbox .dab-lb-close {
  position:absolute; top:14px; right:18px; width:44px; height:44px;
  font-size:36px; line-height:44px; text-align:center; opacity:.85;
}
.dab-lightbox .dab-lb-prev,
.dab-lightbox .dab-lb-next {
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  opacity:.85;
}
.dab-lightbox .dab-lb-prev { left:24px; }
.dab-lightbox .dab-lb-next { right:24px; }
.dab-lightbox .dab-lb-close:hover,
.dab-lightbox .dab-lb-prev:hover,
.dab-lightbox .dab-lb-next:hover { opacity:1; }
.dab-lb-dots {
  position:absolute; left:0; right:0; bottom:22px;
  display:flex; justify-content:center; gap:4px;
}
.dab-lightbox .dab-lb-dots button {
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
}
.dab-lightbox .dab-lb-dots button::before {
  content:''; width:8px; height:8px; border-radius:50%; border:1px solid #fff;
}
.dab-lightbox .dab-lb-dots button[aria-current="true"]::before { background:#fff; }
@media (prefers-reduced-motion:reduce) {
  .dab-zoom img, .dab-lightbox, .dab-lb-figure img { transition:none; }
  .dab-zoom:hover img { transform:none; }
}

@media (max-width:1300px) {
  /* below the 1240px band width the theme container leaves only 12px of gutter,
     so give the story its own breathing room rather than sitting on the edge */
  .dab-story { gap:0 48px; padding:0 28px; }
  .dab-head { font-size:30px; }
}
@media (max-width:980px) {
  .dab-band { padding:56px 0; }
  .dab-story { grid-template-columns:1fr; gap:30px 0; max-width:640px; padding:0 20px; }
  .dab-story.-flip .dab-figures { order:0; }
  .dab-stories { margin-top:48px; }
  .dab-head { font-size:28px; }
}
@media (max-width:560px) {
  .dab-head-sec { margin:46px 0 0; }
  .dab-band { padding:44px 0; }
  .dab-intro p { font-size:16.5px; }
  .dab-intro p.dab-voice { font-size:18px; margin-top:22px; }
  .dab-head { font-size:25px; }
  .dab-words p { font-size:16px; line-height:1.74; }
  /* on a phone the photo takes the full width, so the arrows move down beside
     the dots rather than covering it, and swiping does most of the work */
  .dab-lb-figure { max-width:calc(100vw - 24px); }
  .dab-lightbox .dab-lb-prev,
  .dab-lightbox .dab-lb-next { top:auto; bottom:6px; transform:none; width:48px; height:48px; }
  .dab-lightbox .dab-lb-prev { left:8px; }
  .dab-lightbox .dab-lb-next { right:8px; }
  .dab-lightbox .dab-lb-close { top:6px; right:6px; }
  .dab-support { gap:8px; margin-top:8px; }
  .dab-cta { padding:56px 0 60px; }
}