/* /guides/ home only, on top of category-list.css. No "lp-" classes: [class^="lp-"] forces the icon font. */

/* customizer-legacy.css forces ".blog main h1" (24px bold) on the posts page: restore the list pages' hero title (same DS tokens). */
.gh .hub-hero__title { font-size: var(--typography-headline-font-size-2, 32px); line-height: var(--typography-headline-line-height-2, 40px); font-weight: var(--typography-headline-font-weight, 500); color: var(--color-content-primary, #222222); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Shared. Greys on #F8F6F3: #6B6B6B min (4.5:1 contrast). */
.gh-section { padding-top: 56px; padding-bottom: 0; }
.gh .ds-cta { margin-top: 80px; } /* The CTA is the last section: space set on it, not on :last-of-type. */
.gh-h3 { margin: 0 0 16px; font: 500 18px/26px var(--cl-head); color: #222; }
.gh-h3 a { color: #222; text-decoration: none; transition: color .2s ease-out; }
.gh-h3 a:hover { color: var(--cl-accent); }
.gh-h3 a::after { content: " →"; color: var(--cl-accent); }
.gh-more { margin: 16px 0 0; text-align: right; }
.gh-more a { font: 400 14px/22px var(--cl-text); color: var(--cl-accent); text-decoration: none; }
.gh-more a:hover { text-decoration: underline; }
.gh-count { margin-left: 4px; font: 400 12px/22px var(--cl-text); color: #6B6B6B; }
.gh-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #E8F0FA; color: var(--cl-accent); }

/* Hero: text left, search panel right. */
.gh-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); /* 500px: Ivory's suggestion box width. */ gap: 48px; align-items: center; width: 100%; }
.gh-hero__text { display: flex; flex-direction: column; gap: 12px; }
.gh-trust { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 4px 0 0; padding: 0; list-style: none; font: 400 13px/20px var(--cl-text); color: #5E5E5E; }
.gh-trust li { position: relative; padding-left: 18px; }
.gh-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--cl-accent); font-weight: 500; }
.gh-search { margin: 0; padding: 24px; background: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(34, 34, 34, .06), 0 8px 24px rgba(34, 34, 34, .08); }
.gh-search__label { display: block; margin: 0 0 12px; font: 500 16px/24px var(--cl-head); color: #222; }
.gh-search__row { display: flex; gap: 8px; }
.gh-search__input { box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--cl-line); border-radius: 9999px; font: 400 15px/24px var(--cl-text); color: #222; }
.gh-search__input:focus { outline: 2px solid var(--cl-accent); outline-offset: 1px; border-color: transparent; }
.gh-search__btn { box-sizing: border-box; flex: 0 0 auto; height: 48px; padding: 0 20px; border: 0; border-radius: 9999px; background: var(--cl-accent); font: 500 15px/24px var(--cl-text); color: #fff; cursor: pointer; transition: background-color .2s ease-out; }
.gh-search__btn:hover { background: #00409D; }

/* Featured: 3 x 2 grid. */
.gh-featured__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }

/* Journey: 3 columns, head = icon + (title, count). */
.gh-journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gh-journey .cat-theme { margin-bottom: 0; padding: 28px; }
.gh-col__top { flex-wrap: nowrap; align-items: center; gap: 14px; margin-bottom: 8px; padding-top: 0; padding-bottom: 16px; border-bottom: 1px solid var(--cl-line); }
.gh-col__top::before { display: none; } /* Icon replaces the gold divider. */
.gh-col__head { display: flex; flex-direction: column; min-width: 0; }
.gh-col__count { font: 400 13px/18px var(--cl-text); color: #6B6B6B; }
.gh-links { columns: 1; }
.gh-statuses { margin-top: 32px; }
.gh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gh-chip { display: inline-block; padding: 8px 16px; border: 1px solid #E9D3A0; border-radius: 9999px; background: #FBF5E8; font: 500 14px/20px var(--cl-text); color: #222 !important; text-decoration: none !important; transition: border-color .2s ease-out, color .2s ease-out; }
.gh-chip:hover { border-color: #A87B1F; background: #F7EDD6; color: #222 !important; } /* Gold, like the resources icons. */

/* Trades + other topics: icon cards, whole card clickable. */
.gh-trades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.gh-other { grid-template-columns: repeat(4, 1fr); }
.gh-trade { position: relative; display: flex; align-items: flex-start; gap: 16px; height: 100%; padding: 20px; background: #F8F6F3; border: 1px solid transparent; border-radius: 2px; transition: border-color .2s ease-out, background-color .2s ease-out; }
.gh-trade:hover { border-color: var(--cl-accent); background: #fff; }
.gh-trade .gh-icon { background: #fff; }
.gh-trade__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gh-trade__title { margin: 0; font: 500 17px/24px var(--cl-head); color: #222; transition: color .2s ease-out; }
.gh-trade__title a { color: inherit !important; text-decoration: none !important; }
.gh-trade__title a::after { content: ""; position: absolute; inset: 0; }
.gh-trade:hover .gh-trade__title { color: var(--cl-accent); }
.gh-trade__ex { margin: 0; font: 400 13px/20px var(--cl-text); color: #5E5E5E; }
.gh-trade__count { margin-top: 4px; font: 500 13px/20px var(--cl-text); color: var(--cl-accent); }

/* Recent: one row of cards (scroll-snap on small screens, no JS). */
.gh-recent { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.gh-recent__card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; border: 1px solid var(--cl-line); border-top: 3px solid #DFB254; border-radius: 2px; background: #fff; transition: border-color .2s ease-out; }
.gh-recent__card:hover { border-color: var(--cl-accent); border-top-color: var(--cl-accent); }
.gh-recent__cat { font: 400 12px/18px var(--cl-text); color: #6B6B6B; }
.gh-recent__title { margin: 0; font: 500 15px/21px var(--cl-head); color: #222; }
.gh-recent__title a { color: inherit !important; text-decoration: none !important; }
.gh-recent__title a::after { content: ""; position: absolute; inset: 0; }
.gh-recent__card:hover .gh-recent__title { color: var(--cl-accent); }
.gh-recent__date { display: block; margin-top: auto; font: 400 12px/18px var(--cl-text); color: #6B6B6B; }

/* Resources: archive cards (trade card layout), gold icon like before. */
.gh-trade--res .gh-icon { background: #F7EDD6; color: #A87B1F; }
.gh-sim { margin: 16px 0 0; }
.gh-sim a { font: 500 14px/22px var(--cl-text); color: var(--cl-accent); text-decoration: none; }
.gh-sim a:hover { text-decoration: underline; }

/* Trades with a photo: square thumbnail left, text right (compact, same idea as the featured cards). */
.gh-trade--photo { align-items: stretch; gap: 0; padding: 0; overflow: hidden; background: #fff; border-color: var(--cl-line); }
.gh-trade--photo:hover { box-shadow: 0 8px 24px rgba(34, 34, 34, .08); }
.gh-trade__media { flex: 0 0 112px; min-height: 112px; overflow: hidden; background: #F8F6F3; } /* Fixed width: no layout shift. */
.gh-trade__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }
.gh-trade--photo:hover .gh-trade__img { transform: scale(1.05); }
.gh-trade--photo .gh-trade__body { justify-content: center; padding: 16px 20px; }

@media (max-width: 991px) {
  .gh-hero { grid-template-columns: 1fr; gap: 24px; }
  .gh-featured__list, .gh-trades, .gh-other { grid-template-columns: repeat(2, 1fr); }
  .gh-journey { grid-template-columns: 1fr; }
  .gh-recent { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .gh-recent > li { scroll-snap-align: start; }
  .gh .ds-cta { margin-top: 56px; }
}
@media (max-width: 767px) {
  .gh-section { padding-top: 40px; }
  .gh-search { padding: 16px; }
  .gh-search__row { flex-direction: column; }
  .gh-featured__list, .gh-recent { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .gh-featured__list > li, .gh-recent > li { scroll-snap-align: start; }
  .gh-trades, .gh-other { grid-template-columns: 1fr; }
  .gh-trade__media { flex-basis: 96px; min-height: 96px; }
}