/* ==========================================================================
   Section: Signature details — "امضای ما در جزئیات است"
   Close crops of the three real product photographs, done purely with CSS.
   Each crop is limited so the 1122 px source keeps ≥ 1.5 source pixels per
   CSS pixel (zoom × frame width ≤ ~750 CSS px); on phones it stays near 3.
   WordPress: template-parts/details.php
   ========================================================================== */

.details {
  padding-block: var(--s-9);
}

.details__head {
  display: grid;
  gap: var(--s-4);
  margin-block-end: var(--s-8);
}

.details__head .kicker {
  --kicker-color: var(--c-ink-muted);
}

.details__title {
  font-size: var(--t-title);
  font-weight: var(--w-light);
  line-height: var(--lh-title);
  max-inline-size: 14em;
}

.details__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: start;
}

.detail {
  display: grid;
  gap: var(--s-3);
}

/* staggered like a contact sheet */
.detail:nth-child(2) { margin-block-start: var(--s-8); }
.detail:nth-child(3) { margin-block-start: var(--s-6); }

/* The loupe: an absolutely placed image, scaled around a focus point.
   --z    zoom relative to the frame width
   --fx/--fy  focus point as a fraction of the photograph (0–1)          */
.loupe {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: var(--loupe-ratio, 3 / 5);
  background-color: var(--frame-bg, var(--c-sand));
}

.loupe picture {
  display: contents;
}

.loupe img {
  position: absolute;
  max-inline-size: none;
  inline-size: calc(var(--z) * 100cqw);
  block-size: auto;
  aspect-ratio: 1122 / 1402;
  /* centre the focus point in the frame */
  left: calc(50% - var(--fx) * var(--z) * 100cqw);
  top: calc(50% - var(--fy) * var(--z) * 124.96cqw);
}

/* hairline inner frame, like a loupe ring */
.loupe::after {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: var(--hairline) solid rgb(243 237 227 / 0.35);
  pointer-events: none;
}

.detail--wing  .loupe { --fx: 0.36; --fy: 0.475; --z: 3.4; --loupe-ratio: 3 / 5; --frame-bg: #1d140e; }
.detail--knot  .loupe { --fx: 0.50; --fy: 0.485; --z: 3.0; --loupe-ratio: 3 / 4; --frame-bg: #d6c2ae; }
.detail--dots  .loupe { --fx: 0.50; --fy: 0.60;  --z: 3.2; --loupe-ratio: 3 / 5; --frame-bg: #c9ab8c; }

.detail__caption {
  display: grid;
  gap: var(--s-1);
}

.detail__name {
  font-size: var(--t-small);
  font-weight: var(--w-light);
  line-height: 1.7;
}

.detail__from {
  font-size: var(--t-micro);
  color: var(--c-ink-muted);
  line-height: 1.6;
}

@media (min-width: 48em) {
  .details__list {
    gap: var(--gutter);
  }
}

@media (min-width: 64em) {
  .details__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    align-items: start;
  }

  .details__head {
    grid-column: 1 / 5;
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--s-7));
    margin: 0;
  }

  .details__list {
    grid-column: 6 / 13;
    max-inline-size: 46rem;
    justify-self: end;
    inline-size: 100%;
  }

  /* frames are ~220 CSS px here: keep zoom × frame ≤ ~750 CSS px
     (≥ 1.5 source pixels per CSS pixel) */
  .detail--wing .loupe { --z: 3.0; }
  .detail--knot .loupe { --z: 2.8; }
  .detail--dots .loupe { --z: 2.9; }
}