/* =========================================================================
   Drop mechanics (ticket 16).

   One deadline line, one countdown, one plain closing sentence - dressed in
   the house tokens the child theme already publishes (charcoal ink, stone,
   sand, ivory, Manrope, 2px corners, the label tier for small lines).

   Two contexts share one set of rules:
   .nn-drop--piece  on a piece's page, sitting under the price
   .nn-drop--page   on the Drop page, a wider panel with bigger numbers
   .nn-drop--strip  on the homepage's "New & limited" strip
   ========================================================================= */

.nn-drop {
  --nn-drop-ink: var(--color-charcoal, #20201F);
  --nn-drop-stone: var(--color-stone, #A79D91);
  --nn-drop-sand: var(--color-sand, #E8E1D6);
  --nn-drop-ivory: var(--color-ivory, #F4F1EA);
  --nn-drop-muted: #6B655D;

  margin: 0 0 26px;
  font-family: var(--font-body, Manrope, sans-serif);
  color: var(--nn-drop-ink);
}

.nn-drop[hidden],
.nn-drop__open[hidden],
.nn-drop__closed[hidden],
.nn-drop.is-closed .nn-drop__open {
  display: none;
}

.nn-drop.is-closed .nn-drop__closed {
  display: block;
}

/* 1. The words around the numbers */

.nn-drop__overline {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--nn-drop-muted);
}

.nn-drop__date {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.6;
}

.nn-drop__date-label {
  margin-inline-end: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nn-drop-muted);
}

.nn-drop__date time {
  font-variant-numeric: tabular-nums;
}

/* 2. The countdown itself */

.nn-drop__count {
  display: flex;
  flex-wrap: nowrap;
  max-width: 420px;
  border: 1px solid var(--nn-drop-sand);
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--nn-drop-ivory);
}

.nn-drop__unit {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
}

.nn-drop__unit + .nn-drop__unit {
  border-inline-start: 1px solid var(--nn-drop-sand);
}

.nn-drop__number {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.nn-drop__word {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--nn-drop-muted);
}

/* 3. The waiting mark and the sample mark */

.nn-drop__sample {
  display: inline-block;
  max-width: 46ch;
  margin: 14px 0 0;
  padding: 6px 10px;
  border: 1px dashed var(--nn-drop-stone);
  border-radius: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--nn-drop-muted);
}

.nn-drop--waiting .nn-drop__sample {
  margin: 0;
}

/* 4. The link to the whole drop */

.nn-drop__more {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.nn-drop__more a {
  color: var(--nn-drop-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.nn-drop__more a:hover,
.nn-drop__more a:focus-visible {
  text-decoration-thickness: 2px;
}

/* 5. The closed state: a plain sentence, no button */

.nn-drop--closed {
  max-width: 52ch;
  margin: 0 0 26px;
  padding: 14px 16px;
  border: 1px solid var(--nn-drop-sand);
  border-radius: 2px;
  background-color: var(--nn-drop-ivory);
}

.nn-drop__closed {
  max-width: 52ch;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--nn-drop-sand);
  border-radius: 2px;
  background-color: var(--nn-drop-ivory);
  font-size: 14px;
  line-height: 1.6;
}

.nn-drop--closed .nn-drop__closed-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* 6. The Drop page: the same block, a little wider */

.nn-drop--page {
  max-width: 560px;
  margin: 0 0 40px;
}

.nn-drop--page .nn-drop__number {
  font-size: 34px;
}

.nn-drop--page .nn-drop__word {
  font-size: 10px;
}

.nn-drop--page .nn-drop__unit {
  padding: 16px 6px;
}

.nn-drop--page .nn-drop__count {
  max-width: 100%;
}

.nn-drop--page .nn-drop__date {
  font-size: 15px;
}

/* 7. The homepage strip: one quiet line, no big numbers */

.nn-drop--strip {
  margin: 0;
}

.nn-drop--strip .nn-drop__overline,
.nn-drop--strip .nn-drop__more {
  display: none;
}

.nn-drop--strip .nn-drop__count {
  max-width: 340px;
}

.nn-drop--strip .nn-drop__number {
  font-size: 18px;
}

.nn-drop--strip .nn-drop__unit {
  padding: 8px 3px;
}

.nn-drop--strip .nn-drop__sample {
  margin-block-start: 10px;
}

/* 8. The piece grid under the Drop page's date */

.nn-drop-pieces {
  margin-block-start: 8px;
}

.nn-drop__empty {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--nn-drop-muted);
}

/* 9. Narrower screens: the four numbers stay on one line and step down */

@media (max-width: 767px) {
  .nn-drop__number {
    font-size: 18px;
  }

  .nn-drop__word {
    font-size: 8px;
    letter-spacing: 0.06em;
  }

  .nn-drop__unit {
    padding: 8px 2px;
  }

  .nn-drop--page .nn-drop__number {
    font-size: 26px;
  }

  .nn-drop--page .nn-drop__unit {
    padding: 12px 4px;
  }

  .nn-drop--page {
    margin-block-end: 28px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .nn-drop--page .nn-drop__number {
    font-size: 30px;
  }
}