/* ==========================================================================
   AUM Circle Section

   Native Bootstrap grid (.container > .row.row-cols-*) with the theme's own
   design tokens layered over it. Nothing here overrides Bootstrap's layout
   classes -- they do the work and this handles appearance only.
   ========================================================================== */

.aum-circle-section {
  --aum-cs-h-color:        var(--aum-gray, #9b9b9b);
  --aum-cs-d-color:        var(--aum-gray, #9b9b9b);
  --aum-cs-circle-border:  var(--aum-black, #000);
  --aum-cs-circle-bw:      1px;
  --aum-cs-circle-max:     300px;
  --aum-cs-card-align:     left;
  --aum-cs-card-gap:       26px;

  width: 100%;
  font-family: var(--aum-font, Lato, sans-serif);
}

.aum-circle-section__nocontainer {
  width: 100%;
  padding-inline: var(--aum-safe-mobile-x, 24px);
}

/* --- Header --------------------------------------------------------------- */

.aum-circle-section__header {
  margin-bottom: var(--aum-cs-header-gap, 56px);
}

.aum-circle-section.is-align-left   .aum-circle-section__header { text-align: left; }
.aum-circle-section.is-align-center .aum-circle-section__header { text-align: center; }
.aum-circle-section.is-align-right  .aum-circle-section__header { text-align: right; }

.aum-circle-section__heading {
  font-size: var(--aum-cs-h-size, 64px);
  font-weight: var(--aum-cs-h-weight, 300);
  letter-spacing: var(--aum-cs-h-track, 0.18em);
  text-transform: uppercase;
  color: var(--aum-cs-h-color);
  line-height: 1.1;
  margin: 0 0 14px;
}

.aum-circle-section__heading.is-sentence-case { text-transform: none; }

.aum-circle-section__description {
  font-size: var(--aum-cs-d-size, 19px);
  letter-spacing: var(--aum-cs-d-track, 0.16em);
  text-transform: uppercase;
  color: var(--aum-cs-d-color);
  line-height: 1.5;
  margin: 0;
}

.aum-circle-section__description.is-sentence-case { text-transform: none; }

/* --- Cards ---------------------------------------------------------------- */

.aum-circle-card {
  display: flex;
  flex-direction: column;
}

.aum-circle-card__wrap {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* The circle.
   aspect-ratio 1 plus a 50% radius keeps it perfectly round at any width,
   and object-fit cover means the image never distorts. */
.aum-circle-card__circle {
  position: relative;
  width: 100%;
  max-width: var(--aum-cs-circle-max);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: var(--aum-cs-circle-bw) solid var(--aum-cs-circle-border);
  background: transparent;
  margin-inline: auto;
}

.aum-circle-card__circle-link {
  display: block;
  width: 100%;
}

.aum-circle-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position is inline, from the focal point picker. */
  transform: scale(var(--aum-cc-scale, 1));
  transition: transform .6s ease, opacity .4s ease;
}

/* Hover treatments */
.aum-circle-card.has-hover-zoom:hover .aum-circle-card__image {
  transform: scale(calc(var(--aum-cc-scale, 1) * 1.06));
}

.aum-circle-card.has-hover-fade:hover .aum-circle-card__image {
  opacity: .78;
}

.aum-circle-card.has-hover-lift {
  transition: transform .35s ease;
}

.aum-circle-card.has-hover-lift:hover {
  transform: translateY(-6px);
}

/* --- Card copy ------------------------------------------------------------ */

.aum-circle-card__content {
  margin-top: var(--aum-cs-card-gap, 26px);
  text-align: var(--aum-cs-card-align, left);
  max-width: var(--aum-cs-circle-max);
  margin-inline: auto;
  width: 100%;
}

.aum-circle-card__title {
  font-size: calc(var(--aum-cs-card-size, 15px) * 1.35);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aum-gray, #9b9b9b);
  line-height: 1.35;
  margin: 0 0 10px;
}

.aum-circle-card__body {
  font-size: var(--aum-cs-card-size, 15px);
  line-height: var(--aum-cs-card-leading, 1.6);
  color: var(--aum-text, #2b2b2b);
  margin: 0;
}

.aum-circle-card__button {
  display: inline-block;
  margin-top: 16px;
  font-size: var(--aum-fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.aum-circle-card__button.is-text {
  color: var(--aum-gray, #9b9b9b);
  border-bottom: 1px solid currentColor;
  padding-bottom: 7px;
}

.aum-circle-card__button.is-text:hover { color: var(--aum-black, #000); }

.aum-circle-card__button.is-outline {
  color: var(--aum-gray, #9b9b9b);
  border: 1px solid var(--aum-border, #e8e8e8);
  padding: 14px 24px;
}

.aum-circle-card__button.is-outline:hover {
  background: var(--aum-black, #000);
  border-color: var(--aum-black, #000);
  color: var(--aum-white, #fff);
}

.aum-circle-card__button.is-solid {
  background: var(--aum-black, #000);
  color: var(--aum-white, #fff);
  border: 1px solid var(--aum-black, #000);
  padding: 14px 24px;
}

.aum-circle-card__button.is-solid:hover {
  background: var(--aum-accent-deep, #7b6a58);
  border-color: var(--aum-accent-deep, #7b6a58);
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 575.98px) {
  .aum-circle-section__heading {
    font-size: var(--aum-cs-h-size-m, 34px);
    letter-spacing: calc(var(--aum-cs-h-track, 0.18em) * .7);
  }

  .aum-circle-section__description {
    font-size: calc(var(--aum-cs-d-size, 19px) * .85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aum-circle-card__image,
  .aum-circle-card.has-hover-lift { transition: none; }

  .aum-circle-card:hover .aum-circle-card__image { transform: scale(var(--aum-cc-scale, 1)); }
  .aum-circle-card.has-hover-lift:hover { transform: none; }
}