/* ============================================================
   WEDDING HUB PAGES (LIVE)
   Loaded from inc/wedding.php
   ============================================================ */

/* Buttons */
.wedding-green-button {
  background-color: #15402c;
}

.wedding-beige-button {
  background-color: #eef0e8;
  color: #15402c;
}

/* Shop-by-style grid: 3 across on tablet, 2 on mobile */
@media (max-width: 849px) {
  .shop-style-grid .col {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
  }
}

@media (max-width: 549px) {
  .shop-style-grid .col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* Shop-by-stage grid */
.shop-stage-grid .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.shop-stage-grid .box-image {
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-stage-grid .box-image img {
  max-height: 70%;
  max-width: 70%;
  object-fit: contain;
}

/* Wedding journey row (mobile) */
@media (max-width: 549px) {
  .wedding-journey-row .col {
    display: flex;
    padding: 7px !important;
  }

  .wedding-journey-row .col > .box,
  .wedding-journey-row .col > div {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

/* Journey lists: shared base styles */
.wedding-journey-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  margin-left: -20px;
}

.wedding-journey-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.wedding-journey-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-color: var(--icon-color, #3F4F3A);
  -webkit-mask-image: var(--icon-svg);
  mask-image: var(--icon-svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Engagement: ring icon */
.journey-engagement {
  --icon-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 8a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM12 2l2.5 4h-5L12 2z'/></svg>");
  --icon-color: #3F4F3A;
}

/* Wedding Day: heart icon */
.journey-wedding-day {
  --icon-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-8-4.5-8-11a4 4 0 0 1 8-1.5A4 4 0 0 1 20 10c0 6.5-8 11-8 11z'/></svg>");
  --icon-color: #3F4F3A;
}

/* Guests' Experience: envelope icon */
.journey-guests {
  --icon-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9 6l9 -6l-9 -6l-9 6' />	<path d='M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10' />	<path d='M3 19l6 -6' />	<path d='M15 13l6 6' /></svg>");
  --icon-color: #3F4F3A;
}

/* After-Wedding: camera heart icon */
.journey-after-wedding {
  --icon-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.5 20h-5.5a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v2'/><path d='M14.41 11.212a3 3 0 1 0 -4.15 4.231'/><path d='M18 22l3.35 -3.284a2.143 2.143 0 0 0 .005 -3.071a2.242 2.242 0 0 0 -3.129 -.006l-.224 .22l-.223 -.22a2.242 2.242 0 0 0 -3.128 -.006a2.143 2.143 0 0 0 -.006 3.071l3.355 3.296'/></svg>");
  --icon-color: #3F4F3A;
}

/* Journey card headings (mobile) */
@media (max-width: 549px) {
  .text-journey-height h2 {
    line-height: 1.9;
  }

  /* Target the heading wrapper specifically inside the journey cards */
  .wedding-journey-row .text.aston-script,
  .wedding-journey-row div.text:has(h2:not(.aston-script)) {
    min-height: 64px; /* enough for 2 lines of the h2 heading style */
    display: flex;
    align-items: flex-start;
  }

  .text-journey-height {
    min-height: 70px; /* enough for 2 lines of script font, e.g. "Wedding Day" */
    display: flex;
    align-items: center;
  }
}

/* Engagement header script */
.engagement-aston-header .aston-script {
  font-size: 2.6rem;
  color: rgb(112, 121, 108);
}

/* "Coming soon" badge on tiles */
.coming-soon-tile {
  position: relative;
}

.coming-soon-tile::after {
  content: "Coming soon";
  position: absolute;
  top: 19px;
  right: 19px;
  background: #c8d6c0;
  color: #173404;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}