/* APHA Partners. Owns .apha-pl* only. Section-level classes belong to the APHA
   Section Library and must not be styled from here. */

/* ============================================================
 * Partner logo strip (.apha-pl)
 *
 * Two layouts off one set of tiles: --carousel runs continuously, --grid shows
 * every logo at once. The tile is the reason both look like one component.
 *
 * Every logo sits on a white tile, and that is not decoration. Of the partner
 * files supplied, four are opaque JPEGs whose background is baked in (one navy,
 * one bright green, one near black) and several PNGs carry a white box. Dropped
 * straight onto the cream band those read as a row of mismatched rectangles.
 * A uniform white tile absorbs the white ones and turns the dark ones into
 * deliberate framed cards. It matches the treatment the Business Partners page
 * already uses.
 * ============================================================ */

.apha-pl{font-family:Figtree,sans-serif;width:100%;max-width:100%;min-width:0;}

.apha-pl__heading{font-family:Cardo,serif;font-weight:700;font-size:34px;line-height:1.2;
  color:#1A1F2E;text-align:center;margin:0 0 22px;}

/* The resting state is a hand-scrollable row. With no JavaScript, or with
   reduced motion, every partner past the edge is still reachable by drag,
   trackpad or keyboard. JS adds .is-running only once it takes the strip over,
   and only then does the box start clipping. */
.apha-pl__clip{position:relative;width:100%;max-width:100%;min-width:0;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}

/* overflow:clip, not hidden, where the browser has it. An overflow:hidden box
   is still a scroll container, so focusing a tile outside it makes the browser
   scroll the box while the animation is moving the track, and the two fight
   until the strip is permanently offset. A clip box is not scrollable at all,
   which leaves the JS as the only thing moving anything. hidden stays as the
   fallback declaration for older browsers. */
.apha-pl.is-running .apha-pl__clip{overflow:hidden;overflow:clip;}

/* Soft edges so logos enter and leave instead of being sliced by a hard line.
   Only while running: a scrollable strip needs its last tile fully legible. */
.apha-pl.is-running .apha-pl__clip{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);}

.apha-pl__track{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
  gap:20px;margin:0;padding:0;list-style:none;}
.apha-pl.is-running .apha-pl__track{will-change:transform;}
/* Fewer partners than fit across the band: nothing wraps, nothing scrolls, so
   the row simply centres itself. */
.apha-pl.is-static .apha-pl__track{justify-content:center;}

.apha-pl__track--grid{flex-wrap:wrap;justify-content:center;gap:20px;}

/* min-width:0 on the cell as well as the clip. Flex items default to
   min-width:auto and refuse to shrink below their content, which is the exact
   mechanism that drags a page into horizontal scroll at 390px. */
.apha-pl__cell{flex:0 0 auto;min-width:0;margin:0;padding:0;list-style:none;}

/* ============================================================
 * Card
 *
 * Name above, logo below, the whole card is the link. The logo lives in its
 * own boxed image area, so a JPEG with a baked-in background simply fills that
 * area instead of floating as a mismatched rectangle: partners no longer need
 * a transparent cutout. Card width is fixed for the same reason the old tiles
 * were: logos run from 5.6:1 to 1:1 and the strip must not let the widest one
 * dominate. The name row is one line with an ellipsis, so a long name changes
 * nothing about the card's size.
 * ============================================================ */
.apha-pl__item{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:10px;
  box-sizing:border-box;width:200px;padding:12px;background:#FFFFFF;border:1px solid #EFE8D5;
  border-radius:10px;box-shadow:0 1px 2px rgba(15,20,32,0.06);}
/* Two lines, always reserved. A name that fits on one line sits centred in a
   two-line box, so every card in a row is the same height whether the partner
   is "YETI" or "Spartan Precision Equipment". Anything longer clamps. */
.apha-pl__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  font-family:Figtree,sans-serif;font-size:12px;font-weight:700;line-height:1.3;
  letter-spacing:1px;text-transform:uppercase;color:#4A4E5A;text-align:center;
  height:calc(2 * 1.3em);overflow:hidden;align-content:center;}
.apha-pl__logo{display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:84px;padding:8px 10px;border-radius:6px;background:#FFFFFF;overflow:hidden;font-size:0;line-height:0;}
.apha-pl__item.is-dark .apha-pl__logo{background:#0F1420;}
.apha-pl__img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.apha-pl__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

a.apha-pl__item{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
a.apha-pl__item:hover{border-color:#D9CFB3;box-shadow:0 6px 18px rgba(15,20,32,0.10);transform:translateY(-2px);}
a.apha-pl__item:hover .apha-pl__name{color:#667D59;}
a.apha-pl__item:focus-visible{outline:2px solid #BA8900;outline-offset:3px;}

@media (max-width:600px){
  .apha-pl__heading{font-size:26px;}
  .apha-pl__item{width:160px;padding:10px;gap:8px;}
  .apha-pl__logo{height:68px;}
  .apha-pl__track,.apha-pl__track--grid{gap:14px;}
  .apha-pl.is-running .apha-pl__clip{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);}
}

/* Reduced motion is answered in both layers. The script never starts the loop;
   this hands the strip back as something the visitor scrolls at their own pace,
   with snap points so it comes to rest on a card rather than half of one. The
   transform reset covers an OS setting changed after the page loaded, since the
   script reads the preference once. */
@media (prefers-reduced-motion:reduce){
  .apha-pl.is-running .apha-pl__clip{overflow-x:auto;overflow-y:hidden;
    -webkit-mask-image:none;mask-image:none;scroll-snap-type:x proximity;}
  .apha-pl__track{transform:none !important;}
  .apha-pl__cell{scroll-snap-align:center;}
  a.apha-pl__item{transition-duration:.01s;}
  a.apha-pl__item:hover{transform:none;}
}

/* The theme and the Elementor kit both style bare <a> elements: a global link
   colour from .elementor-kit-NN a, an underline on hover, and Hello Elementor's
   own img rules on top. A partner card is not a text link, and every one of
   those has to be beaten back. Class on class plus !important on each property
   the kit touches, kept in one block so it is obvious what it is for. The
   font-size reset lives on the logo box only: on the card it would erase the
   name. Verify in the browser's computed styles, not in this file. */
.apha-pl .apha-pl__item{color:inherit !important;text-decoration:none !important;
  background-color:#FFFFFF !important;background-image:none !important;
  border:1px solid #EFE8D5 !important;border-radius:10px !important;
  width:200px !important;height:auto !important;min-width:0 !important;max-width:none;
  padding:12px !important;margin:0 !important;}
.apha-pl .apha-pl__item:hover{color:inherit !important;text-decoration:none !important;
  background-color:#FFFFFF !important;border-color:#D9CFB3 !important;}
.apha-pl .apha-pl__name{color:#4A4E5A !important;text-decoration:none !important;font-size:12px !important;line-height:1.3 !important;}
.apha-pl a.apha-pl__item:hover .apha-pl__name{color:#667D59 !important;}
.apha-pl .apha-pl__img{max-width:100% !important;max-height:100% !important;
  width:auto !important;height:auto !important;}
.apha-pl .apha-pl__item.is-dark .apha-pl__logo{background-color:#0F1420 !important;}
@media (max-width:600px){
  .apha-pl .apha-pl__item{width:160px !important;padding:10px !important;}
}

/* ============================================================
 * Described cards (.apha-pl--cards)
 *
 * The Conservation Partners layout. A gear brand is recognised from its logo
 * alone; a conservation organisation is not, so this pairs the logo with the
 * name, a sentence about the work, and its own link.
 *
 * A separate element class from .apha-pl__item on purpose. The tile carries a
 * block of !important width and padding overrides further up this file, written
 * to beat the Elementor kit's bare-<a> styling, and every one of them is wrong
 * for a card that has to grow to fit a paragraph.
 *
 * Auto-fit rather than fixed columns: the count is whatever the office has
 * entered, and this page has run at two and at six.
 * ============================================================ */
.apha-pl__track--cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  flex-wrap:wrap;align-items:stretch;justify-content:stretch;gap:24px;}
/* The cells are grid items here, not flex items, so the tile's flex:0 0 auto
   would pin them to their content width. */
.apha-pl__track--cards > .apha-pl__cell{flex:initial;display:flex;}

.apha-pl__card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  box-sizing:border-box;width:100%;padding:24px;background:#FFFFFF;
  border-radius:10px;box-shadow:0 6px 22px rgba(15,20,32,0.08);}

/* Contained, never cropped. Logos here run from a wide wordmark to a round seal,
   and a fixed box with object-fit:contain is what stops the round ones being
   rendered at four times the height of the wide ones. */
/* Full width of the card and centred, so the logo reads as the card's mark
   rather than as a small icon tucked into its top-left corner. 130px because
   these run from a wide wordmark (WSF, 2.2:1) to a round seal (ADF&G, 1:1):
   object-fit:contain means the tall ones set the height and the wide ones set
   the width, so the box has to clear the tallest without letting the widest
   overflow. align-self:stretch is what lets it span the card's padding box,
   since the card itself is align-items:flex-start. */
.apha-pl__cardlogo{display:flex;align-items:center;justify-content:center;
  align-self:stretch;box-sizing:border-box;height:130px;max-width:100%;
  padding:4px 0;overflow:hidden;font-size:0;line-height:0;}
.apha-pl__card.is-dark .apha-pl__cardlogo{align-self:stretch;justify-content:center;
  background:#0F1420;border-radius:6px;padding:8px 12px;}

.apha-pl__cardname{font-family:Cardo,serif;font-weight:700;font-size:24px;line-height:1.3;
  color:#1A1F2E;margin:0;}
/* Grows to absorb the height difference between cards, so every "Visit" link in
   a row lands on the same baseline. Same rule the Elementor card grid uses. */
.apha-pl__carddesc{flex:1 1 auto;font-family:Figtree,sans-serif;font-size:15px;line-height:1.6;
  color:#4A4E5A;margin:0;}

/* margin-top:auto, not just the description's flex-grow. A partner saved with no
   description has nothing to absorb the slack, so its button floated up beside
   neighbours whose buttons sat at the bottom of a stretched grid row. */
.apha-pl__cardlink{margin-top:auto;display:inline-block;font-family:Figtree,sans-serif;font-size:15px;
  font-weight:700;line-height:1;color:#FFFFFF;background:#667D59;border-radius:8px;
  padding:14px 24px;text-decoration:none;transition:background-color .2s ease;}
.apha-pl__cardlink:hover,.apha-pl__cardlink:focus{background:#566B4B;color:#FFFFFF;text-decoration:none;}
.apha-pl__cardlink:focus-visible{outline:2px solid #BA8900;outline-offset:3px;}

@media (max-width:600px){
  .apha-pl__track--cards{grid-template-columns:1fr;gap:18px;}
  .apha-pl__card{padding:20px;gap:12px;}
  .apha-pl__cardname{font-size:21px;}
  .apha-pl__cardlogo{height:104px;}
}

/* Same fight as the tile block above: the Elementor kit styles bare <a>, and
   Hello Elementor ships its own img rules. Scoped to the card classes so none of
   the tile's fixed-width overrides can reach these. */
.apha-pl .apha-pl__cardlink{color:#FFFFFF !important;text-decoration:none !important;
  background-color:#667D59 !important;background-image:none !important;
  width:auto !important;max-width:none;margin:0 !important;}
.apha-pl .apha-pl__cardlink:hover{color:#FFFFFF !important;text-decoration:none !important;
  background-color:#566B4B !important;}
.apha-pl .apha-pl__cardlogo .apha-pl__img{max-width:100% !important;max-height:100% !important;
  width:auto !important;height:auto !important;object-fit:contain;}