/*
 * MAT designed pages.
 * Loaded only on articles using the "mat-page" layout.
 *
 * Mirrors the original classes in user.css. Each page sets a theme in its
 * content file ('theme' => 'biogas'), which supplies these colours:
 *
 *   --mat-from / --mat-to   gradient for the top band and gradient card  (.biogasBackground, .biogas-card)
 *   --mat-accent            titles, list background, primary button       (.biogasColour, .biogasList, .biogasButton)
 *   --mat-accent-hover      primary button hover
 *   --mat-link              links inside titles/text                       (.biogasColour a)
 *   --mat-alt               secondary colour: small-card border, its title, alt button (.biogasAltColour, .biogasAltButton)
 *   --mat-alt-hover         alt button hover
 */

/* ---------- Themes ---------- */

.mat-page {
  /* Default: MAT aqua */
  --mat-btn: #187ca8;
  --mat-btn-hover: #174f4b;
  --mat-card-border: #2daae1;
  --mat-from: #2daae1;
  --mat-to: #1c739b;
  --mat-accent: #187ca8;
  --mat-accent-hover: #0096ed;
  --mat-link: #187ca8;
  --mat-alt: #187ca8;
  --mat-alt-hover: #174f4b;
}

.mat-page.theme-biogas,
.mat-page .theme-biogas {
  --mat-btn: #1a6b64;
  --mat-btn-hover: #45b0a8;
  --mat-card-border: #b0454d;
  --mat-from: #1a6b64;
  --mat-to: #45b0a8;
  --mat-accent: #1a6b64;
  --mat-accent-hover: #45b0a8;
  --mat-link: #45b0a8;
  --mat-alt: #b0454d;
  --mat-alt-hover: #8f363c;
}

.mat-page.theme-urimat,
.mat-page .theme-urimat {
  --mat-btn: #e30614;
  --mat-btn-hover: #b6000c;
  --mat-card-border: #0076ba;
  --mat-from: #045280;
  --mat-to: #0096ed;
  --mat-accent: #0076ba;
  --mat-accent-hover: #045280;
  --mat-link: #0076ba;
  --mat-alt: #e30614;
  --mat-alt-hover: #b6000c;
}

.mat-page.theme-sensor,
.mat-page .theme-sensor {
  --mat-btn: #187ca8;
  --mat-btn-hover: #174f4b;
  --mat-card-border: #2daae1;
  --mat-from: #2daae1;
  --mat-to: #0096ed;
  --mat-accent: #187ca8;
  --mat-accent-hover: #0096ed;
  --mat-link: #187ca8;
  --mat-alt: #e30614;
  --mat-alt-hover: #a70610;
}

/* user.css forces h1-h6 and paragraph links to #2daae1 !important,
   so themed colours inside these pages need !important to win. */

/* ---------- Top band (.biogasBackground) ---------- */

.mat-page .mat-hero {
  background: linear-gradient(45deg, var(--mat-from) 0%, var(--mat-to) 100%);
  color: #fff;
  border-radius: 0;
}

.mat-page .mat-hero__title {
  color: #fff !important;
}

.mat-page .mat-hero__logo {
  max-height: 90px;
  max-width: 80%;
}

/* ---------- Large white card (.largeCardBackground) ---------- */

.mat-page .mat-split {
  background: linear-gradient(135deg, #ffffff 40%, #e2e2e2 100%);
  border: 1px solid #dfdfdf;
}

.mat-page .mat-title {
  color: var(--mat-accent) !important;
}

.mat-page .mat-split p a,
.mat-page .mat-title a {
  color: var(--mat-link) !important;
}

/* Coloured list (.biogasList) */
.mat-page .list-group-item.mat-list-item {
  background: var(--mat-accent);
  color: #fff;
}

.mat-page .mat-list-item a {
  color: #fff !important;
  font-weight: bold;
  text-decoration: none;
}

/* ---------- Buttons (.biogasButton / .biogasAltButton) ---------- */

.mat-page .mat-btn {
  background: var(--mat-btn);
  color: #fff;
}

.mat-page .mat-btn:hover,
.mat-page .mat-btn:focus {
  background: var(--mat-btn-hover);
  color: #fff;
}

.mat-page .mat-alt-btn {
  background: var(--mat-alt);
  color: #fff;
  border: 1px solid #686868;
}

.mat-page .mat-alt-btn:hover,
.mat-page .mat-alt-btn:focus {
  background: var(--mat-alt-hover);
  color: #fff;
  border: 1px solid #fff;
}

/* ---------- Photos (.productCardImages) ---------- */

.mat-page .mat-photo {
  border: 6px solid #fff;
}

/* ---------- Small card (.biogasSmallCardBackground) ---------- */

.mat-page .mat-small-card {
  background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
  border-top: 20px solid var(--mat-card-border) !important;
}

.mat-page .mat-alt-title {
  color: var(--mat-alt) !important;
}

.mat-page .mat-lead-body p {
  font-size: 1.25rem;
  font-weight: 300;
}

/* ---------- Gradient card (.biogas-card) ---------- */

.mat-page .mat-gradient-card {
  background: linear-gradient(45deg, var(--mat-from) 0%, var(--mat-to) 100%);
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 0;
  max-width: 800px;
  color: #fff;
}

.mat-page .mat-gradient-card .card-title,
.mat-page .mat-gradient-card a:not(.btn) {
  color: #fff !important;
}

.mat-page .mat-gradient-card .card-text p {
  color: #fff;
}

.mat-page .mat-gradient-card .small,
.mat-page .mat-gradient-card .subFont {
  font-size: .9em;
}

/* ---------- Steps arrow ---------- */

.mat-page .mat-arrow {
  fill: #2daae1;
}

/* ---------- Divider (hr.urimatrounded) ---------- */

.mat-page .mat-divider {
  border: 0;
  border-top: 8px solid var(--mat-accent);
  border-radius: 5px;
  width: 90%;
  opacity: 1;
}

/* ---------- Carousel section ---------- */

.mat-page .mat-carousel .carousel {
  max-width: 900px;
}

.mat-page .mat-carousel .carousel-item img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Home page: product cards and light intro band ---------- */

.mat-page .mat-product-card {
  max-width: none;
}

.mat-page .mat-highlight {
  color: #187ca8 !important; /* .sensorColour */
}

/* =====================================================================
 * v2 design sections (banner, stats, story, process, benefits, photos,
 * panel, closing). Colour is used as an accent on mostly white pages.
 * ===================================================================== */

.mat-page {
  --mx-soft: color-mix(in srgb, var(--mat-accent) 9%, #fff);
  --mx-ink: #22303c;
  --mx-muted: #5b6b78;
  --mx-radius: 16px;
  --mx-gap: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--mx-ink);
}

/* Shared type */
.mat-page .mx-eyebrow {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mat-accent);
}

.mat-page .mx-eyebrow--light {
  color: rgba(255, 255, 255, .85);
}

.mat-page .mx-heading {
  position: relative;
  margin: 0 0 1rem;
  padding-bottom: .75rem;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--mx-ink) !important;
}

.mat-page .mx-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--mat-accent);
}

.mat-page .mx-heading--center::after {
  left: 50%;
  transform: translateX(-50%);
}

.mat-page .mx-heading--small {
  font-size: 1.5rem;
}

.mat-page .mx-lead {
  font-size: 1.2rem;
  color: var(--mx-muted);
  max-width: 44rem;
}

.mat-page .mx-body p {
  line-height: 1.7;
}

.mat-page .mx-body a,
.mat-page .mx-body p a {
  color: var(--mat-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.mat-page .mx-intro {
  max-width: 46rem;
  margin: 0 auto 2.5rem;
}

/* Sections */
.mat-page .mx-section {
  padding: var(--mx-gap) 0;
}

.mat-page .mx-section--shaded {
  background: #f5f7f9;
  border-radius: var(--mx-radius);
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* Framed photos: one crop shape for every photo, so mixed sources look consistent */
.mat-page .mx-frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 30px -12px rgba(16, 24, 32, .35);
}

.mat-page .mx-collage--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.mat-page .mx-collage--2 .mx-frame {
  aspect-ratio: 3 / 4;
}

.mat-page .mx-caption {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--mx-muted);
}

/* Buttons */
.mat-page .mx-btn {
  background: var(--mat-btn);
  border: 0;
  color: #fff;
  font-weight: 600;
  padding: .6rem 1.25rem;
  border-radius: 999px;
}

.mat-page .mx-btn:hover,
.mat-page .mx-btn:focus {
  background: var(--mat-btn-hover);
  color: #fff;
}

.mat-page .mx-btn-light {
  background: #fff;
  border: 2px solid #fff;
  color: var(--mat-accent);
  font-weight: 700;
  border-radius: 999px;
}

.mat-page .mx-btn-light:hover,
.mat-page .mx-btn-light:focus {
  background: rgba(255, 255, 255, .88);
  color: var(--mat-accent);
}

.mat-page .mx-btn-outline-light {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .85);
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
}

.mat-page .mx-btn-outline-light:hover,
.mat-page .mx-btn-outline-light:focus {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

/* Banner */
.mat-page .mx-banner {
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--mx-radius);
  background: linear-gradient(120deg, var(--mat-from) 0%, var(--mat-to) 100%);
  color: #fff;
  overflow: hidden;
}

.mat-page .mx-banner__title {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
  color: #fff !important;
}

.mat-page .mx-banner__lead {
  margin: 1rem 0 0;
  font-size: 1.2rem;
  opacity: .95;
  max-width: 34rem;
}

.mat-page .mx-frame--hero {
  border: 6px solid rgba(255, 255, 255, .9);
  transform: rotate(1.5deg);
}

/* Stats */
.mat-page .mx-stats {
  margin-top: -1.5rem;
  position: relative;
  background: #fff;
  border-radius: var(--mx-radius);
  box-shadow: 0 14px 40px -18px rgba(16, 24, 32, .35);
  padding: .5rem;
}

.mat-page .mx-stat {
  padding: 1.25rem 1rem;
  text-align: center;
}

.mat-page .mx-stat + .mx-stat {
  border-left: 1px solid #edf0f2;
}

.mat-page .mx-stat__value {
  margin: 0;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--mat-accent);
}

.mat-page .mx-stat__unit {
  font-size: .5em;
  font-weight: 700;
}

.mat-page .mx-stat__label {
  margin: .4rem 0 0;
  font-size: .9rem;
  color: var(--mx-muted);
}

/* Process */
.mat-page .mx-step {
  height: 100%;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px -12px rgba(16, 24, 32, .3);
}

.mat-page .mx-step__marker {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.mat-page .mx-step__num {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--mat-accent);
  color: #fff;
  font-weight: 800;
}

.mat-page .mx-step__icon {
  font-size: 1.4rem;
  color: var(--mat-accent);
  opacity: .8;
}

.mat-page .mx-step__title {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mx-ink) !important;
}

.mat-page .mx-step__body {
  margin: 0;
  color: var(--mx-muted);
  font-size: .95rem;
  line-height: 1.6;
}

/* Benefits */
.mat-page .mx-benefit {
  height: 100%;
  padding: 1.25rem;
  border-radius: 12px;
  transition: background .2s ease;
}

.mat-page .mx-benefit:hover {
  background: var(--mx-soft);
}

.mat-page .mx-benefit__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: .9rem;
  border-radius: 12px;
  background: var(--mx-soft);
  color: var(--mat-accent);
  font-size: 1.3rem;
}

.mat-page .mx-benefit__title {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mx-ink) !important;
}

.mat-page .mx-benefit__body,
.mat-page .mx-benefit__body p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--mx-muted);
}

.mat-page .mx-benefit__body a {
  color: var(--mat-accent) !important;
}

/* Photos + lightbox */
.mat-page .mx-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}

.mat-page .mx-photos__item {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
}

.mat-page .mx-photos__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .3s ease;
}

.mat-page .mx-photos__item:hover img,
.mat-page .mx-photos__item:focus-visible img {
  transform: scale(1.04);
}

.mat-page .mx-lightbox {
  max-width: min(92vw, 1100px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #111;
}

.mat-page .mx-lightbox::backdrop {
  background: rgba(10, 14, 18, .85);
}

.mat-page .mx-lightbox img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  margin: 0 auto;
}

.mat-page .mx-lightbox__caption:empty {
  display: none;
}

.mat-page .mx-lightbox__caption {
  margin: 0;
  padding: .6rem 1rem;
  color: #eee;
  font-size: .9rem;
}

.mat-page .mx-lightbox__close {
  position: absolute;
  top: .4rem;
  right: .6rem;
  border: 0;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
}

/* Panel */
.mat-page .mx-panel {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--mx-radius);
  background: var(--mx-soft);
  border-left: 6px solid var(--mat-accent);
}

.mat-page .mx-panel__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #fff;
  color: var(--mat-accent);
  font-size: 1.5rem;
}

.mat-page .mx-note {
  font-size: .85rem;
  color: var(--mx-muted);
}

@media (max-width: 575.98px) {
  .mat-page .mx-panel {
    flex-direction: column;
  }

  .mat-page .mx-stat:nth-child(odd) {
    border-left: 0;
  }
}

/* Closing call to action */
.mat-page .mx-closing {
  margin: var(--mx-gap) 0 1rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--mx-radius);
  background: linear-gradient(120deg, var(--mat-from) 0%, var(--mat-to) 100%);
  color: #fff;
}

.mat-page .mx-closing__title {
  margin: 0 0 .5rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #fff !important;
}

.mat-page .mx-closing__body p {
  margin: 0;
  opacity: .95;
}

/* Citations: superscript numbers + small source list */
.mat-page .mx-ref {
  font-size: .7em;
  line-height: 0;
  margin-left: 1px;
}

.mat-page .mx-ref a,
.mat-page .mx-body .mx-ref a {
  color: var(--mat-accent) !important;
  text-decoration: none !important;
  font-weight: 700;
}

.mat-page .mx-sources {
  margin: 1.25rem 0 0;
  padding: .75rem 0 0 1.1rem;
  border-top: 1px solid #e3e7ea;
  font-size: .8rem;
  font-style: italic;
  color: var(--mx-muted);
}

.mat-page .mx-sources li {
  margin-bottom: .2rem;
  scroll-margin-top: 6rem;
}

.mat-page .mx-sources a {
  color: var(--mx-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.mat-page .mx-sources li:target {
  color: var(--mat-accent);
}

/* Story: show screenshots whole (no 4:3 crop) */
.mat-page .mx-collage--contain .mx-frame {
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
  border: 1px solid #e3e7ea;
}

/* Banner: partner logo, and product renders shown whole */
.mat-page .mx-banner__logo {
  display: block;
  max-width: 70%;
  height: auto;
  margin: 0 0 1.25rem;
}

.mat-page .mx-frame--contain {
  object-fit: contain;
  background: #fff;
}

/* Story: video */
.mat-page .mx-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 12px 30px -12px rgba(16, 24, 32, .35);
}

/* Products: home page product tiles, each a full block of its product colour.
   Biogas and URIMAT take white text; Sensor keeps the bright logo aqua with dark text,
   so it stays distinct from URIMAT's deep blue. All pairs pass WCAG AA. */
.mat-page .mx-tile {
  --tile-from: #2daae1;
  --tile-to: #49bced;
  --tile-ink: #22303c;
  --tile-btn-bg: #22303c;
  --tile-btn-ink: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--tile-from) 0%, var(--tile-to) 100%);
  color: var(--tile-ink);
  text-decoration: none !important;
  box-shadow: 0 12px 30px -16px rgba(16, 24, 32, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}

.mat-page .mx-tile.theme-biogas {
  --tile-from: #1a6b64;
  --tile-to: #1f7a72;
  --tile-ink: #ffffff;
  --tile-btn-bg: #ffffff;
  --tile-btn-ink: #1a6b64;
}

.mat-page .mx-tile.theme-urimat {
  --tile-from: #045280;
  --tile-to: #0076ba;
  --tile-ink: #ffffff;
  --tile-btn-bg: #ffffff;
  --tile-btn-ink: #045280;
}

.mat-page .mx-tile:hover,
.mat-page .mx-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -16px rgba(16, 24, 32, .55);
}

.mat-page .mx-tile__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, .9);
  border-radius: 12px;
}

.mat-page .mx-tile__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  padding: 1.25rem .5rem .5rem;
}

.mat-page .mx-tile__name {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tile-ink);
  opacity: .9;
}

.mat-page .mx-tile__logo {
  display: block;
  width: 140px;
  max-width: 60%;
  height: auto;
  margin: .1rem 0 .15rem;
}

.mat-page .mx-tile__title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--tile-ink);
}

.mat-page .mx-tile__body {
  flex: 1;
  line-height: 1.6;
  color: var(--tile-ink);
}

.mat-page .mx-tile__link {
  align-self: flex-start;
  margin-top: .75rem;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: var(--tile-btn-bg);
  color: var(--tile-btn-ink);
  font-weight: 700;
}