/* ============================================================
   HOMEPAGE RESOURCES  (template-parts/home-resources.php)
   Three tool links across the top, featured guides below. Section
   spacing, heading and eyebrow match the certificate spotlight above it;
   guide cards follow the blog cards (16:10 image, mono label, title).
   ============================================================ */
.home-resources { padding-block: 96px; background: var(--color-background); }
.home-resources__inner { width: 85%; margin-inline: auto; display: flex; flex-direction: column; gap: 3.5rem; }

.home-resources__hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(2rem, 6vw, 5rem); row-gap: 1.5rem; align-items: end;
}
.home-resources__eyebrow {
  font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgb(var(--color-foreground-rgb) / 0.55); margin: 0 0 1.5rem;
}
.home-resources__heading {
  font-family: var(--font-heading--family); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--color-foreground-heading); margin: 0;
}
/* One sentence per line. */
.home-resources__heading span { display: block; }
.home-resources__body {
  font-family: var(--font-body--family); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.6; color: rgb(var(--color-foreground-rgb) / 0.7); margin: 0; max-width: 44ch;
}

/* ---- Tools ---- */
.home-resources__tools {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
  margin: 0; padding: 0; list-style: none;
}
.home-resources__tool {
  display: flex; align-items: flex-start; gap: 1.125rem; height: 100%; box-sizing: border-box;
  padding: 1.5rem; border: 1px solid rgb(var(--color-foreground-rgb) / 0.12); border-radius: 16px;
  color: var(--color-foreground); text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.home-resources__tool:hover { border-color: rgb(var(--color-foreground-rgb) / 0.28); box-shadow: 0 18px 40px rgb(23 41 83 / 0.08); }
.home-resources__tool:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 3px; }
.home-resources__tool-icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 12px; background: #f6fbff; border: 1px solid #e1edf5; color: #075a87;
}
.home-resources__tool-icon svg { width: 24px; height: 24px; }
.home-resources__tool-text { display: flex; flex-direction: column; gap: 0.375rem; flex: 1 1 auto; min-width: 0; }
.home-resources__tool-title {
  font-family: var(--font-heading--family); font-size: 1.25rem; font-weight: 500; line-height: 1.2;
  color: var(--color-foreground-heading);
}
.home-resources__tool-desc { font-family: var(--font-body--family); font-size: 0.875rem; line-height: 1.5; color: rgb(var(--color-foreground-rgb) / 0.65); }
.home-resources__tool-arrow { flex: none; width: 20px; height: 20px; margin-block-start: 0.25rem; transition: transform 180ms ease; }
.home-resources__tool-arrow svg { width: 100%; height: 100%; }
.home-resources__tool:hover .home-resources__tool-arrow { transform: translateX(3px); }

/* ---- Featured guides ---- */
.home-resources__guides { display: flex; flex-direction: column; gap: 1.5rem; }
.home-resources__guides-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block-end: 1rem; border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
}
.home-resources__label {
  margin: 0; font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--color-foreground-rgb) / 0.55);
}
.home-resources__all {
  display: inline-block; padding-block: 0.6875rem; color: var(--color-foreground);
  font-family: var(--font-body--family); font-size: 0.9375rem; font-weight: 500;
  text-decoration: underline; text-underline-offset: 4px;
}
.home-resources__all:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 3px; border-radius: 4px; }

.home-resources__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem;
  margin: 0; padding: 0; list-style: none;
}
.home-resources__card { display: flex; flex-direction: column; height: 100%; color: var(--color-foreground); text-decoration: none; }
.home-resources__card:focus-visible { outline: 2px solid var(--color-foreground); outline-offset: 4px; }
.home-resources__image { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #eef1f3; }
.home-resources__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 260ms ease; }
.home-resources__card:hover .home-resources__image img { transform: scale(1.025); }
.home-resources__meta {
  margin-block-start: 1.25rem; font-family: var(--font-mono--family); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: #075a87;
}
.home-resources__title {
  margin: 0.625rem 0; font-family: var(--font-heading--family); font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: var(--color-foreground-heading);
}
.home-resources__summary {
  margin: 0; font-family: var(--font-body--family); font-size: 0.9375rem; line-height: 1.55;
  color: rgb(var(--color-foreground-rgb) / 0.65);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.home-resources__read { margin-block-start: auto; padding-block-start: 1.125rem; font-family: var(--font-body--family); font-size: 0.875rem; font-weight: 700; }
.home-resources__card:hover .home-resources__read { text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .home-resources__tool, .home-resources__tool-arrow, .home-resources__image img { transition: none; }
}

/* Below 1200px three tool cards squeeze their titles: they stack as rows. */
@media (max-width: 1199px) {
  .home-resources__tools { grid-template-columns: 1fr; gap: 0.75rem; }
  .home-resources__tool { align-items: center; padding: 1.125rem; }
  .home-resources__tool-arrow { margin-block-start: 0; }
}

/* Tablet: heading stacks over the text, each guide becomes a row with its
   image on the left. */
@media (max-width: 989px) {
  .home-resources__hero { grid-template-columns: 1fr; align-items: start; }
  .home-resources__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .home-resources__card {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto auto 1fr; column-gap: 1.5rem; align-items: start;
  }
  .home-resources__image { grid-column: 1; grid-row: 1 / span 4; }
  .home-resources__meta, .home-resources__title, .home-resources__summary, .home-resources__read { grid-column: 2; }
  .home-resources__meta { margin-block-start: 0; }
}

/* Phone: guides stack, image on top. */
@media (max-width: 749px) {
  .home-resources { padding-block: 64px; }
  .home-resources__inner { width: 100%; box-sizing: border-box; padding-inline: 1.25rem; gap: 2.25rem; }
  .home-resources__tool-icon { width: 44px; height: 44px; }
  .home-resources__tool-icon svg { width: 22px; height: 22px; }
  .home-resources__tool-title { font-size: 1.125rem; }
  .home-resources__tool-desc { font-size: 0.8125rem; }
  .home-resources__grid { gap: 2.5rem; }
  .home-resources__card { display: flex; flex-direction: column; }
  .home-resources__meta { margin-block-start: 1.25rem; }
}