/* =========================================================
   CATEGORY.CSS
   Product-category template — built to the Figma frame
   "Product Category Template" (node 142:193, 1140 x 3149).

   Follows the page-width model settled on Contact and reused
   on Technical Services: every <section> runs the FULL
   viewport width and carries the band colour; the inner
   wrapper is capped at --page-max-width (1140) and centred;
   the numbered rail is an absolute overlay that lands on
   right:0 of the viewport because its section is full-width.

   Geometry source: direct Figma node metadata. Every px below
   is a measured value UNLESS a comment says ESTIMATE — the
   hero's text block is not in the file (hidden layers, same as
   the Technical Services hero) and was read off the canvas
   screenshot.
   ========================================================= */

/* Header plate treatment, same as the other inner pages. */
.site-header {
  box-shadow: 0px 4px 4px 0px #D9D9D9;
}

.site-navigation__link.is-active::before {
  right: 14.15px;
  width: 32.16px;
  bottom: -5px;
  background-color: #005E8E;
}

.site-navigation__link.is-active::after {
  right: 0;
  width: 14.15px;
  bottom: -5px;
  background-color: #CC2F3A;
}

/* ---------------------------------------------------------
   SHARED: capped, centred inner wrappers.
   1140 total = 1053 content zone + 87 reserved for the rail.
   --------------------------------------------------------- */
.cat-hero__inner,
.cat-products__inner {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
}

/* ---------------------------------------------------------
   SHARED: the two-tone rule (blue left, red right), right edge
   flush with the type above it. 67.6px — the same Figma asset
   ("Group 64", w67.595) is used both under the section heading
   and under every product name, so both get the same rule.
   --------------------------------------------------------- */
.cat-rule {
  display: flex;
  width: 67.6px;
  /* 1.5px, not 2px: measured 1.35px of ink on the zoomed Figma
     crop of the MF 898 card (the layer is a 0-height vector with
     a stroke, so the thickness is not in the metadata). */
  height: 1.5px;
}

/* DOM order is red then blue; in this RTL row the first child
   lands physically RIGHT, which is where the canvas puts red. */
/* Split measured off the zoomed Figma crop of the MF 898 card:
   red 20.0px / blue 47.1px of the 67.6px rule. */
.cat-rule__segment--red  { flex: 30; background-color: #CC2F3A; }
.cat-rule__segment--blue { flex: 70; background-color: #005E8E; }

/* =========================================================
   HERO — Figma y76–565 (489 tall), rail item "01 / STRUCTURE".
   The photo (node 142:313) spans the whole band; the wash above
   it creates the light panel the text sits on.
   ========================================================= */
.cat-hero {
  position: relative;
  height: 489px;
  background-color: var(--color-surface);
  overflow: hidden;
}

.cat-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cat-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* width is gained by cropping, never by stretching */
  object-position: center;
}

/* ESTIMATE: Figma's wash is a flattened layer whose gradient
   stops the export does not expose. Stops are anchored to the
   band's centre so the wash reaches full strength exactly where
   the text column starts, at any viewport width. */
.cat-hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(247, 247, 245, 0) calc(50% - 170px),
    rgba(247, 247, 245, 0.85) calc(50% + 50px),
    rgba(247, 247, 245, 0.85) 100%
  );
  pointer-events: none;
}

.cat-hero__inner {
  position: relative;
  height: 100%;
  /* Right inset 136px puts the text's right edge on 1004 — the
     same right edge the product grid below uses. */
  padding-inline-start: 136px;
}

/* ESTIMATE: vertical rhythm read off the canvas screenshot. */
.cat-hero__content {
  max-width: 370px;
  /* A block narrower than its container sits at the inline-start
     edge by default, which in this RTL page is the physical
     RIGHT — exactly where the panel is. margin-inline-START:auto
     would push it to the LEFT; that is the trap here. */
  margin-inline-end: auto;
  padding-block-start: 95px;
  text-align: start;
}

.cat-hero__eyebrow {
  margin: 0;
  font-family: var(--font-english);
  font-weight: var(--font-weight-regular);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
}

.cat-hero__rule {
  margin-block-start: 12px;
  /* fixed-width block child: in RTL it would align to the
     container's right edge anyway, which is what we want here */
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.cat-hero__heading {
  margin: 18px 0 0;
  max-width: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 36px;
  line-height: 45px;
  color: var(--color-text-strong);
}

.cat-hero__subtitle {
  margin: 27px 0 0;
  max-width: none;
  font-family: var(--font-english);
  font-weight: var(--font-weight-light);
  font-size: 20px;
  line-height: 28px;
  color: var(--color-text-muted);
}

.cat-hero__paragraph {
  margin: 23px 0 0;
  max-width: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text);
}

/* =========================================================
   PRODUCTS — Figma y565–3099 (2534 tall), band #F9F8F6,
   rail item "02 / STRUCTURAL SYSTEMS" on #F6F5F3.
   ========================================================= */
.cat-products {
  position: relative;
  /* stays as the colour under the texture, and as what shows if the
     image has not loaded yet */
  background-color: #F9F8F6;
  /* The leaf-shadow texture, running the full viewport width behind the
     card grid. `cover` keeps its proportions at any window size and any
     band height -- the band is much taller on a 13-product category than
     on a 1-product one -- and `left top` keeps the leaves in the top
     corner, where the comp puts them.
     The cards and the rail carry their own solid backgrounds, so they sit
     on the texture rather than letting it show through. */
  background-image: url("../category-images/products-bg.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}

.cat-products__inner {
  /* 136 right + 97 left leaves exactly 907 = 3x233 + 2x104,
     the three-column card grid. */
  padding-inline-start: 136px;
  padding-inline-end: 97px;
  padding-block-start: 88px;   /* Figma: heading top y653, section top y565 */
  padding-block-end: 334.5px;  /* trims the band to Figma's measured 2534 total */
}

.cat-products__heading {
  margin: 0;
  max-width: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 32px;
  line-height: 45px;
  color: var(--color-text-strong);
  white-space: nowrap;   /* Figma sets this on one line */
}

.cat-products__rule {
  margin-block-start: 9px;   /* Figma: heading line ends 698, rule y707 */
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* ---------------------------------------------------------
   THE CARD GRID
   Figma columns sit at x97 / ~431 / x771 with 233-wide cards;
   the per-row values drift by a few px, so they are normalised
   to one clean grid: 233 + 104 gap. Row pitch 410 (card 322 +
   88 gap) matches the measured 404–411 spread.
   --------------------------------------------------------- */
.cat-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 233px);
  column-gap: 104px;
  row-gap: 97px;   /* 313 card + 97 = the measured 410 row pitch */
  margin: 0;
  padding: 0;
  margin-block-start: 103.5px; /* rule ends y708.5 -> first card top y812 */
  list-style: none;
}

/* ---------------------------------------------------------
   FOUR UP ON A WIDE WINDOW
   The cards, the gap and everything inside them are untouched:
   still 233 wide, 313 tall, 104 apart. The only change is that
   the grid's own container is allowed to grow past the site's
   1140 cap and take some of the empty margin that sits either
   side of it on a wide screen, so a fourth 233px column fits on
   the same row.

   The arithmetic, exactly:
     4 cards      4 x 233 = 932
     3 gaps       3 x 104 = 312
     grid track           = 1244
     + 136 right inset (the heading's own right edge)
     +  97 left inset  (unchanged)
     container            = 1477

   So the switch happens at 1477px of window width -- the first
   width at which the fourth card fits without touching anything.
   Below that the page keeps the current three-column layout
   exactly as it is.
   --------------------------------------------------------- */
@media (min-width: 1477px) {
  .cat-products__inner {
    max-width: 1477px;
  }

  .cat-products__grid {
    grid-template-columns: repeat(4, 233px);
  }
}

.product-card {
  /* Figma-exact: image 233x164 on top, card 313 tall overall
     (measured on the zoomed MF 898 crop). */
  height: 313px;
  background-color: #F2F1F1;
}

.product-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.product-card__media {
  height: 164px;
  overflow: hidden;
}

.product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The card photos are pre-cropped files of their own now, already
     at the card's 233:164 proportion, so cover simply fills the box
     and there is nothing left to crop. `center` rather than the old
     `left bottom`: a few of the exports are a pixel off square
     (465x328, 466x327), and centring absorbs that evenly instead of
     shaving it all off one edge. PHYSICAL keyword on purpose --
     object-position is not affected by the page's RTL direction. */
  object-position: center;
}

.product-card__body {
  /* 13px puts the product name's line box on Figma's y+177
     (name node y1804 against image top y1627 on the MF 898 card);
     9px matches the rule's own inset (233 - 67.6 - 156). */
  padding: 13px 9px 0;
}

.product-card__name {
  margin: 0;
  max-width: none;
  font-family: var(--font-english);
  /* Figma specifies Blinker ExtraLight (200). Only Blinker
     Light (300) is licensed/loaded on this site, so the browser
     resolves 200 to that file — closest available weight, no
     synthetic thinning. */
  font-weight: 200;
  font-size: 32px;
  line-height: 35px;
  color: var(--color-text-strong);
  /* direction:ltr keeps the Latin/numeric run in its own order;
     because that flips this element's OWN logical properties,
     the alignment below is deliberately PHYSICAL. */
  direction: ltr;
  text-align: right;
}

.product-card__rule {
  margin-block-start: 21px;   /* Figma: name box ends +212, rule +233 */
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.product-card__desc {
  margin: 7.5px 0 0;          /* Figma: rule ends +234.5, text box +242 */
  max-width: none;
  font-family: var(--font-hebrew);
  font-weight: var(--font-weight-light);
  font-size: 15px;
  /* 20px, measured: the two description lines on the zoomed
     MF 898 crop sit exactly 20px apart. */
  line-height: 20px;
  color: var(--color-text-strong);
}

/* ---------------------------------------------------------
   A CARD THAT ALTERNATES BETWEEN TWO PHOTOS
   MF 881-25G has two shots in product-cards, and the card shows
   them in turn. Both sit in the same media box, one on top of the
   other, and only the top one's opacity is animated -- so there is
   no script, nothing reflows, and the card keeps its exact size.

   8s round trip: about 3.4s on each photo with a 0.64s crossfade
   between them, symmetric in both directions.

   Only a media box carrying --crossfade is affected; every other
   card is untouched. Anyone who has asked their system to reduce
   motion simply sees the first photo.
   --------------------------------------------------------- */
.product-card__media--crossfade {
  position: relative;
}

.product-card__media--crossfade .product-card__image {
  position: absolute;
  inset: 0;
}

.product-card__image--second {
  opacity: 0;
  animation: product-card-crossfade 8s ease-in-out infinite;
}

@keyframes product-card-crossfade {
  0%, 42%  { opacity: 0; }
  50%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card__image--second { animation: none; }
}