/*
 * Global bands, seeded as WoodMart HTML blocks by scripts/shop/bands.php:
 * CTA, Kako nastaje print, Podloge (cards from base.css), Detalji štampe,
 * delivery notes, quote band, gift card. Mirrors the mocks' helmet CSS.
 */

/* --- CTA band ------------------------------------------------------------ */
.tt-cta {
  position: relative;
  background: var(--tt-forest-1);
  padding: var(--tt-section-y) var(--tt-section-x);
  text-align: center;
  overflow: hidden;
}

.tt-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tt-glow-cta);
}

.tt-cta__in {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tt-cta .tt-lede {
  text-align: center;
  max-width: var(--tt-measure);
}

.tt-cta__btns {
  justify-content: center;
  margin-top: 36px;
}

/* --- Kako nastaje print --------------------------------------------------- */
.tt-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tt-step-min)), 1fr));
  gap: var(--tt-gap-steps);
  margin-top: var(--tt-head-gap);
}

.tt-step {
  border-top: var(--tt-hairline) solid var(--tt-royal);
  padding-top: 22px;
}

.tt-step__n {
  display: block;
  font-family: var(--tt-display);
  font-size: var(--tt-size-numeral-step);
  line-height: 1;
  color: var(--tt-sage-3);
  font-weight: 400;
}

.tt-step h3 {
  font-family: var(--tt-display);
  font-weight: 500;
  font-size: var(--tt-size-card-title-s);
  line-height: 1.1;
  margin: 14px 0 0;
  color: var(--tt-cream-hi);
}

.tt-step__p {
  font-family: var(--tt-sans);
  font-weight: 300;
  font-size: var(--tt-size-body-s);
  line-height: var(--tt-lh-copy);
  color: var(--tt-mist);
  margin: 10px 0 0;
}

/* --- Delivery notes (product panel) ---------------------------------------- */
.tt-notes {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--tt-sans);
  font-weight: 300;
  font-size: var(--tt-size-body-s);
  line-height: var(--tt-lh-copy);
  color: var(--tt-ink-2);
}

.tt-notes li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.tt-notes svg {
  width: var(--tt-icon);
  height: var(--tt-icon);
  flex: none;
  color: var(--tt-royal);
  margin-top: 3px;
}

.tt-notes b {
  font-weight: 400;
}

.tt-ask {
  margin: 22px 0 0;
  font-family: var(--tt-sans);
  font-weight: 300;
  font-size: var(--tt-size-body-xs);
  line-height: var(--tt-lh-copy);
  color: var(--tt-ink-2);
}

.tt-ask a {
  color: var(--tt-royal);
  border-bottom: var(--tt-hairline) solid var(--tt-btn-outline);
  text-decoration: none;
}

/* --- Quote band ------------------------------------------------------------ */
.tt-quote {
  position: relative;
  min-height: clamp(400px, 55vh, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(70px, 9vw, 130px) var(--tt-section-x);
  background: var(--tt-forest-2);
  overflow: hidden;
}

.tt-quote > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-quote__scrim {
  position: absolute;
  inset: 0;
  background: var(--tt-scrim-quote);
}

.tt-quote__in {
  position: relative;
  max-width: 900px;
}

.tt-quote__mark {
  font-family: var(--tt-display);
  font-size: var(--tt-size-quote-mark);
  line-height: 44px;
  height: 44px;
  color: var(--tt-moss);
  margin: 0;
}

.tt-quote__text {
  font-family: var(--tt-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--tt-size-pull-quote);
  line-height: 1.4;
  color: var(--tt-cream-hi);
  text-wrap: pretty;
  margin: 18px 0 0;
}

.tt-quote__who {
  margin: 26px 0 0;
  font-family: var(--tt-sans);
  font-size: var(--tt-size-caption);
  letter-spacing: var(--tt-tracking-attribution);
  text-transform: uppercase;
  color: var(--tt-sage-2);
  font-weight: 400;
}

/* --- Gift card band -------------------------------------------------------- */
.tt-gift {
  background: var(--tt-cream-alt);
  padding: var(--tt-section-y-sub) var(--tt-section-x);
}

.tt-gift__in {
  max-width: var(--tt-container);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

.tt-gift__copy {
  flex: 1 1 380px;
  min-width: 0;
}

.tt-gift__btns {
  margin-top: 32px;
  align-items: center;
}

.tt-gift__fig {
  flex: 1 1 420px;
  min-width: 0;
  aspect-ratio: 4 / 3;
  background: var(--tt-white);
  border: var(--tt-hairline) solid var(--tt-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
}

.tt-gift__fig img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: var(--tt-print-shadow);
}