@import url("resources-hub.css?v=20260908-342");

/* Build 268 — Wedding Advice landing pagination.
   This file is loaded only by wedding-advice.php. The article page keeps its
   Related Articles carousel and the Build 267 article/scroller fixes. */

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container {
  grid-template-rows: auto auto auto auto !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-toolbar {
  grid-column: 1 !important;
  grid-row: 1 / span 4 !important;
  z-index: 40 !important;
  pointer-events: auto !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-toolbar > a.btn {
  position: relative !important;
  z-index: 41 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-results-summary {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: -2px 0 0 !important;
  color: #cfc6b9 !important;
  font-size: .98rem !important;
  line-height: 1.5 !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-results-summary strong {
  color: #f2cf78 !important;
  font-weight: 800 !important;
}

/* The Wedding Advice index is a paginated grid, not a horizontal carousel. */
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid {
  grid-column: 2 !important;
  grid-row: 3 !important;
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  align-items: stretch !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 0 0 !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  anchor-name: none !important;
  scroll-snap-type: none !important;
  scroll-padding: 0 !important;
  scroll-behavior: auto !important;
  overscroll-behavior: auto !important;
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
  box-sizing: border-box !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

@supports selector(.advice-grid::scroll-button(right)) {
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid::scroll-button(left),
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid::scroll-button(right) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    content: none !important;
  }
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card {
  flex: initial !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 540px !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
  box-sizing: border-box !important;
}

/* Keep the approved Build 265 artwork tied to the article's position in the full
   advice library even after category filtering or pagination changes DOM order. */
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--art-1::before { background-image: url("../img/article-heroes/01-songs-and-requests.webp"), url("../img/generated/wedding-advice-265/01-songs-and-requests.webp") !important; }
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--art-2::before { background-image: url("../img/article-heroes/02-supplier-checklist.webp"), url("../img/generated/wedding-advice-265/02-supplier-checklist.webp") !important; }
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--art-3::before { background-image: url("../img/article-heroes/03-electric-violin-backing-tracks.webp"), url("../img/generated/wedding-advice-265/03-electric-violin-backing-tracks.webp") !important; }
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--art-4::before { background-image: url("../img/article-heroes/04-behind-the-scenes-setup.webp"), url("../img/generated/wedding-advice-265/04-behind-the-scenes-setup.webp") !important; }
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--art-5::before { background-image: url("../img/article-heroes/05-yorkshire-venue.webp"), url("../img/generated/wedding-advice-265/05-yorkshire-venue.webp") !important; }
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--art-6::before { background-image: url("../img/article-heroes/06-live-music-venue-planning.webp"), url("../img/generated/wedding-advice-265/06-live-music-venue-planning.webp") !important; }
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--art-7::before { background-image: url("../img/article-heroes/07-dj-live-musician-both.webp"), url("../img/generated/wedding-advice-265/07-dj-live-musician-both.webp") !important; }
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--art-8::before { background-image: url("../img/article-heroes/08-drinks-reception-live-music.webp"), url("../img/generated/wedding-advice-265/08-drinks-reception-live-music.webp") !important; }
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--art-9::before { background-image: url("../img/article-heroes/09-civil-church-celebrant.webp"), url("../img/generated/wedding-advice-265/09-civil-church-celebrant.webp") !important; }
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--art-10::before { background-image: url("../img/article-heroes/10-aisle-song-timing.webp"), url("../img/generated/wedding-advice-265/10-aisle-song-timing.webp") !important; }

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .resource-empty {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-pagination {
  grid-column: 2 !important;
  grid-row: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid rgba(210,162,58,.2) !important;
}

.advice-pagination__status {
  color: #cfc6b9;
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .025em;
}

.advice-pagination__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.advice-pagination__page,
.advice-pagination__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid rgba(210,162,58,.38);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #f2cf78;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease,border-color .18s ease,color .18s ease;
}

.advice-pagination__control {
  padding-inline: 16px;
}

.advice-pagination__page:hover,
.advice-pagination__page:focus-visible,
.advice-pagination__control:hover,
.advice-pagination__control:focus-visible,
.advice-pagination__page.is-current {
  border-color: #d2a23a;
  background: #d2a23a;
  color: #080808;
  outline: none;
}

.advice-pagination__page:focus-visible,
.advice-pagination__control:focus-visible {
  box-shadow: 0 0 0 3px rgba(210,162,58,.2);
}

@media (max-width: 980px) {
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container {
    grid-template-rows: auto auto auto auto auto !important;
  }

  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-toolbar {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-results-summary {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid,
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .resource-empty {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-pagination {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    padding-bottom: 0 !important;
  }

  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 720px) {
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card {
    min-height: 510px !important;
  }

  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-pagination {
    align-items: flex-start !important;
  }

  .advice-pagination__links {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .advice-pagination__page,
  .advice-pagination__control {
    transition: none;
  }
}

/* Build 269 — make the category rail an explicit interaction surface and let the
   browser-side filter/paginator own visibility. This avoids dependence on a host or
   cache varying the PHP response by query string. */
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-toolbar {
  isolation: isolate !important;
  overflow: visible !important;
  z-index: 80 !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-toolbar > a.btn {
  position: relative !important;
  z-index: 81 !important;
  display: flex !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing [data-advice-card][hidden],
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing [data-advice-empty][hidden],
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing [data-advice-pagination][hidden] {
  display: none !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid {
  pointer-events: auto !important;
}

/* Build 270 — card continuation and persistent page scroller. */
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card {
  position: relative !important;
  overflow: hidden !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card__target {
  position: absolute !important;
  inset: 0 !important;
  z-index: 12 !important;
  display: block !important;
  border-radius: inherit !important;
  text-decoration: none !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card__content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card__excerpt {
  margin-bottom: 14px !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card__more {
  display: inline !important;
  margin-left: .22em !important;
  color: #f2cf78 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card > .text-link {
  display: none !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card:hover,
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card:focus-within {
  border-color: rgba(242,207,120,.72) !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card:focus-within {
  box-shadow: 0 0 0 3px rgba(210,162,58,.18), 0 22px 50px rgba(0,0,0,.28) !important;
}

html body.resource-page.resource-page-advice .advice-page-scroll {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  top: auto !important;
  z-index: 140 !important;
  display: inline-flex !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(242,207,120,.72) !important;
  border-radius: 999px !important;
  background: rgba(7,6,5,.92) !important;
  color: #f2cf78 !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.46) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transform: translateX(-50%) !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body.resource-page.resource-page-advice .advice-page-scroll:hover,
html body.resource-page.resource-page-advice .advice-page-scroll:focus-visible {
  border-color: #f2cf78 !important;
  background: #d2a23a !important;
  color: #080706 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(210,162,58,.18), 0 14px 38px rgba(0,0,0,.52) !important;
}

html body.resource-page.resource-page-advice .advice-page-scroll svg {
  width: 27px !important;
  height: 27px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: transform .2s ease !important;
}

html body.resource-page.resource-page-advice .advice-page-scroll.is-returning svg {
  transform: rotate(180deg) !important;
}

@media (max-width: 720px) {
  html body.resource-page.resource-page-advice .advice-page-scroll {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.resource-page.resource-page-advice .advice-page-scroll,
  html body.resource-page.resource-page-advice .advice-page-scroll svg {
    transition: none !important;
  }
}

/* Build 271 — normalize card body spacing after Build 270 introduced the
   full-card link wrapper. The wrapper now owns one consistent inset, matching
   the related-article carousel rather than stacking legacy child margins. */
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card > .advice-card__content {
  margin: 22px 24px 0 !important;
  padding: 0 !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card > .advice-card__content h2 {
  margin: .55rem 0 .7rem !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card > .advice-card__content .advice-card__excerpt {
  margin: 0 0 14px !important;
}

html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card > .advice-card__content .resource-meta {
  margin: 16px 0 0 !important;
}

@media (max-width: 720px) {
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card > .advice-card__content {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}


/* Build 272 — keep the Wedding Advice final CTA on the public V2 pill-button system. */
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > .resource-cta .resource-cta-actions .btn {
  min-height: 50px !important;
  padding: 12px 27px !important;
  border: 1px solid #956a16 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.38) !important;
  color: #69480b !important;
  box-shadow: none !important;
  font-size: clamp(.78rem,.78vw,.88rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > .resource-cta .resource-cta-actions .btn.btn-primary {
  border-color: #d3a437 !important;
  background: linear-gradient(135deg,#a86f18 0%,#efc45f 100%) !important;
  color: #080704 !important;
  box-shadow: 0 12px 28px rgba(164,112,26,.18) !important;
}
@media (hover:hover) and (pointer:fine) {
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > .resource-cta .resource-cta-actions .btn:hover,
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > .resource-cta .resource-cta-actions .btn:focus-visible {
    transform: translateY(-2px) !important;
    background: rgba(149,106,22,.08) !important;
  }
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > .resource-cta .resource-cta-actions .btn.btn-primary:hover,
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > .resource-cta .resource-cta-actions .btn.btn-primary:focus-visible {
    background: linear-gradient(135deg,#bb7f1c 0%,#f4cf75 100%) !important;
  }
}
@media (max-width:640px) {
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > .resource-cta .resource-cta-actions .btn {
    min-height: 48px !important;
    padding: 11px 22px !important;
  }
}


/* Build 273 — opt-in per-article featured images.
   Existing articles keep their Build 265 artwork because this rule only applies
   when Admin has explicitly saved an uploaded image for that article. */
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--custom-image::before {
  background-image: var(--advice-card-image) !important;
  background-position: var(--advice-focus-x,50%) var(--advice-focus-y,50%) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}


/* Build 317 — never allow a Wedding Advice card to become image-less while
   article artwork is being centralised. The original Build 265 artwork is the
   second background layer and is used automatically if the dedicated copy does
   not exist. */

/* Build 318 — card imagery is now a real <img>, not a CSS-only pseudo background.
   This makes the selected article hero the single source of truth and prevents a
   missing/moved background asset from leaving an empty black card. */
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--resolved-image::before,
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing > section#articles.resource-section > .container > .advice-grid > article.advice-card.advice-card--resolved-image::after {
  display: none !important;
  content: none !important;
}
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card__media {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: clamp(220px,17vw,280px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #11100d !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(210,162,58,.24) !important;
  pointer-events: none !important;
}
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card__media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: var(--advice-focus-x,50%) var(--advice-focus-y,50%) !important;
  transform: scale(var(--advice-card-zoom,1)) !important;
  transform-origin: var(--advice-focus-x,50%) var(--advice-focus-y,50%) !important;
}
html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card__media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  background: linear-gradient(180deg,rgba(0,0,0,.02) 48%,rgba(7,7,7,.5) 100%) !important;
  pointer-events: none !important;
}
@media (max-width: 720px) {
  html body.resource-page.resource-page-advice main#main-content.wedding-advice-listing .advice-card__media {
    height: 220px !important;
  }
}