/* ==========================================================================
   Panel pair - assets/css/panel-pair.css
   Asked for by views/elements/_type3.cfm through hpAddCss().

   Two linked photographs with a caption and a button on each. Side by side at
   768px and up, stacked below it.

   THE PANELS ARE ANCHORS. Everything inside one is a span, because an anchor
   cannot contain another anchor - so the layout below is built on inline
   elements told to behave as blocks rather than on divs.

   THE ASPECT RATIO IS SET HERE, NOT BY THE PHOTOGRAPH. Both panels are given
   one shape and object-fit crops each picture to it, so two images that do not
   match each other still render as a matched pair. That is also why the upload
   profile only asks for a minimum size and not an exact one.

   The title colour, size and the button colours arrive on custom properties
   written by the element from its row. They are pixel values at a 1440px-wide
   viewport, the same reference the two hero types use.
   ========================================================================== */

/* 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. A margin would let the tan body show through in the gap
   it opens, which is the whole problem this is fixing. */
.panel-pair-region {
  padding-top: 10px;
}

/* Phone first: one column, one panel under the other. */
.panel-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   A panel.

   position:relative is the anchor for the copy; overflow:hidden keeps the
   cropped photograph inside the corners.
   -------------------------------------------------------------------------- */

.pp-panel {
  position: relative;
  display: block;
  overflow: hidden;
  /* The shape of the supplied art, 600 x 188. Both panels get it whatever
     their photographs measure. */
  aspect-ratio: 600 / 188;
  border-radius: 2px;
  text-decoration: none;
}

.pp-panel:hover,
.pp-panel:focus {
  text-decoration: none;
}

/* A little lift on hover, but only where hovering is a thing - on a touch
   screen this would fire on tap and stay. */
@media (hover: hover) and (pointer: fine) {
  .pp-panel:hover .pp-img {
    transform: scale(1.03);
  }
}

.pp-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

/* --------------------------------------------------------------------------
   The caption and the button.

   Stacked, both centre: there is no outer edge to read from when a panel is
   the full width of a phone.
   -------------------------------------------------------------------------- */

.pp-copy {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
}

.pp-title {
  display: block;
  font-family: 'Times New Roman', Times, serif;
  /* 0.72 of the desktop size. A caption on a full-width phone panel has less
     room above and below it than the same caption has on half a desktop. */
  font-size: calc(var(--pp-title-size, 30px) * 0.72);
  line-height: 1.15;
  color: var(--pp-title-color, #ffffff);
}

.pp-title-shadow {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.pp-btn {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 2px;
  background-color: var(--pp-btn-bg, #910d10);
  color: var(--pp-btn-color, #ffffff);
  font-family: 'Helvetica Neue', 'Open Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pp-panel:hover .pp-btn,
.pp-panel:focus .pp-btn {
  filter: brightness(0.9);
}

/* --------------------------------------------------------------------------
   768px and up: side by side, and the captions read outward.

   auto-fit rather than a fixed 1fr 1fr, so a pair with only one photograph
   configured fills the width instead of sitting in the left half with a hole
   beside it. There are only ever two panels, so this cannot make a third
   column.

   THE MIRROR IS THE DESIGN. Panel a reads from the left and panel b from the
   right, which puts the two captions at the outer edges rather than crowding
   them either side of the gutter. It is not a stored setting; if a layout ever
   wants both panels reading the same way, it is this block that changes.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

  .panel-pair {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
  }

  .pp-title {
    font-size: var(--pp-title-size, 30px);
  }

  .pp-copy {
    gap: 14px;
    padding: 20px 34px;
  }

  .pp-a .pp-copy {
    align-items: flex-start;
    text-align: left;
  }

  .pp-b .pp-copy {
    align-items: flex-end;
    text-align: right;
  }

}

/* --------------------------------------------------------------------------
   Reduced motion: the hover zoom is decoration and nothing depends on it.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pp-img {
    transition: none;
  }
  .pp-panel:hover .pp-img {
    transform: none;
  }
}