/* =====================================================================
   1THWORLD(TM) BANNER AD BAYS
   ---------------------------------------------------------------------
   Every bay prints TWO banners side by side. No box, no border - the
   banners just sit on the page.

   THE SIZE PROBLEM: the gifs in images/bays/ are all over the place
   (200x40 up to 740x150). But 18 of the 33 are the classic 468x60
   banner, so 468x60 is the house size - every slot on the site is that
   exact shape, scaled down to fit the page (351x45 on a full-width
   page). The slots are ALWAYS identical to each other and always this
   shape, no matter the screen, so the row is symmetrical and the page
   reserves the space before the gifs load.

   The gif files themselves are never touched - the scaling is all here.
   ===================================================================== */

:root {
  --bay-w: 351px;        /* 468 x 0.75 - two of these + the gap fit the 760 table */
  --bay-h: 45px;         /* 60 x 0.75 - must match --bay-w / --bay-ratio */
  --bay-ratio: 468 / 60; /* the house banner shape */
  --bay-gap: 14px;
}

.bay {
  margin: 14px auto;
  text-align: center;
  line-height: 1;
}

.baytag {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: #8A8A8A;
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* the pair. two identical slots, side by side, centred as a unit. */
.bayrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bay-gap);
  width: 100%;
  margin: 0 auto;
}

/* one clickable slot -> a random shirt.
   The two slots share one flex-basis and one max-width, so they are always
   exactly equal to each other; in a narrow column (the guestbook-thanks
   card) they shrink together and stay symmetrical instead of one wrapping.

   NOTE the basis is --bay-w and NOT 0. A zero basis makes the slot's
   max-content width zero, and inside anything that sizes to its content
   (a table cell) the whole row then collapses to nothing and the ads go
   invisible. Give the slot a real intrinsic width and that can't happen.

   The explicit height is the floor: if aspect-ratio doesn't apply for any
   reason, the slot is still 45px tall rather than 0. Where aspect-ratio
   works (everywhere current) it takes over and keeps the shape exact at
   any width. */
.bayslot {
  flex: 1 1 var(--bay-w);
  min-width: 0;
  max-width: var(--bay-w);
  height: var(--bay-h);
  display: block;
  overflow: hidden;
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}
@supports (aspect-ratio: 468 / 60) {
  .bayslot { height: auto; aspect-ratio: var(--bay-ratio); }
}

/* DEFAULT: fill the slot exactly. Set by bays.js on banners already at (or
   near) the house 468x60 shape, so they render at identical dimensions
   with no visible distortion. */
.bayimg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border: 0;
}

/* the strays. Banners whose shape is too far from 468x60 to stretch
   without smearing (the 600x180, the 200x40, the 582x54) are fitted
   inside the same slot instead - undistorted, centred, same footprint. */
.bayimg.bayfit {
  object-fit: contain;
  object-position: center;
}

/* a small gif blown up to slot size goes blurry, which reads as a mistake.
   Kept crunchy instead - which reads as 2003. */
.bayimg.baycrunch {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* skinny screens: stack them. Same shape, same size as each other. */
@media (max-width: 520px) {
  .bayrow { flex-wrap: wrap; gap: 8px; }
  .bayslot { flex: 1 1 100%; max-width: var(--bay-w); }
}