/* Services card grid. Replaces the ten-row accordion on the home page.

   Two rows of five at a desktop width, each card flipping to its questions.
   Class names are new rather than reusing .r8-pathway, so the old rules in
   expansion.css, r8-brand.css and r8-responsive.css cannot fight this one and
   the FAQ, which shares .r8-plus, is untouched. */

.r8-card-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:22px;grid-template-columns:repeat(5,1fr);
}

.r8-card-grid .r8-card{perspective:1600px}

/* Both faces share one grid cell, so a card is exactly as tall as its taller
   face. Nothing is clipped, no face ever needs to scroll, and the fine print
   keeps a readable size whatever the column width. */
.r8-card-grid .r8-card-inner{
  display:grid;height:100%;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
  transform-style:preserve-3d;
}
.r8-card-grid .r8-card.is-open .r8-card-inner{transform:rotateY(180deg)}

.r8-card-grid .r8-face{
  grid-area:1/1;backface-visibility:hidden;
  border:1px solid #92765f;background:#5a0f1b;
  display:flex;flex-direction:column;text-align:left;overflow:hidden;
}

/* Front */

.r8-card-grid .r8-card-front{color:inherit;font:inherit;padding:0;width:100%;cursor:pointer}
/* A ratio, not a pixel height. A fixed height made the visible slice of each
   photo change with the column width, so a face framed at 1920 lost its chin at
   1440. At 1.6 the box is always half the photo's height, which is what the
   per-photo object-position values in expansion.js are set against. */
.r8-card-grid .r8-card-front img{width:100%;aspect-ratio:1.6;height:auto;object-fit:cover;flex:none}
.r8-card-grid .r8-card-front h3{font:400 21px/1.2 Georgia,serif;letter-spacing:-.3px;margin:18px 20px 0}
.r8-card-grid .r8-card-line{font-size:12px;letter-spacing:.4px;color:#c2a15e;margin:8px 20px 0}
.r8-card-grid .r8-card-copy{font-size:13px;line-height:1.6;color:#ded0c3;margin:12px 20px 0}
.r8-card-grid .r8-card-cue{
  margin:auto 20px 18px;padding-top:14px;
  border-top:1px solid rgba(247,242,232,.2);
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.r8-card-grid .r8-card-cue i{font-style:normal;font-size:18px;color:#c2a15e;transition:transform .25s}

/* Back */

.r8-card-grid .r8-card-back{
  transform:rotateY(180deg);padding:20px;
  background:#f7f2e8;color:#31080f;border-color:#f7f2e8;
}
.r8-card-grid .r8-card-back h4{font:400 18px/1.25 Georgia,serif;letter-spacing:-.2px;margin:0 0 12px}
.r8-card-grid .r8-card-back h4:focus{outline:none}
.r8-card-grid .r8-card-back ul{margin:0 0 12px;padding-left:16px;font-size:12px;line-height:1.65;color:#4a3a36}
.r8-card-grid .r8-card-back li{margin-bottom:7px}
.r8-card-grid .r8-card-back li strong{font-weight:400;color:#5a0f1b}
.r8-card-grid .r8-card-fine{font-size:11px;line-height:1.6;color:#6b5953;margin:0 0 14px}
.r8-card-grid .r8-card-more{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;font-size:12px;color:#5a0f1b;
  text-decoration:none;border-bottom:1px solid #5a0f1b;
}
.r8-card-grid .r8-card-close{
  margin-top:auto;align-self:flex-start;
  background:none;border:0;padding:12px 0 0;min-height:44px;cursor:pointer;
  font:inherit;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#5a0f1b;
}

@media (hover:hover) and (pointer:fine){
  .r8-card-grid .r8-card-front:hover{border-color:#f7f2e8}
  .r8-card-grid .r8-card-front:hover .r8-card-cue i{transform:rotate(90deg)}
}

/* Anyone who has switched motion off gets a cross-fade, not a 3D rotation. */
@media (prefers-reduced-motion:reduce){
  .r8-card-grid .r8-card-inner{transition:none;transform-style:flat}
  .r8-card-grid .r8-card.is-open .r8-card-inner{transform:none}
  .r8-card-grid .r8-card-back{transform:none;opacity:0;pointer-events:none}
  .r8-card-grid .r8-card.is-open .r8-card-back{opacity:1;pointer-events:auto}
  .r8-card-grid .r8-card.is-open .r8-card-front{opacity:0;pointer-events:none}
}

/* Responsive last. Five across holds as far down as a card still reads, by
   shrinking the card rather than dropping to four columns, which would make
   three rows and a taller section than the list this replaces. */

@media (max-width:1560px){
  .r8-card-grid{gap:16px}
  .r8-card-grid .r8-card-front h3{font-size:19px;margin:15px 16px 0}
  .r8-card-grid .r8-card-line, .r8-card-grid .r8-card-copy, .r8-card-grid .r8-card-cue{margin-left:16px;margin-right:16px}
  .r8-card-grid .r8-card-copy{font-size:12.5px}
  .r8-card-grid .r8-card-back{padding:16px}
  .r8-card-grid .r8-card-back ul{font-size:11.5px}
}

@media (max-width:1180px){ .r8-card-grid{grid-template-columns:repeat(4,1fr)} }

/* Below a tablet the card lies down into a row, and the faces swap instead of
   stacking. Ten stacked portrait cards come to 3572px, which is longer than the
   list this replaces, and stacking would reserve every back's height. */
@media (max-width:1000px){
  .r8-card-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .r8-card-grid .r8-card-inner{display:block;transform:none!important;transform-style:flat}
  .r8-card-grid .r8-face{grid-area:auto;backface-visibility:visible;transform:none}
  .r8-card-grid .r8-card:not(.is-open) .r8-card-back{display:none}
  .r8-card-grid .r8-card.is-open .r8-card-front{display:none}
  .r8-card-grid .r8-card-front{display:grid;grid-template-columns:84px 1fr;align-items:start}
  .r8-card-grid .r8-card-front img{width:84px;height:auto;aspect-ratio:auto;align-self:stretch;grid-row:1/5}
  .r8-card-grid .r8-card-front>:not(img){margin-left:14px;margin-right:14px}
  .r8-card-grid .r8-card-front h3{font-size:17px;line-height:1.15;margin-top:14px}
  .r8-card-grid .r8-card-line{font-size:11px;margin-top:5px}
  .r8-card-grid .r8-card-copy{display:none}
  .r8-card-grid .r8-card-cue{margin-bottom:14px;padding-top:10px;border-top:0;font-size:10px;letter-spacing:1.2px}
  .r8-card-grid .r8-card-back{display:block;padding:16px}
  .r8-card-grid .r8-card-back h4{font-size:17px}
  .r8-card-grid .r8-card-back ul{font-size:12px}
  .r8-card-grid .r8-card-fine{font-size:11px}
  /* The back face is display:block here, so these two would sit on one line
     with the link's underline running into the Back label. */
  .r8-card-grid .r8-card-close{display:block;margin-top:14px}
}

@media (max-width:620px){ .r8-card-grid{grid-template-columns:1fr} }