/* ==========================================================================
   Four products - assets/css/four-products.css
   Asked for by views/elements/_type4.cfm through hpAddCss(), after
   category-filters.css.

   THE CARDS ARE NOT STYLED HERE. They are the category grid's cards, drawn by
   site.css and category-filters.css, and that is the point of the element - a
   product looks the same wherever it is offered. This sheet adds the heading
   and changes how many cards sit in a row, and nothing else.

   .product-grid is 1 column below 768px and 3 above it, which is right for a
   category of eighty products and wrong for a promoted row of four. Two rules
   replace that: a 2 x 2 block on a phone, where four cards in a column is a
   long scroll past the same thing four times, and all four in a row on a
   desktop, which is what the layout is called.
   ========================================================================== */

/* THE WHITE COMES FROM site.css's .content-panel, which the element puts on
   this same div. The body background is tan and every section that is not a
   full-bleed photograph paints white over it; that class also carries the 20px
   below, so only the space above is set here.

   PADDING, NOT MARGIN, for the same reason: a margin would open a gap with the
   tan body showing through it.

   TWO VALUES, BECAUSE THE HEADING IS ITSELF SPACE. With one, the gap above the
   heading and the heading's own 18px below it stack into a band far taller than
   anything else on the page. 18 here matches that 18, so the heading sits in an
   even band rather than being pushed down into the cards.

   THE CLASS COMES FROM THE ELEMENT, NOT FROM :has(). The template knows whether
   it wrote a heading and says so; :has() would ask the same question in CSS and
   need Firefox 121, which is not a floor to put on the storefront. */
/* WITH A HEADING, NONE - and that is the measured answer rather than a round
   number. The heading has to sit midway between the element above and the cards
   below. Below it is its own 20px margin. Above it is whatever the previous
   element leaves, and site.css's .content-panel already ends every element with
   20px of it. 20 above and 20 below is centred, so this contributes nothing.

   IT THEREFORE DEPENDS ON WHAT SITS ABOVE. Every element on this page ends with
   .content-panel's 20px, so the arithmetic holds wherever this is placed in the
   list. If it is ever put first, directly under the navigation, there is no
   20px to inherit and this is the line that needs it. */
.four-products-region {
  padding-top: 0;
}

/* No heading: the cards are the first thing in the element, so they get exactly
   what the panel pair gets above its photographs - the two sit on the page the
   same way. Nothing is being centred here, so this one is a real 10px. */
.four-products-region.fp-no-title {
  padding-top: 10px;
}

/* TWO CLASSES, BECAUSE ONE LOSES. site.css sets .content-panel p to
   margin 0 0 20px - (0,1,1) - and a bare .fp-title is (0,1,0), so the 18px
   written here was never the value that applied. Measured at 20px in the
   browser before this was changed. The selector now wins at (0,2,0) and says
   20, which is what the space below the heading actually is. */
.four-products-region .fp-title {
  margin: 0 0 20px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

/* Two class selectors, so this beats the single-class .product-grid rules in
   site.css whatever order the two sheets happen to load in.

   THE SIDE PADDING MATCHES THE COLUMN GAP, and is not a container in disguise.
   The row spans the whole window; this only stops the outer cards sitting on
   the glass. Measured rather than judged: full bleed with no padding put the
   first card's title and price at x = 0 and clipped the last card's photograph
   at the right edge. A card carries no side padding of its own - the photograph
   is meant to reach its edges - so the gutter has to come from the grid, and
   the gap between cards is the width already in use. */
.product-grid.fp-grid {
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
  column-gap: 16px;
  row-gap: 22px;
  padding-left: 16px;
  padding-right: 16px;
  /* site.css gives .product-grid a 10px top margin, which is right on a
     category page where the grid follows a filter bar. Here it is a second
     source of space above the cards, stacking on the region's own padding -
     measured, not assumed: the no-heading case came out at 20px when 10 was
     asked for. The region owns the space above; the grid contributes none. */
  margin-top: 0;
}

@media (min-width: 768px) {
  .product-grid.fp-grid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 26px;
    padding-left: 26px;
    padding-right: 26px;
  }
}

/* --------------------------------------------------------------------------
   Hover zoom on the photograph.

   THE SAME MOVEMENT panel-pair.css gives the two panels above - 1.03 over
   0.35s - so the two elements on this page behave as one thing rather than
   two similar ones.

   ON THE LINK, NOT THE CARD. .product-card-link wraps the photograph and the
   title; the price and the Add to Cart button sit outside it. Hanging this on
   .product-card would zoom the picture while somebody is reaching for the
   button, which is movement under the cursor at the exact moment it should be
   still.

   NOTHING TO ADD FOR THE CLIPPING: site.css already gives
   .product-card-image overflow:hidden and a 1:1 aspect-ratio, and the img is
   object-fit:cover, so the picture grows inside its box and is cropped by it.

   SCOPED TO .fp-grid. This sheet is only loaded by the home page, but
   .product-card belongs to every grid on the site - the scope means that stays
   true if the sheet is ever loaded somewhere else.

   Hover-capable, fine-pointer screens only. On touch this would fire on tap
   and stay zoomed until something else was tapped.
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  .fp-grid .product-card-image img {
    transition: transform 0.35s ease;
  }

  .fp-grid .product-card-link:hover .product-card-image img,
  .fp-grid .product-card-link:focus-visible .product-card-image img {
    transform: scale(1.03);
  }

}

/* Decoration, and nothing depends on it. */
@media (prefers-reduced-motion: reduce) {
  .fp-grid .product-card-image img {
    transition: none;
  }
  .fp-grid .product-card-link:hover .product-card-image img,
  .fp-grid .product-card-link:focus-visible .product-card-image img {
    transform: none;
  }
}