/* Al Nour static advice fixes — layout, images, pagination (no SPA dependency) */
.page-article .article-photo,
.page-article figure.article-photo.photo-softened {
  height: auto !important;
  max-height: none !important;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1200 / 628;
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: 45px;
  background: #d8dfd1;
  position: relative;
  isolation: isolate;
}
.page-article .article-photo > img,
.page-article figure.article-photo.photo-softened > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  aspect-ratio: 1200 / 628;
  object-fit: cover;
  object-position: center center;
  filter: saturate(.72) contrast(.92) brightness(1.04);
}
.page-article .article-photo.photo-softened:after {
  border-radius: inherit;
}

/* Advice listing / related cards: visible without SPA reveal JS */
.advice-card-photo,
.advice-card-photo.photo-softened {
  height: 280px !important;
  max-height: none !important;
  background: #d8dfd1;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.advice-card-photo > img {
  display: block;
  position: relative;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 45%;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: saturate(.72) contrast(.92) brightness(1.04);
}
/* Softened overlay must not obscure as a solid plate */
.advice-card-photo.photo-softened:after {
  z-index: 1;
  background: linear-gradient(180deg, #e4e9dd1f, #c5d2bd0f 32%, #c5d2bd0f 72%, #f5f2e54d) !important;
}

/* Pagination */
.advice-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin: 10px 0 28px;
  padding: 22px 0 8px;
  border-top: 1px solid rgba(37, 75, 67, 0.14);
  max-width: 100%;
}
.advice-pagination .pagination-status {
  font-size: 0.95rem;
  color: #50665c;
}
.advice-pagination nav[aria-label="Advice pages"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
.advice-pagination a.page-link,
.advice-pagination span.page-current,
.advice-pagination span.page-link-disabled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(37, 75, 67, 0.22);
  color: #254b43;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.2;
  background: #fff;
}
.advice-pagination a.page-link:hover,
.advice-pagination a.page-link:focus-visible {
  background: #eef3ea;
  outline: 2px solid #254b43;
  outline-offset: 2px;
}
.advice-pagination span.page-current {
  background: #254b43;
  color: #f5f2e5;
  border-color: #254b43;
  font-weight: 600;
}
.advice-pagination span.page-link-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.advice-pagination .page-numbers {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/*
  Horizontal overflow cause on /advice/: .page-hero:before uses
  inset:0 calc((100vw - 100%)/-2) which bleeds past the viewport.
  Clip only the hero (not the whole page) so content is not concealed.
*/
.inner-page.page-advice > .page-hero {
  overflow-x: clip;
  overflow-x: hidden;
  max-width: 100%;
}
.inner-page.page-advice > .page-hero:before {
  /* keep decorative bleed, but contain it inside clipped hero */
  max-width: none;
}

@media (max-width: 720px) {
  .advice-card-photo,
  .advice-card-photo.photo-softened { height: 230px !important; }
  .advice-pagination { flex-direction: column; align-items: stretch; }
  .advice-pagination nav[aria-label="Advice pages"] { justify-content: space-between; }
}