/*
 Theme Name:   Divi Child
 Theme URI:    https://example.com
 Description:  A child theme for the Divi Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     Divi
 Version:      1.0.0
*/

/* Import parent theme styles */
@import url("../Divi/style.css");

/* ---- Scroll offset for sticky header ---- */
html {
  scroll-snap-type: y proximity;
  scroll-padding-top: 66px; /* fallback; JS syncs to actual header height */
}

/* ---- Homepage scroll snap ---- */
body.home .et_builder_inner_content > .et_pb_section {
  scroll-snap-align: start;
}

/* ---- Hero H1 delayed fade-in ---- */
h1.et_pb_module_header {
  opacity: 0;
  animation: heroFadeIn 1.3s ease 1.3s forwards;
}
@keyframes heroFadeIn {
  to {
    opacity: 1;
  }
}
h1.et_pb_module_header.hero-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Wedding Guides  –  add CSS class "wedding-guides" to
   the Divi Blog module
   ========================================================= */

/* 3-column layout with generous spacing */
.wedding-guides .et_pb_ajax_pagination_container {
  padding: 0;
}

.wedding-guides .et_pb_posts.et_grid_module {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Minimal card – no border, no background, no shadow */
.wedding-guides article.et_pb_post {
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Image container – subtle zoom on hover */
.wedding-guides .et_pb_image_container {
  width: 100%;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

.wedding-guides .et_pb_image_container a {
  display: block;
  overflow: hidden;
  padding: 0 !important;
  margin-bottom: 0;
}

.wedding-guides .et_pb_image_container img {
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 0.6s ease;
}

.wedding-guides article.et_pb_post:hover .et_pb_image_container img {
  transform: scale(1.03);
}

/* Hide overlay */
.wedding-guides .et_overlay {
  display: none !important;
}

/* Title – editorial, airy */
.wedding-guides .entry-title {
  font-family: Inter,'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.55;
  color: #444;
  margin: 0;
  padding: 18px 2px 0;
  text-transform: uppercase;
  font-size: 14px;
}

.wedding-guides .entry-title a {
  color: #444;
  text-decoration: none;
  transition: color 0.3s ease;
}

.wedding-guides .entry-title a:hover {
  color: #000;
}

/* Hide meta, content, pagination */
.wedding-guides .post-meta,
.wedding-guides .post-content,
.wedding-guides .pagination {
  display: none !important;
}

/* ---- Wedding Guides Responsive ---- */
@media (max-width: 1024px) {
  .wedding-guides .et_pb_posts.et_grid_module {
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .wedding-guides .et_pb_posts.et_grid_module {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .wedding-guides .entry-title {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .wedding-guides .et_pb_posts.et_grid_module {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =========================================================
   Planning Resources – Blog Module Override
   Add CSS class "planning-resources" to the Divi Blog module
   ========================================================= */

.planning-resources .pr-hidden {
  display: none !important;
}

/* Main wrapper: vertical heading on left, articles on right */
.planning-resources .pr-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
}

/* Vertical heading */
.planning-resources .pr-vertical-heading {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px 0 0;
  margin: 0;
  color: #333;
  left: -35px;
  position: relative;
  top: -43px;
}

/* Articles column */
.planning-resources .pr-articles {
  flex: 1;
  min-width: 0;
}

/* Each article row */
.planning-resources article.pr-article {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  padding: 25px 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 0;
}

.planning-resources article.pr-article:first-child {
  border-top: 1px solid #ddd;
}

.planning-resources article.pr-article.pr-last {
  border-bottom: none;
}

/* Title area (post-content) – hidden, excerpt already pr-hidden */
.planning-resources .pr-article .post-content {
  display: none;
  flex: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
  order: 1;
}

/* The h2 is a direct child of the article – give it flex order 1 */
.planning-resources .pr-article > .entry-title {
  order: 1;
  flex: 1;
  min-width: 0;
  font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  color: #333;
  align-self: center;
}

.planning-resources .pr-article .post-content-inner {
  padding: 0;
  margin: 0;
}

.planning-resources .pr-article .entry-title {
  font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(0.875rem, 0.753rem + 0.255vw, 1rem);
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  color: #333;
}

.planning-resources .pr-article .entry-title a {
  color: #333;
  text-decoration: none;
}

.planning-resources .pr-article .entry-title a:hover {
  color: #000;
}

/* "View Resource →" link */
.planning-resources .pr-view-link {
  font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #555;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 30px;
  order: 2;
  align-self: center;
}

.planning-resources .pr-view-link:hover {
  color: #000;
}

/* Thumbnail – small square on the right */
.planning-resources .pr-article .et_pb_image_container {
  order: 3;
  flex-shrink: 0;
  width: 90px !important;
  height: 90px !important;
  min-width: 90px;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.planning-resources .pr-article .entry-featured-image-url {
  display: block;
  width: 90px !important;
  height: 90px !important;
  margin: 0;
  padding: 0;
}

.planning-resources .pr-article .et_pb_image_container img {
  width: 90px !important;
  height: 90px !important;
  object-fit: cover;
  display: block;
}

/* Remove Divi default spacing / shadows on the module */
.planning-resources .et_pb_ajax_pagination_container {
  padding: 0;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .planning-resources .pr-wrapper {
    flex-direction: column;
  }

  .planning-resources .pr-article .et_pb_image_container {
  order: 2;
  }

  .planning-resources .pr-vertical-heading {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0 0 15px 0;
    text-align: left;
  }

  .planning-resources article.pr-article {
    flex-wrap: wrap;
    gap: 10px;
  }

  .planning-resources .pr-view-link {
    padding: 0 15px;
  }
}

/* =========================================================
   See More / See Less – reveal buttons
   ========================================================= */

/* Hidden extras — specificity must beat article.et_pb_post rules above */
.wedding-guides article.et_pb_post.wg-extra {
  display: none !important;
}
/* Step 1: display:flex, but invisible (set before rAF) */
.wedding-guides article.et_pb_post.wg-extra.wg-show {
  display: flex !important;
  opacity: 0;
  transform: translateY(12px);
}
/* Step 2: rAF triggers transition to fully visible */
.wedding-guides article.et_pb_post.wg-extra.wg-show.wg-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Hiding: transition out, then JS removes wg-show */
.wedding-guides article.et_pb_post.wg-extra.wg-hiding {
  display: flex !important;
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.planning-resources article.et_pb_post.pr-extra {
  display: none !important;
}
.planning-resources article.et_pb_post.pr-extra.pr-show {
  display: flex !important;
  opacity: 0;
  transform: translateY(8px);
}
.planning-resources article.et_pb_post.pr-extra.pr-show.pr-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.planning-resources article.et_pb_post.pr-extra.pr-hiding {
  display: flex !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Shared button shell */
.wg-see-more-btn,
.pr-see-more-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 42px 0 0;
  margin: 0;
  width: 100%;
  outline: none;
}

.wg-see-more-btn .see-more-label,
.pr-see-more-btn .see-more-label {
  font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #222;
  margin-bottom: 6px;
  display: block;
  transition: color 0.3s ease;
}

.wg-see-more-btn .see-more-arrow,
.pr-see-more-btn .see-more-arrow {
  font-size: 11px;
  color: #222;
  display: block;
  line-height: 1;
  transition: transform 0.35s ease, color 0.3s ease;
}

.wg-see-more-btn:hover .see-more-label,
.wg-see-more-btn:hover .see-more-arrow,
.pr-see-more-btn:hover .see-more-label,
.pr-see-more-btn:hover .see-more-arrow {
  color: #000;
  font-weight: 800;
}

.wg-see-more-btn.wg-expanded .see-more-arrow,
.pr-see-more-btn.pr-expanded .see-more-arrow {
  transform: rotate(180deg);
}

/* Planning resources button sits almost flush (small padding) at the section bottom */
.pr-see-more-btn {
  padding-bottom: 10px;
}

/* =========================================================
   Sticky Header – fade in black background
   ========================================================= */
.et_pb_row_0_tb_header {
  transition: background-color 0.5s ease;
}

.et_pb_section_0_tb_header.et_pb_sticky .et_pb_row_0_tb_header {
  background-color: #000 !important;
}

/* =========================================================
   Mosaic Collage Grid  –  [mosaic_collage]
   12-col, 5-row staggered grid matching Figma.
   Pos 1 full height. Pos 2/3 ~70%. Pos 4 ~80%.
   ========================================================= */
.mosaic-collage {
  display: grid;
  grid-template-columns: repeat(54, 1fr);
  grid-template-rows: 4fr 2fr 1fr 0.5fr 2.5fr;
  gap: 4px;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mosaic-cell {
  overflow: hidden;
  position: relative;
}

.mosaic-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pos 1 – full height (18 cols) */
.mosaic-pos-1 { grid-column: 1 / 19;   grid-row: 1 / 6; }

/* Pos 2/3 – equal width (12 cols each), rows 1-3 */
.mosaic-pos-2 { grid-column: 19 / 31;  grid-row: 1 / 4; }
.mosaic-pos-3 { grid-column: 31 / 43;  grid-row: 1 / 4; }

/* Pos 4 – rows 1-4 (12 cols) */
.mosaic-pos-4 { grid-column: 43 / 55;  grid-row: 1 / 5; }

/* Pos 5 – under Pos 2, rows 4-5, slightly wider (+1 sub-col to break vertical line) */
.mosaic-pos-5 { grid-column: 19 / 32;  grid-row: 4 / 6; }

/* Pos 6/7 – equal width, under Pos 3, rows 4-5 */
.mosaic-pos-6 { grid-column: 32 / 38;  grid-row: 4 / 6; }
.mosaic-pos-7 { grid-column: 38 / 43;  grid-row: 4 / 6; }

/* Pos 8/9 – under Pos 4, row 5 only */
.mosaic-pos-8 { grid-column: 43 / 51;  grid-row: 5 / 6; }
.mosaic-pos-9 { grid-column: 51 / 55;  grid-row: 5 / 6; }

/* ---- Mosaic fade-in on scroll ---- */
.mosaic-cell {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.mosaic-cell.mosaic-visible {
  opacity: 1;
}

/* ---- Mosaic Responsive ---- */
@media (max-width: 768px) {
  .mosaic-collage {
    display: block;
    columns: 2;
    column-gap: 4px;
    aspect-ratio: auto;
  }
  .mosaic-cell {
    break-inside: avoid;
    margin-bottom: 4px;
  }
  .mosaic-cell img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
}

/* ---- Mosaic Lightbox ---- */
.mosaic-lightbox-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.mosaic-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: zoom-out;
}
.mosaic-lightbox-overlay.active {
  opacity: 1;
}
.mosaic-lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.mosaic-lightbox-close {
  position: absolute;
  top: 20px;
  right: 28px;
  color: #fff;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  z-index: 1000000;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.mosaic-lightbox-close:hover {
  opacity: 1;
}
.mosaic-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 48px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  user-select: none;
  padding: 20px;
  z-index: 1000000;
}
.mosaic-lightbox-nav:hover { opacity: 1; }
.mosaic-lightbox-prev { left: 10px; }
.mosaic-lightbox-next { right: 10px; }

/* =========================================================
   Review Slider  –  [review_slider]
   ========================================================= */
.mdp-review-slider {
    position: relative;
    max-width: 100%;
    margin: 0 auto 0 0;
    width: 128%;  }

@media screen and (min-width: 98p1x) and (max-width: 1500px) {
    .mdp-review-slider {
        position: relative;
        max-width: 128%;
        margin: 0 0 0 0px;
        width: 128%
    }
}
@media screen and (max-width: 980px) {
  .mdp-review-slider hr {
    display: none;
  }
  .mdp-review-slider {
    width: 108%;  }
}
.mdp-review-slide {
    display: none;
    align-items: center;
    gap: 24px;
    padding: 0;
    box-sizing: border-box;
}
.mdp-review-slide.active {
    display: flex;
    animation: mdpFadeIn 0.5s ease;
}
@keyframes mdpFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mdp-review-logo {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
}
.mdp-review-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.mdp-review-body svg {
    align-self: center;
}
.mdp-review-text {
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 8px;
    font-family: "Playfair Display",Inter, 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 600;
}
.mdp-read-more {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    font-family: Inter, 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    transition: color 0.2s;
}
.mdp-read-more:hover {
    color: #333;
}
.mdp-review-meta {
    font-size: 13px;
    color: #ffc644;
    margin: 0;
}
.mdp-review-meta strong {
    color: #333;
}


/* ---- Review Slider Responsive ---- */
@media (max-width: 600px) {
    .mdp-review-slide { flex-direction: column; text-align: center; gap: 12px; padding: 15px 0; }
    .mdp-review-logo { flex: 0 0 50px; width: 50px; height: 50px; }
    .mdp-review-text { font-size: 14px; }
}

/* =========================================================
   Review Grid  –  [review_grid]
   ========================================================= */
.mdp-review-grid {
    display: grid;
    grid-template-columns: repeat(var(--mdp-grid-cols, 3), 1fr);
    gap: 24px;
    font-family: Inter, 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
}
.mdp-grid-card {
    border: 0px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff4a;
}
.mdp-grid-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center top;
    background-color: #f0ede8;
    flex-shrink: 0;
}
.mdp-grid-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 20px;
}
.mdp-grid-text {
    font-size: 15px;
    line-height: 1.65;
    color: #333;
    margin: 0 0 12px;
    flex: 1;
}
.mdp-grid-read-more {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    font-family: Inter, 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    transition: color 0.2s;
    display: inline;
    margin-left: 4px;
}
.mdp-grid-read-more:hover {
    color: #333;
}
.mdp-grid-meta {
    font-size: 13px;
    color: #ffc644;
    margin: 0;
}
.mdp-grid-meta strong {
    color: #333;
}

/* ---- Review Grid Responsive ---- */
@media (max-width: 1024px) {
    .mdp-review-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .mdp-review-grid {
        grid-template-columns: 1fr;
    }
    .mdp-grid-card {
        padding: 20px 18px;
    }
}

/* =========================================================
   Masonry Gallery  –  add CSS class "masonry-gallery" to
   any Divi Gallery module (Grid mode)
   ========================================================= */

/* Convert Divi's flex grid into CSS columns */
.masonry-gallery .et_pb_gallery_items {
    display: block !important;
    column-count: 3;
    column-gap: 8px;
}

/* Each gallery item fills column width, no forced sizing */
.masonry-gallery .et_pb_gallery_item {
    display: inline-block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    break-inside: avoid;
    float: none !important;
}

/* Remove Divi's forced aspect ratio – show natural proportions */
.masonry-gallery .et_pb_gallery_image {
    padding: 0 !important;
    height: auto !important;
    overflow: hidden;
}

.masonry-gallery .et_pb_gallery_image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
    display: block;
}

/* Remove Divi's default clear on rows */
.masonry-gallery .et_pb_gallery_item.first_in_row {
    clear: none !important;
}

/* Remove the overlay icon if not wanted (optional – keeps lightbox working) */
.masonry-gallery .et_overlay {
    border-radius: 0;
}

/* ---- Masonry Gallery Responsive ---- */
@media (max-width: 1024px) {
    .masonry-gallery .et_pb_gallery_items {
        column-count: 3;
    }
}
@media (max-width: 600px) {
    .masonry-gallery .et_pb_gallery_items {
        column-count: 3;
        column-gap: 8px;

    }
}

/* ---- Masonry Gallery Fade-in on Scroll ---- */
.masonry-gallery .et_pb_gallery_item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 175ms, transform 0.6s ease 250ms;
}
.masonry-gallery .et_pb_gallery_item.masonry-visible {
    opacity: 1;
    transform: translateY(0);
}



/* ---- Masonry Gallery Filter Buttons ---- */
.masonry-filter-bar {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 0 0 30px;
}
.masonry-filter-btn {
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #999;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.masonry-filter-btn:hover {
    color: #333;
}
.masonry-filter-btn.masonry-filter-active {
    color: #111;
    border-bottom-color: #111;
}

/* =========================================================
   Reviews Modal
   ========================================================= */
.mdp-reviews-modal {
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    padding: 40px 20px;
    box-sizing: border-box;
}
.mdp-reviews-modal.mdp-reviews-modal-open {
    opacity: 1;
}
.mdp-reviews-modal-inner {
    background: #fff;
    border-radius: 2px;
    padding: 52px 40px 40px;
    max-width: 1100px;
    width: 100%;
    position: relative;
    margin: auto;
}
.mdp-reviews-modal-close {
    position: absolute;
    top: 16px;
    right: 24px;
    background: none;
    border: none;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    color: #777;
    line-height: 1;
    transition: color 0.2s;
}
.mdp-reviews-modal-close:hover { color: #000; }
.mdp-reviews-modal-title {
    font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 32px;
    text-align: center;
    color: #222;
}
.mdp-reviews-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.mdp-modal-card {
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    border-top: 1px solid #e8e8e8;
}
.mdp-modal-logo {
    margin-bottom: 12px;
}
.mdp-modal-logo img {
    height: 32px;
    width: auto;
    object-fit: contain;
    display: block;
}
.mdp-modal-text {
    font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #444;
    margin: 0 0 6px;
    flex: 1;
}
.mdp-modal-read-more {
    background: none;
    border: none;
    padding: 0 0 8px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    transition: color 0.2s;
    text-align: left;
}
.mdp-modal-read-more:hover { color: #333; }
.mdp-modal-meta {
    font-family: 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    font-size: 12px;
    color: #777;
    margin: 0;
}
.mdp-modal-meta strong { color: #333; }

/* See All Reviews button */
.mdp-see-all-reviews-wrap {
    text-align: center;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.mdp-see-all-reviews-btn {
    background: none;
    border: none;
    border-bottom: 1px solid #777;
    font-family: "Playfair Display", 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #222;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.mdp-see-all-reviews-btn:hover {
    color: #000;
    border-color: #000;
}

/* ---- Reviews Modal Responsive ---- */
@media (max-width: 900px) {
    .mdp-reviews-modal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .mdp-reviews-modal-grid { grid-template-columns: 1fr; }
    .mdp-reviews-modal-inner { padding: 44px 20px 28px; }
    .mdp-reviews-modal { padding: 20px 10px; }
}

/* =========================================================
   Review Carousel  –  [review_carousel]
   ========================================================= */
.mdp-rc-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.mdp-rc-track {
    display: flex;
    gap: 20px;
    will-change: transform;
}

/* Desktop: 4 visible */
.mdp-rc-card {
    flex: 0 0 calc(25% - 15px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mdp-rc-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center top;
    background-color: #f0ede8;
    flex-shrink: 0;
}

.mdp-rc-quote {
    font-style: italic;
    font-size: 15px;
    line-height: 1.65;
    text-align: center;
    color: #333;
    margin: 20px 0 10px;
    padding: 0 4px;
    font-family: "Playfair Display", Georgia, serif;
}
.mdp-rc-quote::before { content: '\201C'; }
.mdp-rc-quote::after  { content: '\201D'; }

.mdp-rc-name {
    font-size: 13px;
    text-align: center;
    color: #888;
    margin: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Laptop + tablet: 3 visible */
@media (max-width: 1100px) {
    .mdp-rc-card { flex: 0 0 calc(33.333% - 13.334px); }
}

/* Phone: 2 visible */
@media (max-width: 767px) {
    .mdp-rc-card { flex: 0 0 calc(50% - 10px); }
    .mdp-rc-quote { font-size: 14px; }
}

.mdp-rc-read-more {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    font-family: Inter, 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.2s;
    margin: 4px auto 0;
    display: block;
}
.mdp-rc-read-more:hover { color: #333; }

/* =========================================================
   Gallery Lightbox  –  shared by [review_grid] + [review_carousel]
   ========================================================= */
[data-images] { cursor: pointer; }

.mdp-gallery-lb {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mdp-gallery-lb.mdp-gallery-lb-open { opacity: 1; }

.mdp-lb-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: min(90vw, 900px);
}
.mdp-lb-img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    user-select: none;
}
.mdp-lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.mdp-lb-close:hover { opacity: 1; }

.mdp-lb-prev,
.mdp-lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 64px;
    line-height: 1;
    cursor: pointer;
    padding: 0 16px;
    opacity: 0.55;
    transition: opacity 0.2s;
    user-select: none;
}
.mdp-lb-prev { left: 0; }
.mdp-lb-next { right: 0; }
.mdp-lb-prev:hover,
.mdp-lb-next:hover { opacity: 1; }

.mdp-lb-count {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    font-family: Inter, sans-serif;
    margin: 0;
    white-space: nowrap;
}

/* =========================================================
   Load More button  –  [review_grid] pagination
   ========================================================= */
.mdp-load-more-wrap {
    text-align: center;
    padding: 32px 0 8px;
}
.mdp-load-more-btn {
    display: inline-block;
    background: none;
    border: 1px solid #333;
    color: #333;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 13px 36px;
    cursor: pointer;
    font-family: Inter, 'Helvetica Neue Light', Helvetica, Arial, Lucida, sans-serif;
    transition: background 0.2s, color 0.2s;
}
.mdp-load-more-btn:hover { background: #333; color: #fff; }
.mdp-load-more-btn:disabled { opacity: 0.45; cursor: default; }

/* Fade-in for AJAX-loaded cards */
@keyframes mdpCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mdp-card-fade-in { animation: mdpCardIn 0.45s ease forwards; }

/* =========================================================
   Scroll Fade-in  –  [review_grid] cards + [review_carousel]
   ========================================================= */
.mdp-grid-card {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.mdp-grid-card.mdp-in-view {
    opacity: 1;
    transform: translateY(0);
}
/* AJAX-appended cards get mdp-in-view immediately; mdp-card-fade-in handles their animation */
.mdp-grid-card.mdp-card-fade-in {
    opacity: 1;
    transform: translateY(0);
}

.mdp-rc-wrapper {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.mdp-rc-wrapper.mdp-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   Hero Slideshow  –  Divi-module crossfade
   In Divi Builder: set the CSS Class of the column that
   contains all hero et_pb_fullwidth_header modules to:
       mdp-hero-slides
   ========================================================= */

/* Column becomes the stacking context */
.mdp-hero-slides {
    position: relative !important;
    overflow: hidden !important;
}

/* All slides get the crossfade transition */
.mdp-hero-slides .et_pb_fullwidth_header {
    transition: opacity 2s ease;
    margin: 0 !important;
}

/* Slides 2+ stack absolutely on top of slide 1 (slide 1 stays in flow, sets height) */
.mdp-hero-slides .et_pb_fullwidth_header:not(:first-child) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    pointer-events: none;
}

/* JS adds this class to bring a slide to the front */
.mdp-hero-slides .et_pb_fullwidth_header.mdp-slide-active {
    opacity: 1 !important;
    pointer-events: auto;
}

/* Gradient vignette on every slide */
.mdp-hero-slides .et_pb_fullwidth_header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.89) 0%, rgba(0,0,0,0) 20%),
        linear-gradient(0deg,   rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 74%);
    pointer-events: none;
    z-index: 1;
}

/* H1 fade (JS cancels animation fill-mode then transitions to 0.01) */
.mdp-hero-slides h1 {
    transition: opacity 1.5s ease;
}