/* ==========================================================================
   DAYANA — Projects & Track Record page layout
   Four distinct blocks: UAE utility supply (split + badges), Syria (full-bleed
   parallax), hazardous-area supply (dark band + tiles), references (statement).
   ========================================================================== */

/* --------------------------------------------------------------------------
   UAE utility supply
   -------------------------------------------------------------------------- */
.uae { overflow: hidden; }
.uae__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.utility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.utility-badge {
  display: grid; place-items: center; min-block-size: 96px; padding: 1rem;
  background: var(--c-card); border: 1px solid var(--c-border); border-block-end: 3px solid var(--c-accent); border-radius: 2px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.utility-badge .figure { font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: 0.04em; color: var(--c-primary); }
.utility-badge:hover { background: var(--c-primary); border-color: var(--c-primary); }
.utility-badge:hover .figure { color: #fff; }

.uae__media { aspect-ratio: 4 / 3; border: 1px solid var(--c-border); }
.uae__note { margin-block: 1.25rem 1rem; }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

@media (max-width: 767.98px) {
  .uae__content, .uae__note { text-align: center; }
}
@media (min-width: 640px) {
  .utility-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .uae__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .utility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .utility-badge { min-block-size: 120px; }
}

/* --------------------------------------------------------------------------
   Syria — full-bleed parallax with offset panel on the inline-end side
   -------------------------------------------------------------------------- */
.syria { position: relative; isolation: isolate; padding-block: clamp(4rem, 10vw, 8rem); }
.syria__frame { position: absolute; inset: 0; z-index: -1; background: var(--c-primary); }
.syria__frame .media-frame__move { position: absolute; inset: -12% 0; block-size: auto; }
.syria__frame img { block-size: 100%; }
.syria__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(20, 27, 82, 0.92) 0%, rgba(20, 27, 82, 0.6) 55%, rgba(20, 27, 82, 0.3) 100%); }
.syria__frame:hover img { transform: none; }
.syria__panel { position: relative; max-inline-size: 600px; margin-inline: auto; padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; background: var(--c-card); border-inline-start: 4px solid var(--c-accent); border-radius: 2px; }
.syria__since { display: block; margin-block-end: 0.5rem; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; color: var(--c-accent); }
.syria__panel .lead { margin-block: 1rem 1.5rem; }
.syria__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.syria__tags .filter-chip { min-block-size: 34px; cursor: default; }
@media (min-width: 768px) {
  .syria__panel { margin-inline: auto 0; text-align: start; }
  .syria__tags { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Hazardous-area supply — dark band with image wash and product tiles
   -------------------------------------------------------------------------- */
.hazard { position: relative; isolation: isolate; overflow: hidden; background: var(--c-bg-deep); color: var(--c-on-dark-muted); }
.hazard h2 { color: #fff; }
.hazard__bg { position: absolute; inset: 0; z-index: -1; }
.hazard__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.16; filter: grayscale(1); }
.hazard__stripes { position: absolute; inset-inline-end: -10%; inset-block: 0; inline-size: 55%; background: repeating-linear-gradient(-32deg, transparent 0 22px, var(--stripe-color) 22px 23px); mask-image: linear-gradient(to right, transparent, rgba(0,0,0,1) 60%); }
.hazard__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.hazard__content { text-align: center; }
.hazard__content .lead { margin-block: 1rem 1.5rem; }
.hazard__tiles { display: grid; gap: 0.75rem; }
.spec-tile {
  display: flex; align-items: center; gap: 0.9rem; inline-size: 100%; padding: 0.9rem 1rem; color: #fff; font-weight: 500;
  background: var(--c-card-dark); border: 1px solid var(--c-border-dark); border-radius: 2px; transition: border-color 0.25s ease, background-color 0.25s ease;
}
.spec-tile .icon-tile { background: rgba(255, 255, 255, 0.1); color: #fff; }
.spec-tile__label { flex: 1; }
.spec-tile > svg { inline-size: 18px; block-size: 18px; color: var(--c-accent); transition: transform 0.3s ease; }
.spec-tile:hover { color: #fff; border-color: var(--c-accent); background: rgba(11, 142, 215, 0.14); }
.spec-tile:hover .icon-tile { background: var(--c-accent); }
.spec-tile:hover > svg { transform: translateX(4px); }
.hazard__tiles.slick-slider { display: block; }
.hazard__tiles.slick-slider .slick-slide { padding-block: 0.375rem; }
.hazard__tiles.slick-slider .spec-tile { min-block-size: 72px; }
.hazard .slider-arrow { background: transparent; color: #fff; border-color: var(--c-border-dark); }
.hazard .slick-dots button::before { background: rgba(255,255,255,0.3); }
.hazard .slick-dots .slick-active button::before { background: var(--c-accent); }
@media (min-width: 768px) {
  .hazard__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
  .hazard__content { text-align: start; }
}

/* --------------------------------------------------------------------------
   Project references — statement card
   -------------------------------------------------------------------------- */
.refs__card {
  display: grid; gap: 1.5rem; justify-items: center; text-align: center; max-inline-size: 900px; margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3rem); background: var(--c-card); border: 1px solid var(--c-border); border-block-start: 4px solid var(--c-primary); border-radius: 2px;
}
.refs__icon { inline-size: 64px; block-size: 64px; }
.refs__icon svg { inline-size: 32px; block-size: 32px; }
.refs__body .lead { margin-block: 1rem 1.25rem; }
.refs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-weight: 500; color: var(--c-heading); }
.refs__list li { display: inline-flex; align-items: center; gap: 0.4rem; }
.refs__list svg { inline-size: 16px; block-size: 16px; color: var(--c-accent); }
@media (min-width: 1024px) {
  .refs__card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; text-align: start; justify-items: start; gap: 2rem; }
  .refs__list { justify-content: flex-start; }
}