/* Dravik — The Dravik Standard (three standards)
   Part of the Dravik design system. Loaded only on pages whose content
   contains the section (see Dravik_Standards in
   inc/class-dravik-standards.php).

   Three open columns, one per standard: Service, Transparency, Consistency.
   No cards, boxes or pedestals (v2.10.0): each column is a small number, one
   section of the real Dravik mark floating in a soft halo, a title, a
   one-line statement and a short supporting sentence, with a hairline between
   columns.
     - The three mark sections are cut from the site's logo file (Media
       Library ID 44, dravik-logo-mark-transparent.png) along its own
       transparent gaps: assets/img/dravik-mark-service.webp (upper section),
       dravik-mark-transparency.webp (middle), dravik-mark-consistency.webp
       (lower). Pixels are unchanged; nothing is redrawn. All three are shown
       at the same width, so they keep the proportions they have in the mark.
   The artwork is decorative (CSS backgrounds inside an aria-hidden element);
   all wording is live text in the page content.

   Markup (page content, WordPress blocks):
     section.dravik-standards            (.dravik-standards--inline inside a content page)
       .dravik-standards-head   p.dravik-standards-eyebrow, h2, p.dravik-standards-intro
       .dravik-standards-grid
         .dravik-standard.dravik-standard--service | --transparency | --consistency
           p.dravik-standard-num
           .dravik-standard-art > .dravik-standard-mark
           .dravik-standard-copy  h3, p.dravik-standard-lead, p.dravik-standard-text
*/

/* Astra pads every top-level group (.entry-content > .wp-block-group); the
   section sets its own padding, hence the second, matching selector. */
.dravik-standards,
.entry-content > .dravik-standards {
  position: relative;
  margin-top: 0 !important; /* sections sit flush; the block gap is not used between them */
  margin-bottom: 0 !important;
  padding: clamp(4.25rem, 8vw, 7rem) clamp(1.25rem, 3.4vw, 3.5rem) clamp(4.5rem, 8.5vw, 7.5rem);
  background:
    radial-gradient(60% 22rem at 50% 0%, rgba(199, 204, 214, 0.055), transparent 72%),
    linear-gradient(180deg, #0B0E13 0%, #0D1117 46%, #12161D 100%);
}

/* WordPress gives every block after the first in a group a top margin (the
   "block gap"). Inside this section the spacing is set here instead, so that
   margin is removed from the children of each group. Elements set their own
   margins in the rules below. */
.dravik-standards .dravik-standards-head > *,
.dravik-standards .dravik-standards-grid > *,
.dravik-standards .dravik-standard > *,
.dravik-standards .dravik-standard-copy > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Inside a content page: the page's own background and width; no band of its
   own, and a top margin like the page's other sections. */
.dravik-standards.dravik-standards--inline,
.entry-content > .dravik-standards.dravik-standards--inline {
  margin-top: var(--dravik-space-16) !important;
  padding: 0;
  background: none;
}


/* ---- Heading area ------------------------------------------------------ */

.dravik-standards .dravik-standards-head {
  max-width: 54rem;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.dravik-standards .dravik-standards-eyebrow {
  margin: 0;
  padding-left: 0.34em; /* centres tracked capitals on their letters */
  color: #9AA3B2;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  line-height: 1.4;
  text-transform: uppercase;
}

.dravik-standards .dravik-standards-head h2 {
  margin: 0.9rem 0 0;
  color: #F5F7FA;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}

/* The large heading size belongs to the homepage band. Inside a content page
   (inline variant) the heading keeps the size of that page's other section
   headings. */
.dravik-standards:not(.dravik-standards--inline) .dravik-standards-head h2 {
  font-size: clamp(2rem, 4.3vw, 3.3rem);
}

.dravik-standards .dravik-standards-intro {
  max-width: 43rem;
  margin: 1.15rem auto 0;
  color: #AEB9C6;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  text-wrap: balance;
}


/* ---- The three columns --------------------------------------------------- */

.dravik-standards .dravik-standards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 78rem;
  margin: clamp(3rem, 5.2vw, 4.75rem) auto 0 !important;
}

.dravik-standard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0 !important;
  padding: 0.35rem clamp(1rem, 2.3vw, 2rem) 0.6rem;
  text-align: center;
}

/* A hairline between columns, fading out towards both ends. */
.dravik-standard + .dravik-standard::before {
  content: "";
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(199, 204, 214, 0) 0%, rgba(199, 204, 214, 0.15) 24%, rgba(199, 204, 214, 0.15) 76%, rgba(199, 204, 214, 0) 100%);
  pointer-events: none;
}

.dravik-standards .dravik-standard-num {
  margin: 0;
  padding-left: 0.32em; /* centres the tracked digits */
  color: #8E99AA;
  font-size: max(0.8125rem, 12px);
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 1;
}

/* The fragment's stage: one height for all three, so the titles line up
   although the three sections of the mark differ in height. */
.dravik-standards .dravik-standard-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(9.25rem, 13.5vw, 12.75rem);
  margin-top: clamp(1.1rem, 1.8vw, 1.75rem);
}

/* Halo: a soft, cool-white light behind the fragment. */
.dravik-standard-art::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(15.5rem, 23vw, 22rem);
  max-width: 118%;
  aspect-ratio: 1 / 0.86;
  transform: translate(-50%, -50%);
  /* eased towards the rim, so the light dissolves into the dark without a readable edge */
  background: radial-gradient(closest-side, rgba(228, 236, 247, 0.2) 0%, rgba(214, 224, 239, 0.145) 20%, rgba(200, 211, 229, 0.095) 40%, rgba(186, 198, 219, 0.055) 58%, rgba(172, 186, 208, 0.026) 74%, rgba(160, 175, 200, 0.008) 88%, rgba(150, 166, 192, 0) 100%);
  opacity: 0.9;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.dravik-standard-mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(7.25rem, 10.4vw, 10rem);
  background: center / contain no-repeat;
  /* a close, light glow on the silver edges and a soft shadow under the piece */
  filter: drop-shadow(0 0 14px rgba(228, 236, 247, 0.22)) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5));
  transition: transform 300ms ease;
}

.dravik-standard--service .dravik-standard-mark {
  aspect-ratio: 526 / 452;
  background-image: url("../img/dravik-mark-service.webp");
}

.dravik-standard--transparency .dravik-standard-mark {
  aspect-ratio: 530 / 252;
  background-image: url("../img/dravik-mark-transparency.webp");
}

.dravik-standard--consistency .dravik-standard-mark {
  aspect-ratio: 509 / 411;
  background-image: url("../img/dravik-mark-consistency.webp");
}

.dravik-standards .dravik-standard-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 23rem;
  min-width: 0;
  margin-top: clamp(1.1rem, 1.8vw, 1.75rem);
}

.dravik-standards .dravik-standard h3 {
  margin: 0;
  color: #F5F7FA;
  font-size: clamp(1.5rem, 1.95vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.dravik-standards .dravik-standard-lead {
  margin: 0.75rem 0 0;
  color: #C3CCD9;
  font-size: clamp(0.94rem, 1.1vw, 1rem); /* each statement stays on one line in a desktop column */
  font-weight: 600;
  line-height: 1.45;
  text-wrap: balance;
}

.dravik-standards .dravik-standard-text {
  margin: 0.85rem 0 0;
  color: #9DA8B8;
  font-size: 0.95rem;
  line-height: 1.65;
  text-wrap: pretty;
}


/* ---- Hover (pointer devices): the fragment lifts a little ---------------- */

@media (hover: hover) and (pointer: fine) {
  .dravik-standard:hover .dravik-standard-mark {
    transform: translateY(-4px);
  }

  .dravik-standard:hover .dravik-standard-art::before {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dravik-standard-mark,
  .dravik-standard-art::before {
    transition: none;
  }

  .dravik-standard:hover .dravik-standard-mark {
    transform: none;
  }
}


/* ---- Inside a content page (About): the row is narrower ------------------ */

.dravik-standards--inline .dravik-standard {
  padding-left: clamp(0.9rem, 2.2vw, 2rem);
  padding-right: clamp(0.9rem, 2.2vw, 2rem);
}

.dravik-standards.dravik-standards--inline .dravik-standard h3 {
  font-size: clamp(1.35rem, 1.7vw, 1.6rem);
}

.dravik-standards.dravik-standards--inline .dravik-standard-lead {
  font-size: 0.97rem;
}

.dravik-standards.dravik-standards--inline .dravik-standard-text {
  font-size: 0.9rem;
}


/* ---- Narrower three-column windows (768-1199px) --------------------------
   The statements no longer all fit on one line here, so each is set on two
   balanced lines (the width limit makes the shortest one wrap as well) and
   the supporting sentences of the three columns start level. */

@media (min-width: 768px) and (max-width: 1199px) {
  .dravik-standards .dravik-standard-lead {
    max-width: 15em;
    min-height: 2.9em; /* two lines at line-height 1.45 */
  }
}


/* ---- Tablets and small desktop windows (768-1023px): tighter columns ----- */

@media (min-width: 768px) and (max-width: 1023px) {
  .dravik-standard,
  .dravik-standards--inline .dravik-standard {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .dravik-standards .dravik-standard h3,
  .dravik-standards.dravik-standards--inline .dravik-standard h3 {
    font-size: 1.4rem;
  }

  .dravik-standards .dravik-standard-lead,
  .dravik-standards.dravik-standards--inline .dravik-standard-lead {
    font-size: 0.98rem;
  }

  .dravik-standards .dravik-standard-text,
  .dravik-standards.dravik-standards--inline .dravik-standard-text {
    font-size: 0.9rem;
  }
}


/* Below 922px the root font size is 91.2%, so the supporting sentence gets
   the phone size here instead of shrinking further. */
@media (min-width: 768px) and (max-width: 921px) {
  .dravik-standards .dravik-standard-text,
  .dravik-standards.dravik-standards--inline .dravik-standard-text {
    font-size: 0.97rem;
  }
}


/* ---- Phones and narrow tablets (below 768px): one standard per row -------- */

@media (max-width: 767px) {
  .dravik-standards .dravik-standards-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(5.25rem, 21vw, 6.5rem); /* clearly more than the spacing inside one standard */
    max-width: 27rem;
  }

  .dravik-standard,
  .dravik-standards--inline .dravik-standard {
    padding: 0;
  }

  .dravik-standard + .dravik-standard::before {
    content: none;
  }

  .dravik-standards .dravik-standard-art {
    height: 9.75rem;
    margin-top: 1.15rem;
  }

  .dravik-standard-art::before {
    width: 16.5rem;
    max-width: 100%;
  }

  .dravik-standard-mark {
    width: 8rem;
  }

  .dravik-standards .dravik-standard-copy {
    margin-top: 1.15rem;
  }

  .dravik-standards .dravik-standard h3,
  .dravik-standards.dravik-standards--inline .dravik-standard h3 {
    font-size: 1.6rem;
  }

  .dravik-standards .dravik-standard-lead,
  .dravik-standards.dravik-standards--inline .dravik-standard-lead {
    font-size: 1.04rem;
  }

  .dravik-standards .dravik-standard-text,
  .dravik-standards.dravik-standards--inline .dravik-standard-text {
    font-size: 0.97rem;
  }
}