/**
 * Module: about-section (hero + floating panel)
 *
 * Updated:
 *  - Box is positioned via top/bottom/left/right percentages.
 *  - Inner margins are controlled via percentage-like tokens.
 *  - Font size uses clamp() to shrink on smaller screens.
 */

/* HERO WRAPPER -------------------------------------------------------- */

.atx-about-hero {
  position: relative;
  overflow: hidden;
  background: transparent;
  color: #fff;
  padding: 0;
  margin: 0;
  min-height: var(--about-hero-height, min(40vh, 380px));
  box-shadow: none !important;
}

/* SLIDER -------------------------------------------------------------- */

.atx-about-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.atx-about-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--about-hero-fade, 800ms) ease-in-out;
}

.atx-about-hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}

/* UPDATED: support <picture> wrapper */
.atx-about-hero-slide picture,
.atx-about-hero-slide img {
  width: 100%;
  height: 100%;
  display: block;
}

.atx-about-hero-slide img {
  object-fit: cover;
}

.atx-about-hero-fallback {
  position: absolute;
  inset: 0;
  background: #111;
}

/* FLOATING PANEL ------------------------------------------------------ */

.atx-about-hero-panel {
  position: absolute;
  z-index: 2;

  /**
   * Geometry:
   *  - top/bottom = x% / y% of hero height
   *  - left/right = z% / q% of hero width
   *
   * These are expressed as CSS custom properties so we can
   * adjust them from PHP or a global stylesheet if needed.
   */
  top: var(--about-hero-panel-top, 3%);
  bottom: var(--about-hero-panel-bottom, 8%);
  left: var(--about-hero-panel-left, 3%);
  right: var(--about-hero-panel-right, 40%);

  /**
   * Inner margins (p%, t%):
   * Note: CSS percentage padding is based on width, but this
   * gives a good practical approximation of "box-relative"
   * margins without extra JS.
   */
  padding-block: var(--about-hero-panel-padding-block, 2%);
  padding-inline: var(--about-hero-panel-padding-inline, 2%);

  background: var(--about-hero-panel-bg, rgba(0,0,0,0.75));
  border-radius: 10px;
  color: #ffffff;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* HEADING + TEXT ------------------------------------------------------ */

.atx-about-hero-heading {
  margin: 0 0 0.4rem 0;
  text-align: left;
  color: #fff;
  text-transform: uppercase;      /* ensure heading is uppercase */
  font-weight: 700;               /* stronger weight inside box */

  font-size: clamp(
    0.9rem,
    2.2vw,
    var(--about-hero-panel-heading-fs, 1.6rem)
  );
}

.atx-about-hero-body {
  text-align: left;
  line-height: 1.5;
  color: #fff;

  font-size: clamp(
    0.7rem,
    1.4vw,
    var(--about-hero-panel-body-fs, 1.2rem)
  );
}

/* Links inside panel */
.atx-about-hero-body a {
  color: #fff;
  text-decoration: underline;
}
.atx-about-hero-body a:hover {
  text-decoration: none;
}