/**
 * GUIDES LISTING
 * =========================================================================
 * Figma: node 95:15620 "Guides Page" (1440 x 2935).
 *
 * Self-contained: everything is in the .a3-gd-* namespace and loads only on
 * page-guides.php, so it shares nothing with service.css or blog-category.css
 * and cannot reach another template.
 *
 * The layout is the Blog Category listing's, and the numbers below are the
 * same ones BLOG-CATEGORY-PAGE.md records - hero 1440 x 540, 128px gutters
 * giving 1184 of content, main column 757.3, sidebar 330.7, rows 271.7. They
 * were re-read from this node rather than assumed; where the two designs
 * genuinely differ it is called out in the comment.
 *
 * One deliberate deviation: Figma puts this sidebar at x=1010 and 324 wide,
 * which ends 26px past the 1184 container every other section on the site
 * lines up with (the blog listing's own sidebar ends flush at 1312). The
 * shared container wins, as it does for the Technology Stack section in
 * desktop-refinements.css - so the sidebar is 330.7 on a 96px gap. The
 * difference is under 7px and invisible; being out of line with every other
 * section is not.
 *
 * Desktop is the measured design. There is no mobile frame, so §5 is
 * judgement, and says so.
 */

.a3-guides {
  /* 128 gutters -> 1184 content -> 757.3 main + 96 + 330.7 sidebar */
  --a3-gd-container: 1184px;
  --a3-gd-main: 757.3px;
  --a3-gd-gap: 96px;
  --a3-gd-sidebar: 330.7px;

  --a3-gd-ink: #030303;
  --a3-gd-body: #333333;
  --a3-gd-muted: #676f7b;
  --a3-gd-line: #e7eaf0;
  --a3-gd-wash: #f4f5f9;
  --a3-gd-card: #fcfcfd;
  --a3-gd-brand: #f97316; /* Figma's orange on this page, as on the blog listing */

  background: #ffffff;
}

/* =========================================================================
 * 1. HERO - node 95:15623 (1440 x 540)
 * ========================================================================= */

.a3-gd-hero {
  position: relative;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #1a1a1a;
}

.a3-gd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--a3-gd-hero-bg);
  background-size: cover;
  background-position: center;
}

/* Figma: GRADIENT_LINEAR #1A1A1A 90% -> 40%, handles [[0,.5],[1,.5]] - which
 * is a horizontal ramp, left to right, not a vertical one. */
.a3-gd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(26, 26, 26, 0.9),
    rgba(26, 26, 26, 0.4)
  );
}

.a3-gd-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 913px);
  text-align: center;
  color: #ffffff;
}

/* Figma: Inter 400, 64px, lh 93 (145.3%), tracking -2, box 913 wide. The
 * enormous line-height is the design's, not a typo - it is what gives the two
 * lines their spacing. */
.a3-gd-hero__heading {
  margin: 0;
  font-size: 64px;
  font-weight: 400;
  line-height: 93px;
  letter-spacing: -0.03125em; /* -2px at 64px */
  color: #ffffff;
}

/* Figma: 636.8 wide, centred, Inter 400 20/30, #D0D4D4 */
.a3-gd-hero__description {
  max-width: 636.8px;
  margin: 21px auto 0; /* heading box bottom 328 -> description 355 */
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: normal;
  color: #d0d4d4;
}

/* =========================================================================
 * 2. BODY - node 95:15805 (1440 x 1782)
 * ========================================================================= */

.a3-gd-body {
  padding: 96px 0 104px; /* section top 1157 -> header 1253; last row ends 2844 */
  background: #ffffff;
}

.a3-gd-container {
  display: grid;
  grid-template-columns: var(--a3-gd-main) var(--a3-gd-sidebar);
  column-gap: var(--a3-gd-gap);
  align-items: start;
  width: min(100% - 96px, var(--a3-gd-container));
  margin-inline: auto;
}

/* ---- 2.1 List header ----
 * Figma draws "Latest Guides" at 24/32 here, where the blog listing's "Latest
 * Stories" is 40/32. Asked for on the day to match the blog listing, so it is
 * 40 - the two lists sit next to each other in the nav and a 16px difference
 * in the same heading reads as a mistake rather than a decision. Everything
 * else about the row is Figma's, and this is a one-line revert. */
.a3-gd-main__header {
  padding-bottom: 17px;
  border-bottom: 1px solid var(--a3-gd-line);
}

.a3-gd-main__heading {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.025em; /* -0.6px at 24px */
  color: var(--a3-gd-ink);
}

/* ---- 2.2 Guide rows - node 95:15808 (757.3 x 271.7) ----
 * Thumbnail 296.9 x 222.7 at x=0, content column 428.4 at x=328.9 (a 32px
 * gap), 1px rule under every row but the last. */
.a3-gd-guide {
  display: grid;
  grid-template-columns: 296.9px minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
  /* Figma's rows sit on a 319.7 pitch: 222.7 of content, 48 of air, the 1px
   * rule, then 48 before the next row's content. The first row takes 40 from
   * the list header rather than 48. */
  padding: 48px 0;
  border-bottom: 1px solid var(--a3-gd-line);
  text-decoration: none;
}

.a3-gd-guide:first-child {
  padding-top: 40px; /* header rule bottom 1302 -> first row 1342 */
}

.a3-gd-guide:last-child {
  border-bottom: 0; /* Figma drops the rule on the last row, as the blog list does */
}

.a3-gd-guide__media {
  width: 296.9px;
  height: 222.7px;
  overflow: hidden;
  background: var(--a3-gd-wash);
}

.a3-gd-guide__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 0.85, 0.28, 1);
}

/* A logo standing in for a missing image wants containing and centring, not
 * cropping like a photo. */
.a3-gd-guide__thumb--placeholder {
  object-fit: contain;
  padding: 32px;
}

.a3-gd-guide:hover .a3-gd-guide__thumb:not(.a3-gd-guide__thumb--placeholder) {
  transform: scale(1.04);
}

/* Figma's meta line: category UPPER 12/16 tracking 0.6 #000, a #676F7B bullet,
 * then "N min read" 12/16 #676F7B with no tracking. */
.a3-gd-guide__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--a3-gd-muted);
}

.a3-gd-guide__category {
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #000000;
}

.a3-gd-guide__dot {
  color: var(--a3-gd-muted);
}

/* Figma: Inter 500, 24/31.2 (130%), tracking -0.6 */
/* Two lines, clamped. The design's rows are a fixed 271.7 and its title and
 * excerpt both run to exactly two lines; without the clamp a long title or a
 * verbose excerpt silently makes one row taller than its neighbours and the
 * whole column stops sitting on the 319.7 pitch. */
.a3-gd-guide__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 16.5px 0 0; /* meta bottom 16 -> title box 32.5 */
  font-size: 24px;
  font-weight: 500;
  line-height: 31.2px;
  letter-spacing: -0.025em;
  color: var(--a3-gd-ink);
  transition: color 0.25s ease;
}

.a3-gd-guide:hover .a3-gd-guide__title {
  color: var(--a3-gd-brand);
}

/* Figma: Inter 400, 14/22.75 (162.5%), #676F7B */
.a3-gd-guide__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 17.2px 0 0; /* title box bottom 93.2 -> excerpt 110.4 */
  font-size: 14px;
  font-weight: 400;
  line-height: 22.75px;
  letter-spacing: normal;
  color: var(--a3-gd-muted);
}

.a3-gd-guide__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34.8px; /* excerpt box bottom 155.9 -> avatar 190.7 */
}

/* 32 x 32 tile, #F4F5F9 on a 1px #E7EAF0 hairline, initial Inter 700 12/16 */
.a3-gd-guide__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: var(--a3-gd-wash);
  border: 1px solid var(--a3-gd-line);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  color: var(--a3-gd-ink);
}

.a3-gd-guide__author {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  color: var(--a3-gd-ink);
}

/* Right-aligned on the same line as the author - Figma puts it at x=662.7 in
 * a 757.3 row, i.e. hard right. */
.a3-gd-guide__date {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: normal;
  color: var(--a3-gd-muted);
}

/* ---- 2.3 Pagination (not in the design - the frame shows five guides and no
 * control, which usually means it was simply not drawn) ---- */
.a3-gd-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
}

.a3-gd-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--a3-gd-line);
  font-size: 14px;
  font-weight: 500;
  color: var(--a3-gd-ink);
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.a3-gd-pagination .page-numbers:hover,
.a3-gd-pagination .page-numbers.current {
  border-color: var(--a3-gd-brand);
  color: var(--a3-gd-brand);
}

.a3-gd-empty {
  margin: 48px 0 0;
  color: var(--a3-gd-muted);
}

/* =========================================================================
 * 3. SIDEBAR - node 101:17622 (itemSpacing 32)
 * ========================================================================= */

.a3-gd-sidebar > * + * {
  margin-top: 32px;
}

/* ---- 3.1 Lead-capture card - node 101:17624 (551.1 tall) ----
 * The same card as the blog listing, rebuilt in this namespace so the two
 * templates stay independent of each other. */

.a3-gd-cta {
  background: var(--a3-gd-card);
  border: 1px solid var(--a3-gd-line);
  box-shadow:
    0 1px 2px -1px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

.a3-gd-cta__media {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.a3-gd-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* #FCFCFD -> transparent, solid at the bottom, so the heading rises out of
 * the photo rather than butting against it. */
.a3-gd-cta__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--a3-gd-card), rgba(252, 252, 253, 0));
}

/* Figma padding: 24 left/right/bottom, none on top. */
.a3-gd-cta__body {
  padding: 0 24px 24px;
}

.a3-gd-cta__heading {
  margin: 0 0 24px;
  font-size: 21.6px;
  font-weight: 600;
  line-height: 29.7px;
  letter-spacing: -0.025em;
  color: var(--a3-gd-ink);
}

/* CF7 puts every field in its own <p>; the design's fields are a 13px
 * placeholder over a single bottom rule, 20px apart. */
.a3-gd-cta .wpcf7 p {
  margin: 0 0 20px;
}

.a3-gd-cta .wpcf7 p:last-of-type {
  margin-bottom: 0;
}

.a3-gd-cta .wpcf7-form-control-wrap {
  display: block;
}

.a3-gd-cta input[type="text"],
.a3-gd-cta input[type="email"],
.a3-gd-cta input[type="tel"],
.a3-gd-cta textarea {
  width: 100%;
  padding: 2px 0 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--a3-gd-line);
  border-radius: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 15.73px;
  color: var(--a3-gd-ink);
  box-shadow: none;
}

.a3-gd-cta textarea {
  height: 29px;
  min-height: 29px;
  resize: none;
  overflow: hidden;
}

.a3-gd-cta ::placeholder {
  color: #a0a0a0;
  opacity: 1;
}

/* global.css floors every button at min-height 56 and service.css forces
 * var(--primary) with !important on CF7 submits - both have to be undone for
 * Figma's 97 x 40 #F97316 button. */
.a3-gd-cta input.wpcf7-submit,
.a3-gd-cta .wpcf7 input[type="submit"] {
  display: block;
  width: auto;
  /* Centred, not right-aligned. Figma's row is SPACE_BETWEEN, which reads as
   * "push apart", but the button's measured position on the blog listing is
   * dead centre of the card - and that page is the one already signed off, so
   * every copy of this card matches it. See BLOG-CATEGORY-PAGE.md. */
  margin-inline: auto;
  padding: 10px 24px;
  min-height: 0;
  background: var(--a3-gd-brand) !important;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #ffffff;
  cursor: pointer;
}

/* Invisible, but still an inline box adding ~33px inside the submit row. */
.a3-gd-cta .wpcf7-spinner {
  position: absolute;
}

/* ---- 3.2 Featured author - node 101:17667 (324 x 365) ---- */

.a3-gd-author {
  padding: 24px;
  background: var(--a3-gd-card);
  border: 1px solid var(--a3-gd-line);
}

.a3-gd-author__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 4px;
  background: var(--a3-gd-wash);
  border: 1px solid var(--a3-gd-line);
  overflow: hidden;
  font-size: 20px;
  font-weight: 700;
  color: var(--a3-gd-ink);
}

.a3-gd-author__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inter 700 10/15, tracking 1, UPPER - and orange here, where the article
 * page's equivalent eyebrow is blue. */
.a3-gd-author__eyebrow {
  display: block;
  margin-top: 24px;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--a3-gd-brand);
}

.a3-gd-author__name {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 22.5px;
  letter-spacing: normal;
  color: var(--a3-gd-ink);
}

.a3-gd-author__role {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: normal;
  color: var(--a3-gd-muted);
}

.a3-gd-author__bio {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.75px;
  letter-spacing: normal;
  color: var(--a3-gd-body);
}

/* Figma: 274 x 42, label Inter 700 12/16 tracking 1.2 UPPER #030303. Drawn
 * without a fill or a stroke - a plain text button - so a hairline is added
 * to make it read as one. */
.a3-gd-author__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin-top: 20px;
  min-height: 0;
  border: 1px solid var(--a3-gd-line);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--a3-gd-ink);
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.a3-gd-author__btn:hover,
.a3-gd-author__btn:focus-visible {
  color: var(--a3-gd-brand);
  border-color: var(--a3-gd-brand);
}

/* ---- 3.3 Related Guides - node 101:17680 ---- */

.a3-gd-related__title {
  margin: 0 0 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--a3-gd-line);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--a3-gd-ink);
}

.a3-gd-related__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.a3-gd-related__item + .a3-gd-related__item {
  margin-top: 24px;
}

/* 80 x 80 thumb, 16px gap, 228 text column */
.a3-gd-related__link {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  text-decoration: none;
}

.a3-gd-related__thumb {
  display: block;
  width: 80px;
  height: 80px;
  background: var(--a3-gd-wash);
  border: 1px solid var(--a3-gd-line);
  overflow: hidden;
}

.a3-gd-related__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.a3-gd-related__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 19.25px;
  letter-spacing: normal;
  color: var(--a3-gd-ink);
  transition: color 0.2s ease;
}

.a3-gd-related__link:hover .a3-gd-related__name {
  color: var(--a3-gd-brand);
}

.a3-gd-related__read {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--a3-gd-muted);
}

/* =========================================================================
 * 4. RESPONSIVE
 *
 * No mobile frame in the file, so the breakpoints below are judgement and
 * follow the ones the rest of the theme already uses.
 * ========================================================================= */

@media (max-width: 1199.98px) {

  .a3-gd-container {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 48px;
    width: min(100% - 64px, var(--a3-gd-container));
  }

  .a3-gd-guide {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .a3-gd-guide__media {
    width: 240px;
    height: 180px;
  }
}

@media (max-width: 991.98px) {

  /* The sidebar drops below the list rather than being squeezed - at this
     width a 300px column leaves the guide rows too narrow to read. */
  .a3-gd-container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 64px;
  }

  .a3-gd-hero__heading {
    font-size: 46px;
    line-height: 1.2;
  }

  .a3-gd-hero__description {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 767.98px) {

  .a3-gd-hero {
    height: auto;
    min-height: 420px;
    padding: 72px 0;
  }

  .a3-gd-hero__heading {
    font-size: 34px;
  }

  .a3-gd-body {
    padding: 56px 0 64px;
  }

  .a3-gd-container {
    width: min(100% - 32px, var(--a3-gd-container));
  }

  /* Image over text - side by side leaves ~140px of copy on a phone. */
  .a3-gd-guide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    padding-top: 32px;
  }

  .a3-gd-guide__media {
    width: 100%;
    height: 200px;
  }

  .a3-gd-guide__title {
    font-size: 20px;
    line-height: 27px;
  }

  /* The date sits on the author's line at 1440; on a phone that row wraps,
     and margin-left:auto would strand it. */
  .a3-gd-guide__foot {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .a3-gd-guide__date {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* =========================================================================
 * 5. prefers-reduced-motion
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {

  .a3-gd-guide__thumb,
  .a3-gd-guide__title,
  .a3-gd-related__name,
  .a3-gd-author__btn,
  .a3-gd-pagination .page-numbers {
    transition: none;
  }

  .a3-gd-guide:hover .a3-gd-guide__thumb {
    transform: none;
  }
}

/* =========================================================================
 * 6. AUTHOR ARCHIVE - author.php
 *
 * No Figma frame exists for this page, so nothing here is measured against
 * one. It is the author card from the Guides sidebar (§3.2) laid out
 * horizontally as a page header; the list below it is the same .a3-gd-guide
 * row this file already defines, so the two pages cannot drift apart.
 * ========================================================================= */

.a3-au-hero {
  padding: 96px 0 64px;
  background: var(--a3-gd-card);
  border-bottom: 1px solid var(--a3-gd-line);
}

.a3-au-hero__inner {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
  width: min(100% - 96px, var(--a3-gd-container));
  margin-inline: auto;
}

/* The 64px sidebar tile at the larger size a page header wants. */
.a3-au-hero__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background: var(--a3-gd-wash);
  border: 1px solid var(--a3-gd-line);
  overflow: hidden;
  font-size: 32px;
  font-weight: 700;
  color: var(--a3-gd-ink);
}

.a3-au-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.a3-au-hero__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--a3-gd-brand);
}

/* The listing hero's 64px is too loud for a name; this is the article page's
 * h2 size, which is the next step down the scale the site already uses. */
.a3-au-hero__name {
  margin: 6px 0 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.025em;
  color: var(--a3-gd-ink);
}

.a3-au-hero__role {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--a3-gd-muted);
}

/* Same measure as the article body, so a long bio stays readable rather than
 * running the full 1184. */
.a3-au-hero__bio {
  max-width: 770px;
  margin: 20px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--a3-gd-body);
}

/* The author page has no list header rule above the first row, so the row's
 * own 40px top padding would read as a gap with nothing above it. */
.a3-author .a3-gd-body {
  padding-top: 64px;
}

@media (max-width: 991.98px) {

  .a3-au-hero {
    padding: 64px 0 48px;
  }

  .a3-au-hero__name {
    font-size: 30px;
    line-height: 36px;
  }
}

@media (max-width: 767.98px) {

  /* Avatar over the text: side by side leaves ~200px for the name on a phone. */
  .a3-au-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    width: min(100% - 32px, var(--a3-gd-container));
  }

  .a3-au-hero__avatar {
    width: 72px;
    height: 72px;
    font-size: 26px;
  }

  .a3-au-hero__name {
    font-size: 26px;
    line-height: 32px;
  }
}

/* A picture in the letter tiles: the tile keeps its box, the image fills it.
 * Set only when a Profile photo or a real Gravatar exists - see
 * a3_author_avatar_url() - so the initials remain the default. */
.a3-gd-guide__avatar img,
.a3-gd-guide__avatar {
  overflow: hidden;
}

.a3-gd-guide__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}