/* ==========================================================================
   CMS additions layered on top of style.css.
   Images managed in the admin are passed in as a --img custom property, so
   each element keeps the overlay gradient the original theme gave it.
   ========================================================================== */

.thumb-architecture.has-img {
  background:
    linear-gradient(180deg, rgba(10,9,20,0.05) 40%, rgba(10,9,20,0.92) 100%),
    var(--img, url('../../img/home/chiaroscuro-walker.jpg')) center/cover no-repeat;
}
.atelier-visual.has-img {
  background:
    linear-gradient(180deg, rgba(10,9,20,0.05) 35%, rgba(10,9,20,0.88) 100%),
    var(--img, url('../../img/about/desk-strategy.jpg')) center/cover no-repeat;
}
.discipline-img.has-img { background: var(--img) center/cover no-repeat; }
.discipline-img.svc-thumb-process.has-img {
  background:
    linear-gradient(180deg, rgba(10,9,20,0.05) 35%, rgba(10,9,20,0.55) 100%),
    var(--img, url('../../img/services/process-identity.jpg')) center/cover no-repeat;
}
.gallery-tile.has-img { background: var(--img) center/cover no-repeat; }

/* Inline styles from the original markup, as classes. */
.btn-ghost-light { background-color: transparent; color: #fff; }
.btn-whatsapp-solid { background-color: #25d366; color: #fff; }
.mini-dot-lavender { background-color: #c4c1f8; }
.client-logo-more { background-color: #0d0e25; border-radius: 10px; }

/* ---------- Hero slider (only active when more than one banner) ---------- */
.hero-slides { display: grid; }
.hero-slides > .hero-slide { grid-area: 1 / 1; width: 100%; }
.hero-slides.is-slider > .hero-slide {
  transition: opacity .8s ease, visibility .8s ease;
}
.hero-slides.is-slider > .hero-slide:not(.is-active) { opacity: 0; visibility: hidden; }
.hero-dots { display: flex; gap: 10px; margin-top: 36px; position: relative; z-index: 1; }
.hero-dot {
  width: 28px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.22);
  transition: background .3s ease, width .3s ease;
}
.hero-dot.is-active { background: var(--purple-bright); width: 44px; }

/* ---------- Contact form feedback ---------- */
.form-alert {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
}
.form-alert[hidden] { display: none; }
.form-alert-success { background: rgba(37, 211, 102, 0.12); border: 1px solid rgba(37, 211, 102, 0.35); color: #b8f5cf; }
.form-alert-error { background: rgba(255, 99, 99, 0.1); border: 1px solid rgba(255, 99, 99, 0.35); color: #ffc4c4; }
.field-input.is-invalid { border-color: rgba(255, 99, 99, 0.6); }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inquiry-submit[disabled] { opacity: .75; cursor: progress; }
.desk-row a { color: inherit; }

/* ---------- Generic text block (custom pages) ---------- */
.text-block .text-block-body { max-width: 820px; margin-top: 24px; color: var(--text-dim); font-size: 17px; line-height: 1.75; }
.text-block .text-block-body p + p { margin-top: 16px; }
.text-block .text-block-image { margin-top: 40px; }