/* ==========================================================================
   HOMEPAGE TRUST CARDS — four image cards
   Created 2026-09-08. Reference (approved):
     Website Media/70 Custom Roofs/Sunroof-King-Four-Trust-Cards.png

   REPLACES two things that used to sit between the hero and the service
   directory, both of which existed ONLY on the homepage:
     .hero-badges  — the beige four-icon trust bar inside the hero grid
     .trust-strip  — the black information strip below it
   Their rules are still in home.css because that sheet is shared by ~24 other
   pages and is not reopened for this change; with the markup gone they simply
   match nothing on this page.

   SCOPE: every selector below is under .trust-cards, a section that exists
   only on index.html. This file is linked ONLY by index.html and loads AFTER
   home.css.

   The reference is a single flattened banner. It is deliberately NOT used as
   one: the four photographs are cropped out into four separate optimised
   files under assets/trust/, and the headings, captions and red accents are
   real HTML and CSS. That keeps the text selectable, translatable, resizable
   and readable to a screen reader, and lets each card be its own link.
   ========================================================================== */

.trust-cards{
  background:var(--white);
  /* .hero has no bottom padding and the black strip that used to bridge this
     gap is gone, so this padding now owns the whole hero -> cards transition.
     The 6px bottom sits against .directory-section's own 44px top padding. */
  padding:38px 0 6px;
}

/* The section needs a heading for structure, but the approved reference does
   not show one, so it is available to assistive technology and not painted. */
.trust-cards .tc-sr-only{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.trust-cards .tc-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  list-style:none;
  margin:0;
  padding:0;
}

/* --------------------------------------------------------------------------
   THE CARD
   The whole card is one <a>, so the image, the heading and the caption are a
   single target - there is no separate "read more" to hunt for.
   -------------------------------------------------------------------------- */
.trust-cards .tc-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;                /* clips the image to the top corners */
  text-decoration:none;
  color:inherit;
  box-shadow:0 1px 2px rgba(23,20,18,0.05), 0 8px 20px rgba(23,20,18,0.09);
  transition:transform 0.16s ease, box-shadow 0.16s ease;
}
.trust-cards .tc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(23,20,18,0.07), 0 16px 34px rgba(23,20,18,0.16);
}
.trust-cards .tc-card:active{ transform:translateY(0); }
.trust-cards .tc-card:focus-visible{
  outline:3px solid var(--red);
  outline-offset:3px;
}

.trust-cards .tc-media{
  display:block;
  line-height:0;
  background:var(--gray-light);   /* holds the box before the file decodes */
}
.trust-cards .tc-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:507 / 445;         /* the crop's own ratio - no letterboxing */
  object-fit:cover;
}

.trust-cards .tc-body{
  padding:16px 18px 20px;
}

/* the short red accent above each heading */
.trust-cards .tc-rule{
  display:block;
  width:38px; height:4px;
  border-radius:2px;
  background:var(--red);
  margin-bottom:11px;
}

/* Arial, not the Georgia that h1-h3 inherit sitewide - the reference sets
   both lines in the same sans as the body copy. */
.trust-cards .tc-title{
  font-family:var(--font-body);
  font-size:1.24rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--black);
  margin:0 0 5px;
}
.trust-cards .tc-caption{
  font-family:var(--font-body);
  font-size:0.97rem;
  line-height:1.45;
  color:var(--charcoal-soft);
  margin:0;
}

@media (prefers-reduced-motion: reduce){
  .trust-cards .tc-card{ transition:none; }
  .trust-cards .tc-card:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   Four across, then two, then one. The cards never go below a comfortable
   tap target: at 520px and under each card is the full column width.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px){
  .trust-cards .tc-grid{ grid-template-columns:repeat(2, 1fr); gap:18px; }
}
@media (max-width: 700px){
  .trust-cards{ padding:30px 0 4px; }
  .trust-cards .tc-title{ font-size:1.16rem; }
}
@media (max-width: 520px){
  .trust-cards .tc-grid{ grid-template-columns:1fr; gap:16px; }
  .trust-cards .tc-body{ padding:15px 17px 18px; }
}