/**
 * Home: company introduction.
 *
 * Values from Elementor #246: band #5D1520, 1560 content, 50/56 padding (20 all
 * round on small screens), copy 25/400 (18 small), figures 80/300 (50/50 small)
 * with 16/400 labels, 40px between figures and 8px between a number and its
 * label.
 */

.deka-home-about__band {
  background: var(--deka-oxblood-700, #5d1520);
  color: var(--deka-white);
}

.deka-home-about__inner {
  width: min(100% - 2.5rem, var(--deka-container-wide));
  margin-inline: auto;
  /* The generous bottom padding is load-bearing, not decoration: the gallery
     below is pulled up into it. At the plain 50px the row covered the figures.
     Live site leaves 270px here, of which the gallery reclaims 225. */
  padding: 3.125rem 3.5rem 16.875rem; /* 50 / 56 / 270 */
}

/* --- Title ----------------------------------------------------------------- */

.deka-home-about__title {
  display: flex;
  align-items: center;
  gap: var(--deka-space-2xs);
  margin: 0 0 var(--deka-space-lg);
  font-family: var(--deka-font-display);
  font-size: clamp(1.375rem, 1rem + 1.1vw, 1.875rem); /* 22 → 30 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.2;
  color: var(--deka-white);
}

/* The mark is drawn in the page's sand, not white — it reads as a monogram
   beside the words rather than a second piece of text. */
.deka-home-about__mark {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--deka-sand-100, #eae5e1);
}

/* --- Copy ------------------------------------------------------------------ */

.deka-home-about__body {
  max-width: 96rem;
  margin-bottom: var(--deka-space-2xl);
}

.deka-home-about__body p {
  margin: 0 0 var(--deka-space-md);
  font-family: var(--deka-font-display);
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.5625rem); /* 18 → 25 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.5;
  color: var(--deka-white);
}

.deka-home-about__body p:last-child { margin-bottom: 0; }

/* --- Figures --------------------------------------------------------------- */

.deka-home-about__figures {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem; /* 40 — off the scale, but it is what the live layout uses */
  margin: 0;
  padding: 0;
  list-style: none;
}

.deka-home-about__figure {
  display: flex;
  align-items: flex-end; /* the label sits on the number's baseline */
  gap: var(--deka-space-2xs);
}

.deka-home-about__value {
  font-family: var(--deka-font-display);
  font-size: clamp(3.125rem, 1.5rem + 5vw, 5rem); /* 50 → 80 */
  font-weight: var(--deka-weight-light);
  line-height: 1;
  /* The digits change width as the counter runs; tabular figures stop the
     label beside them from jittering left and right for two seconds. */
  font-variant-numeric: tabular-nums;
  color: var(--deka-white);
}

.deka-home-about__label {
  max-width: 8rem;
  padding-bottom: 0.75rem; /* 12 — lifts the label off the baseline */
  font-family: var(--deka-font-display);
  font-size: 1rem; /* 16 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.3;
  color: var(--deka-white);
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 48rem) { /* 768 */
  .deka-home-about__inner {
    padding: var(--deka-space-lg) var(--deka-space-md) 10.625rem; /* 170 */
  }

  .deka-home-about__figures { gap: var(--deka-space-lg); }

  .deka-home-about__label { padding-bottom: 0.3125rem; /* 5 */ }
}

/* ==========================================================================
   Gallery
   --------------------------------------------------------------------------
   Values from Elementor #246: the row is pulled up 250px (140 on small
   screens) so it straddles the maroon band rather than sitting below it, in a
   1560 container with 50/56 padding and a 10px gutter. Frames 100% x 450 (300
   small) that stay put; each picture is a fifth taller than its frame and
   drifts through it as the page scrolls (data-deka-parallax-inner, motion.js).
   ========================================================================== */

.deka-home-about__gallery {
  position: relative;
  z-index: 1; /* paints over the band it overlaps */
  /* -275 against 50px of top padding puts the images 225px into the band,
     leaving the 45px the live site keeps between them and the figures. */
  margin-top: -17.1875rem; /* -275 */
  padding: 3.125rem 3.5rem; /* 50 / 56 */
}

.deka-home-about__shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625rem; /* 10 */
  width: min(100%, var(--deka-container-wide));
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.deka-home-about__frame {
  position: relative;
  height: 28.125rem; /* 450 */
  overflow: hidden;
  border-radius: 1rem; /* 16 */
}

/* The picture fills its frame exactly: these renders put their people near
   the foot of the picture, so the frame shows all of it (the brand layer sets
   each one's focal point for tiles of another shape). */
.deka-home-about__shot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 64rem) { /* 1024 */
  .deka-home-about__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) { /* 768 */
  .deka-home-about__gallery {
    margin-top: -9.375rem; /* -150, for a 130px overlap into the 170 above */
    padding: var(--deka-space-md) var(--deka-space-md) var(--deka-space-lg);
  }

  .deka-home-about__frame { height: 18.75rem; /* 300 */ }
}

/* Only phones scroll the row; see the phone block below. */
.deka-home-about__progress { display: none; }

/* ==========================================================================
   Phones
   --------------------------------------------------------------------------
   Values from the live site at 375px: 20px margins; figures stacked 40px apart
   with bold labels and a 20% white hairline 20px under the last one; the
   photos as a sideways-swiping row of 218×230 cards, 10px apart, starting 15px
   under that line and running 105px into the band; a 15px maroon bar 10px
   below the cards showing how far along the row is.
   ========================================================================== */

@media (max-width: 47.9375rem) { /* 767 — the live phone breakpoint */
  .deka-home-about__inner {
    padding: 1.25rem 0 7.5rem; /* 20 / 120, of which the row takes back 105 */
  }

  .deka-home-about__title { margin-bottom: 1.25rem; }

  .deka-home-about__body { margin-bottom: 2.125rem; } /* 34 */
  .deka-home-about__body p { margin-bottom: 0.9rem; }  /* 14.4 */

  .deka-home-about__figures {
    flex-direction: column;
    gap: 2.5rem; /* 40 */
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
  }

  .deka-home-about__label {
    font-weight: var(--deka-weight-bold);
    line-height: 1;
  }

  .deka-home-about__gallery {
    margin-top: -6.5625rem; /* -105 */
    padding: 0 0 2.5rem;    /* 40 */
  }

  .deka-home-about__shots {
    display: flex;
    gap: 0.625rem; /* 10 */
    width: auto;
    margin: 0;
    padding-inline: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
  }

  .deka-home-about__shots::-webkit-scrollbar { display: none; }

  .deka-home-about__shots > li {
    flex: 0 0 13.625rem; /* 218 */
    scroll-snap-align: start;
  }

  .deka-home-about__frame { height: 14.375rem; /* 230 */ }

  .deka-home-about__progress {
    display: block;
    height: 0.9375rem; /* 15 */
    margin-top: 0.625rem; /* 10 */
    overflow: hidden;
  }

  .deka-home-about__progress-thumb {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--deka-oxblood-700);
  }
}