/* ==========================================================================
   BanSek Trade v2 — blocks shared across pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Image tiles — colour photograph, paper label over a night gradient from
   the bottom; on hover the gradient deepens and a lime arrow appears (E).
   -------------------------------------------------------------------------- */
.tiles { padding-top: var(--space-m); }
.tiles__list { display: grid; gap: clamp(10px, 1.2vw, 18px); }
.tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  aspect-ratio: 16 / 10;
  padding: clamp(18px, 2vw, 26px);
}
.tile img { position: absolute; inset: 0; }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(15 18 22 / .78) 0%, rgb(15 18 22 / .28) 38%, rgb(15 18 22 / 0) 64%);
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(15 18 22 / .5), rgb(15 18 22 / .1) 70%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.tile__label {
  position: relative;
  z-index: 2;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.1;
  color: var(--paper);
}
.tile__arrow {
  position: relative;
  z-index: 2;
  flex: none;
  width: 22px;
  height: 22px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-mid) var(--ease-soft), transform var(--dur-mid) var(--ease-soft);
}
.tile.night .tile__arrow { color: var(--lime); }
.tile.night:hover::before, .tile.night:focus-visible::before { opacity: 1; }
.tile.night:hover .tile__arrow, .tile.night:focus-visible .tile__arrow { opacity: 1; transform: none; }
@media (hover: none) { .tile__arrow { opacity: 1; transform: none; } }
@media (min-width: 768px) {
  .tiles__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Editorial feature — text one side, large rounded photograph the other
   -------------------------------------------------------------------------- */
.feature { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.feature__text { display: grid; gap: 24px; justify-items: start; min-width: 0; }
.feature__title { font-size: clamp(34px, 4.2vw, 68px); overflow-wrap: break-word; }
.feature__rule { margin-top: 4px; }
.feature__body { font-size: 17px; }
.feature__media { aspect-ratio: 4 / 3; margin: 0; }
.feature__media img { object-position: var(--pos, 50% 50%); }
@media (min-width: 1024px) {
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .feature--text-right { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .feature--text-right .feature__text { order: 2; }
  .feature__media { aspect-ratio: 5 / 4; }
}

/* Night pull-quote with a lime hairline (A3.3) */
.pquote {
  display: grid;
  gap: 16px;
  width: 100%;
  margin: 4px 0;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-tile);
}
.pquote.night::before { content: ""; display: block; width: 56px; height: 1px; background: var(--lime); }
.pquote__text { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.3; }
.pquote__by { font-size: 13px; letter-spacing: .04em; color: rgb(243 240 234 / .7); }

/* --------------------------------------------------------------------------
   Stats — the numbers on a night band, lime serif (A3.1)
   -------------------------------------------------------------------------- */
.stats__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}
.stats__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--night-line);
}
.stats.night .stats__num {
  margin: 0;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  line-height: 1;
  color: var(--lime);
}
.stats__label { font-size: 14px; line-height: 1.4; color: var(--paper); }
@media (min-width: 768px) { .stats__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .stats__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Technical-support resources (#uputstva, #momenti-stezanja, #video, #katalozi)
   -------------------------------------------------------------------------- */
.res { margin-top: var(--space-l); }
.res__head { display: grid; gap: 14px; margin-bottom: clamp(28px, 3vw, 44px); }
.res__h { font-size: var(--fs-h3); }
.res__grid { display: grid; gap: 40px 48px; }
.res__label { padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.res__item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: var(--hairline);
}
.res__n { font-family: var(--font-serif); font-size: 15px; color: var(--steel); line-height: 1.5; }
.res__text { display: grid; gap: 6px; }
.res__title { font-size: 19px; line-height: 1.25; }
.res__body { font-size: 15px; color: var(--ink-2); }
.res__status { color: var(--lime-text); }
.res__dl { display: grid; }
.dl {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 16px 0;
  border-bottom: var(--hairline);
}
.dl__icon { grid-row: span 2; color: var(--steel); margin-top: 2px; }
.dl__name { font-size: 15px; color: var(--ink); line-height: 1.35; }
.dl:hover .dl__name { color: var(--lime-text); }
@media (min-width: 768px) {
  .res__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .res__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res__group:first-child { grid-row: span 3; }
}
@media (min-width: 1200px) {
  .res__grid { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
  .res__group:first-child { grid-row: span 2; }
}

/* --------------------------------------------------------------------------
   Product card — the Arttex structure in the v2 skin (D3). Paper, a 1px
   paper-3 border, 16px radius; hover lifts the border to ink-3. No shadows.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--paper-3);
  border-radius: var(--r-tile);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-soft);
}
.card:hover, .card:focus-within { border-color: var(--ink-3); }
.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background: var(--paper-2);
}
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-mid) var(--ease-soft); }
.card__alt { opacity: 0; }
@media (hover: hover) {
  .card:hover .card__alt { opacity: 1; }
}
.card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px 5px;
  border-radius: var(--r-pill);
  color: var(--paper);
  letter-spacing: .12em;
}
.card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 18px 20px; }
.card__tag { color: var(--lime-text); }
.card__name { font-size: 18px; line-height: 1.25; }
.card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__name a:hover { color: var(--lime-text); }
.card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.card__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pbadge { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--paper-2); font-size: 12px; text-transform: uppercase; }
.card__oe .pn { color: var(--ink-2); }
.card__price { margin-top: auto; padding-top: 12px; border-top: var(--hairline); color: var(--lime-text); }
.card__actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.card--compact .card__price { padding-top: 10px; }

/* Homepage row — four compact cards */
.prow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}
.prow__head .snum { flex: 1 1 100%; margin-bottom: 0; }
.prow__more { font-size: 14px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.prow__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
@media (max-width: 479.98px) { .prow__list { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) { .prow__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Brand marquee — serif names, hairlines, one slow direction
   -------------------------------------------------------------------------- */
.brands {
  border-block: var(--hairline);
  overflow: hidden;
  margin-block: var(--space-m);
}
.brands__viewport { display: flex; width: max-content; }
.brands__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 48px);
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 500;
  color: var(--steel);
  white-space: nowrap;
}
/* It moves only with JavaScript, which runs its pause control (WCAG 2.2.2);
   without either, or under reduced motion, the row scrolls by hand. */
.brands { position: relative; }
.brands__pause {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: max(16px, env(safe-area-inset-right, 0px));
  z-index: 1;
  transform: translateY(-50%);
  color: var(--ink);
  background: var(--paper);
  border-color: currentColor;
}
.brands__pause[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  html.js .brands__viewport { animation: brands-scroll 70s linear infinite; }
  .brands:hover .brands__viewport,
  .brands.is-paused .brands__viewport { animation-play-state: paused; }
}
@keyframes brands-scroll { to { transform: translateX(-50%); } }
html:not(.js) .brands__pause { display: none; }
html:not(.js) .brands { overflow-x: auto; }
html:not(.js) .brands__track[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .brands { overflow-x: auto; }
  .brands__pause,
  .brands__track[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   Branches
   -------------------------------------------------------------------------- */
.branches__head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.branches__head .h2 { max-width: 16ch; }
.branches__grid { display: grid; gap: clamp(10px, 1.2vw, 18px); }
.branch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 22px 22px;
  border: 1px solid var(--paper-3);
  border-radius: var(--r-tile);
  background: var(--paper);
  font-size: 14px;
}
.branch__city { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; overflow-wrap: anywhere; }
.branch__role { margin-bottom: 10px; }
.branch__addr { color: var(--ink-2); }
.branch__phones { display: grid; gap: 2px; margin-top: 10px; }
.branch__phones a, .branch__mail a { color: var(--ink); }
.branch__hours { margin-top: 8px; color: var(--ink-2); font-size: 13px; }
.branch__flag { margin-top: auto; padding-top: 14px; color: var(--lime-text); }
@media (min-width: 768px) {
  .branches__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  /* 2 + 3 on tablet */
  .branches__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .branch { grid-column: span 2; }
  .branch:nth-child(-n + 2) { grid-column: span 3; }
}
@media (min-width: 1200px) {
  .branches__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .branch, .branch:nth-child(-n + 2) { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   Data tables — product numbers, applications, generations, hours
   -------------------------------------------------------------------------- */
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ptable th { padding: 10px 12px 10px 0; text-align: left; font-size: var(--fs-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); border-bottom: var(--hairline); }
.ptable td { padding: 12px 12px 12px 0; border-bottom: var(--hairline); color: var(--ink); vertical-align: top; }
.ptable__none { color: var(--ink-3); }