/* Drake KB — HOME PAGE.
 *
 * A port of the REAL Drake KB home, https://kb.drakesoftware.com/kb/Drake-Home.htm.
 * Everything below traces to markup in `migration/raw/Drake-Home.html` (a byte-identical
 * copy of the live page — verified with diff) and to two of Drake's own stylesheets,
 * fetched and read rather than guessed:
 *
 *   Resources/Stylesheets/Drake Software - KB Home.css   the home-specific layout
 *   Resources/Branding/Branding.css                      --Primary #1b75bc, --Light #DADEE1
 *
 * DRAKE'S ACTUAL PAGE STRUCTURE (in source order):
 *   div.topic-hero        h1 "Drake Software Knowledge Base"  <- display:none in
 *                            Drake's own CSS, commented "Hidden for SEO purposes"
 *                         h2 "How can we help?"  48pt, centered, --Primary
 *   div.search-container  one search field, placeholder "Search our help and
 *                         documentation", plus a product filter beside it. Drake's
 *                         LIVE filter is hard-wired to a single option, "All
 *                         products", so it filters nothing; ours is in the same slot
 *                         but populated with the ten real products their HEADER
 *                         filter offers (from their kb/Data/Filters.js), and it does
 *                         filter. That is a deliberate improvement on Drake, not a
 *                         divergence in layout — see .drake-home__search-filter.
 *   div.Tiles-6-3-3       a 6-cell responsive grid on a pale blue band (#e8f1fc,
 *                         hairline top+bottom). Cell 1 is a 50%-wide, 500px-tall
 *                         PANEL titled "Trending Articles" holding six article
 *                         links. Cells 2-6 are 240px-tall CLICKABLE TILES, each a
 *                         label over a background icon: 23%, 23%, 14.6%, 14.6%,
 *                         14.6%. So the row is NOT eight equal tiles.
 *   div.home-section      h2 "Frequently Asked Questions" with a 5px --Primary
 *                         left bar, then TWELVE MadCap dropdowns (accordions),
 *                         each `border-bottom: 1px solid var(--Light)`.
 *   p.mountain            a decorative line-art mountain range, full width, web
 *                         only (mc-conditions 'Online Format.Web').
 *
 * The 6-3-3 widths, the 500px/240px heights, #e8f1fc, the 48pt h2, the 1.4em tile
 * titles and the 5px section bar are all Drake's own numbers, not invented ones.
 *
 * WHY THIS FILE IS ~ALL NEW: it previously held only a CSS-grid patch for the
 * BetterDocs `categorygrid` block, which is what the home page used to render (an
 * auto grid of all 19 categories). Drake's home has no category grid at all, so
 * that block is gone from the front page and the patch has nothing left to style
 * on "/". Those rules are kept at the END of this file, but see the honest note
 * there: they currently match NO reachable page.
 *
 * Scope: every selector is under `.drake-home` (the wrapper in
 * site-templates/pages/homepage.html) except the retained categorygrid block at
 * the bottom, so nothing here can leak into an article, a rail, or the chrome.
 */

/* --- Page canvas ---------------------------------------------------------- */

/* Drake's home is white edge to edge (`div.topic-hero { background:#ffffff }`),
 * unlike the article pages' grey. The theme's own content wrapper is centered
 * and padded; the tiles band and the mountains are full-bleed on Drake, so pull
 * the wrapper's horizontal padding back to zero for this page only and let each
 * section set its own inset. */
.drake-home {
  font-family: var(--drake-font);
  color: #565656; /* Drake's home p color */
  background: #fff;
}

/* The core/post-content wrapper and the theme's constrained layout both inset
 * and cap the width. Cancel that so the pale tiles band and the mountains reach
 * the viewport edges as they do on Drake. */
body.home .entry-content:has(> .drake-home),
body.home .wp-block-post-content:has(> .drake-home) {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Hero: h1 (SEO-only) + h2 + search ------------------------------------ */

.drake-home__hero {
  padding: 60px 24px 50px; /* Drake: 60px top / 50px bottom */
  background: #fff;
  text-align: center;
}

/* Drake hides the h1 in their own stylesheet, with the comment "Hidden for SEO
 * purposes" — so the visible page starts at "How can we help?".
 * (NB: do NOT paste that comment here verbatim with its delimiters. CSS comments
 * do not nest, so an inner close-comment ends THIS comment early and every rule
 * after it is parsed as garbage — which is exactly what happened on the first
 * pass: the h1 rendered full size and the tile grid collapsed to one column.)
 * The h1 is kept in the DOM rather than removed for the same reason Drake keeps
 * it: it is the
 * page's only h1 and search engines read it. clip-path/1px, not display:none,
 * so it stays in the accessibility tree for screen readers. */
.drake-home__h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 48pt = 64px in Drake's CSS. Clamped so it doesn't overflow a narrow window
 * (Drake's own mobile rule only drops line-height, and the text does crowd). */
.drake-home__h2 {
  margin: 0 0 30px; /* Drake: padding-bottom 30px */
  padding: 0;
  border: 0;
  font-family: var(--drake-font-heading);
  font-size: clamp(30px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--drake-blue); /* var(--Primary) #1b75bc */
  background: #fff;
  text-align: center;
}

/* Search: Drake's own `div.search-group` / `input.search-input` /
 * `button.search-button` rules — 705px max, pill ends (20px radius on the outer
 * corners only), 2px --Primary border on the field, solid --Primary button. */
.drake-home__search {
  display: flex;
  width: 100%;
  max-width: 705px;
  margin: 0 auto;
  border-radius: 20px;
}

.drake-home__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.drake-home__search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 16px 0 40px; /* Drake: padding-left 40px (room for the icon) */
  font-family: inherit;
  font-size: 16px;
  color: var(--drake-ink);
  background-color: #fff;
  /* Magnifier drawn in the padding, matching the icon Drake's skin injects into
   * the field. Inline SVG so there is no extra HTTP request and no dependency on
   * a MadCap skin asset. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b75bc' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 20px 20px;
  border: 2px solid var(--drake-blue);
  border-right: 0;
  border-radius: 20px 0 0 20px;
}

/* --- Product filter ------------------------------------------------------
 * Drake's own hero markup has a filter control here too (their
 * `div.search-filter-wrapper`, between the field and the submit) — see the note
 * at the top of this file: on the LIVE page it is hard-wired to a single option,
 * "All products", so it filters nothing. Ours is the same control in the same
 * slot, but with Drake's ten real products in it, taken from the list their own
 * header filter is populated with (kb/Data/Filters.js).
 *
 * Rendered by [drake_kb_product_filter] in
 * mu-plugins/drake-kb-search-filter.php as `<select class="drake-kbcat
 * drake-home__search-filter" name="kbcat">`, so the option list is shared with the
 * header box rather than duplicated.
 *
 * It becomes the MIDDLE segment of Drake's pill: the input keeps the rounded left
 * end, the button keeps the rounded right end, and this sits square between them
 * with only a hairline divider — one control, three segments, not three controls. */
.drake-home__search-filter {
  flex: 0 0 auto;
  /* Wide enough for "Drake Accounting (DAS)" without wrapping; the input flexes
   * around it. */
  width: 190px;
  max-width: 40%;
  height: 40px;
  padding: 0 30px 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--drake-ink);
  background-color: #fff;
  /* Chevron in --Primary, matching the field's magnifier; the native arrow is
   * suppressed so the segment reads as part of the pill. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231b75bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px 8px;
  border: 2px solid var(--drake-blue);
  border-right: 0;
  /* Only a hairline between field and filter, so the pill has no internal seam
   * heavy enough to look like two separate inputs. */
  border-left: 1px solid #cbd5e1;
  border-radius: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}

.drake-home__search-filter:focus-visible {
  outline: 2px solid var(--drake-blue);
  outline-offset: 1px;
}

@media (max-width: 600px) {
  /* Drake's hero pill has no room for three segments here. Stack them: the field
   * on top, then the filter and the button side by side, all corners squared off
   * except the pill's outer ones. */
  .drake-home__search {
    flex-wrap: wrap;
  }
  .drake-home__search-input {
    flex: 1 1 100%;
    border-right: 2px solid var(--drake-blue);
    border-radius: 20px 20px 0 0;
  }
  .drake-home__search-filter {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    border-top: 0;
    border-left: 2px solid var(--drake-blue);
    border-radius: 0 0 0 20px;
  }
  .drake-home__search-submit {
    border-radius: 0 0 20px 0;
  }
}

.drake-home__search-input::placeholder {
  color: #6b7280;
  opacity: 1;
}

.drake-home__search-input:focus {
  outline: 2px solid var(--drake-blue);
  outline-offset: 1px;
}

.drake-home__search-submit {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 22px 0 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 38px;
  color: #fff;
  background-color: var(--drake-blue);
  border: 1px solid var(--drake-blue);
  border-radius: 0 20px 20px 0;
  box-shadow: none;
  cursor: pointer;
  /* Drake's button is a labelled magnifier; keep the glyph, hide the text. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.drake-home__search-submit:hover {
  background-color: #1867a6; /* Drake's own hover value */
  border-color: #1867a6;
}

.drake-home__search-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Tiles band (Drake's div.Tiles-6-3-3) --------------------------------- */

/* Drake floats six cells inside a 10%-inset band. A CSS grid reproduces the
 * same visual proportions (6 / 3 / 3 across two rows) without float clearing,
 * and degrades to one column on small screens exactly as Drake's own
 * max-width:767px rules do.
 *
 * Drake's cell widths are 50 / 23 / 23 / 14.6 / 14.6 / 14.6 with 2% gutters, and
 * the panel spans BOTH rows. A 12-column grid expresses that: 6 + 3 + 3 on row
 * one, then the panel continues down while 4 + 4 + 4 (of the remaining 6
 * columns... i.e. 2 + 2 + 2) fill row two. */
.drake-home__tiles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px 2%;
  padding: 40px 10% 25px; /* Drake: 40px top, 25px bottom, 10% sides */
  background-color: #e8f1fc; /* Drake's pale blue band */
  border-top: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
}

@media (max-width: 1279px) {
  /* Drake narrows the inset at this breakpoint. */
  .drake-home__tiles {
    padding-left: 5%;
    padding-right: 5%;
  }
}

/* Shared card chrome. Drake: white, 20px radius, and a real drop shadow that
 * deepens on hover. */
.drake-home__panel,
.drake-home__tile {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.drake-home__panel:hover,
.drake-home__tile:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 10px 10px rgba(0, 0, 0, 0.45);
}

/* Cell 1: the Trending Articles panel — half width, spans both tile rows,
 * scrolls internally (Drake: height 500px; overflow auto). */
.drake-home__panel {
  grid-column: 1 / span 6;
  grid-row: 1 / span 2;
  min-height: 500px;
  max-height: 500px;
  overflow: auto;
  padding: 40px 10px 20px;
}

.drake-home__panel-list {
  margin: 0;
  padding: 0 24px 0 40px;
  list-style: disc outside;
}

.drake-home__panel-list li {
  margin: 0 0 12px;
  font-size: 1.2em; /* Drake p / p.Trending */
  line-height: 1.4;
  color: #565656;
}

/* Drake underlines the links inside this band and colors them --Primary. */
.drake-home__panel-list a {
  color: var(--drake-blue);
  text-decoration: underline;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.drake-home__panel-list a:hover,
.drake-home__panel-list a:focus {
  color: #1867a6;
}

/* Cells 2-6: the clickable tiles. Drake makes the whole cell clickable with an
 * inline `onclick="location.href=…"` on a <div>, which is not keyboard
 * reachable and invisible to assistive tech. We use a real <a> instead — same
 * click target, same destination, but focusable, announced, and middle-click /
 * open-in-new-tab friendly. That is the one intentional divergence from Drake's
 * markup on this page. */
.drake-home__tile {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 240px; /* Drake: height 240px */
  padding: 40px 10px 10px;
  text-decoration: none;
  /* Each tile carries its icon as a background image, positioned as Drake does
   * (50% 70%); the per-tile rules below set the file and size. */
  background-repeat: no-repeat;
  background-position: 50% 70%;
}

/* Row 1: two wide tiles beside the panel (Drake 23% each). */
.drake-home__tile--gs {
  grid-column: 7 / span 3;
  grid-row: 1;
  background-image: url("assets/home-icon-gears.png");
  background-size: 100px 85px; /* Drake's exact sizes, per tile */
}

.drake-home__tile--forms {
  grid-column: 10 / span 3;
  grid-row: 1;
  background-image: url("assets/home-icon-pdfs.png");
  background-size: 100px 100px;
}

/* Row 2: three narrower tiles (Drake 14.6% each). */
.drake-home__tile--broadcasts {
  grid-column: 7 / span 2;
  grid-row: 2;
  background-image: url("assets/home-icon-announcement.png");
  background-size: 100px 100px;
}

.drake-home__tile--training {
  grid-column: 9 / span 2;
  grid-row: 2;
  background-image: url("assets/home-icon-graduation.png");
  background-size: 100px 90px;
}

.drake-home__tile--updates {
  grid-column: 11 / span 2;
  grid-row: 2;
  background-image: url("assets/home-icon-download.png");
  background-size: 100px 100px;
}

/* Tile + panel headings: Drake's p.tile-title — centered, 1.4em, #565656, and
 * hyphenating, because "Broadcasts"/"Training" have to wrap in a 14.6% cell. */
.drake-home__tile-title {
  margin: 0;
  font-size: 1.4em;
  line-height: 1.25;
  color: #565656;
  text-align: center;
  hyphens: auto;
}

.drake-home__panel .drake-home__tile-title {
  margin-bottom: 18px;
}

/* Drake's tile labels are plain text on a div, so they must not inherit link
 * styling now that the tile is an anchor. */
.drake-home__tile .drake-home__tile-title {
  color: #565656;
  text-decoration: none;
}

.drake-home__tile:focus-visible {
  outline: 3px solid var(--drake-blue);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  /* Drake collapses every cell to 100% here. */
  .drake-home__tiles {
    grid-template-columns: 1fr;
    padding-left: 10%;
    padding-right: 10%;
  }
  .drake-home__panel,
  .drake-home__tile {
    grid-column: 1;
    grid-row: auto;
  }
  .drake-home__panel {
    min-height: 0;
    max-height: none;
  }
  .drake-home__tile-title {
    font-size: 1.4em;
  }
}

/* --- Frequently Asked Questions ------------------------------------------ */

.drake-home__section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 8px; /* Drake: div.home-section { padding: 1% } */
  background-color: #fff;
}

/* Drake: 1.5em, bold, Open Sans, --Primary, 5px solid --Primary left bar. */
.drake-home__section-title {
  margin: 0 0 8px;
  padding: 0 0 10px 10px;
  font-family: var(--drake-font-heading);
  font-size: 1.5em;
  font-weight: 700;
  color: var(--drake-blue);
  border-left: solid 5px var(--drake-blue);
}

/* The accordion rows. Drake's MadCap dropDown is
 *     border-bottom: 1px solid var(--Light);  padding: 10px 0
 * with a bold --Dark (#45494C) hotspot at 1.2em, and a body inset
 * `padding: 10px 30px 0`. Reproduced with native <details>/<summary>, matching
 * how the ARTICLE pages already render Drake's dropdowns (see content.css §4) —
 * those rules are scoped to the article body, so the home page needs its own. */
.drake-home__faq {
  padding: 10px 0;
  border-bottom: 1px solid #dadee1; /* var(--Light) */
}

.drake-home__faq-q {
  display: block; /* also suppresses the default disclosure marker */
  position: relative;
  padding: 6px 42px 6px 0;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.4;
  color: #45494c; /* var(--Dark) */
  cursor: pointer;
  list-style: none;
  transition: color 0.15s ease;
}

.drake-home__faq-q::marker {
  content: "";
}

.drake-home__faq-q::-webkit-details-marker {
  display: none;
}

.drake-home__faq-q:hover {
  color: var(--drake-blue);
}

.drake-home__faq-q:focus-visible {
  outline: 2px solid var(--drake-blue);
  outline-offset: 2px;
}

/* Drake's skin ships +/- PNG affordances whose URLs point at a local desktop
 * path on the author's machine (`/Users/bethel.bartlett/Desktop/Images/Plus.png`)
 * and 404 on the live site — so the live page shows NO icon. A chevron is used
 * instead, identical to the one the article accordions already use, so the rows
 * read as expandable. */
.drake-home__faq-q::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--drake-gray);
  border-bottom: 2px solid var(--drake-gray);
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.18s ease, border-color 0.15s ease;
}

.drake-home__faq[open] > .drake-home__faq-q::after {
  transform: translateY(-25%) rotate(-135deg);
}

.drake-home__faq-q:hover::after {
  border-color: var(--drake-blue);
}

.drake-home__faq-a {
  padding: 10px 30px 0; /* Drake's MadCap|dropDownBody */
}

.drake-home__faq-a p {
  margin: 0 0 10px;
  font-size: 1.2em;
  line-height: 1.6;
  color: #565656;
}

.drake-home__faq-a ul {
  margin: 8px 0 10px;
  padding-left: 24px;
  list-style: disc outside;
}

.drake-home__faq-a li > p {
  margin: 4px 0;
}

.drake-home__faq-a a {
  color: var(--drake-blue);
  text-decoration: underline;
}

.drake-home__faq-a a:hover,
.drake-home__faq-a a:focus {
  color: #1867a6;
}

/* Animate the reveal, the same way and with the same @supports guard as the
 * article accordions (content.css §5), so home and article rows behave alike. */
@supports (interpolate-size: allow-keywords) and
  selector(details::details-content) {
  .drake-home__faq {
    interpolate-size: allow-keywords;
  }
  .drake-home__faq::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.24s ease-out, opacity 0.2s ease-out,
      content-visibility 0.24s allow-discrete;
  }
  .drake-home__faq[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drake-home__faq,
  .drake-home__faq::details-content,
  .drake-home__faq-q,
  .drake-home__faq-q::after,
  .drake-home__panel,
  .drake-home__tile {
    transition: none !important;
  }
}

/* --- Mountains ------------------------------------------------------------ */

/* Drake's p.mountain: a full-bleed line-art range under the FAQ, sized
 * `100% 100%`, and web-only (their `mc-conditions: 'Online Format.Web'` plus
 * `mc-responsive-content-exclude-tablet/-mobile` classes on the element). The
 * source image is 4340x388, so a fixed height keeps its proportions readable
 * without letting it dominate the page. */
.drake-home__mountain {
  height: 130px;
  margin: 8px 0 0;
  background-image: url("assets/home-mountains.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: scroll;
}

@media (max-width: 767px) {
  /* Drake excludes it on tablet and mobile. */
  .drake-home__mountain {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * RETAINED (BUT CURRENTLY DEAD): BetterDocs category-grid layout fix.
 *
 * These rules existed for the OLD home page, which rendered a
 * `betterdocs/categorygrid` of all 19 top-level categories. Drake's real home has
 * no category grid, so that block is no longer on the front page.
 *
 * MEASURED, not assumed: the selectors below all require
 * `.betterdocs-category-grid-inner-wrapper.layout-flex`, and after this change NO
 * reachable page emits that class. Checked "/", a category archive
 * (/topic/drake-pay/), an article, and the search results page — the only
 * `layout-flex` classes present anywhere are core block-layout ones
 * (`wp-block-group-is-layout-flex` etc.), which these selectors cannot match.
 * The category archives DO render a categorygrid, but with `layout-1`, which was
 * never affected by the original bug. `archive-docs.html` also still contains the
 * block, but the `docs` post type is registered with has_archive=false (its
 * rewrite is `kb/%doc_category%`), so that template has no URL.
 *
 * KEPT ANYWAY, deliberately: they are inert (they can only ever match the block
 * they name), and the layout they fix is a real BetterDocs bug that returns the
 * moment anyone re-adds a flex-layout categorygrid — most plausibly on a future
 * "browse all categories" page. Deleting them would silently re-arm the bug.
 * If that page never appears, this block can be dropped.
 *
 * The original bug, for whoever hits it next: BetterDocs lays the grid out with
 * `display:flex; flex-wrap:wrap` and gives every card
 * `flex: 1 0 calc(100%/3 - gap)`. With a card count that is not a multiple of the
 * column count (19 cards in 3 columns => a lone 19th), the trailing cards GROW to
 * fill their row, so the last card stretched full-bleed. A real grid keeps every
 * card exactly one column wide. (Separately, the "only 9 of 19 cards" symptom was
 * the block's gridPerPage default of 9 — fixed in the templates and asserted by
 * configure-site.sh step 3, not here.)
 * ------------------------------------------------------------------------- */

.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.layout-flex {
  display: grid;
  grid-template-columns: repeat(var(--drake-grid-cols, 3), minmax(0, 1fr));
  align-items: start;
}

/* Cancel the flex-basis growth so cards can't widen past their grid column. */
.betterdocs-category-grid-wrapper
  .betterdocs-category-grid-inner-wrapper.layout-flex
  > .betterdocs-single-category-wrapper {
  flex: none;
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: 100%;
}

/* Equal-height cards so rows line up even with uneven doc-list lengths. */
.betterdocs-category-grid-wrapper
  .betterdocs-category-grid-inner-wrapper.layout-flex
  > .betterdocs-single-category-wrapper
  .betterdocs-single-category-inner {
  height: 100%;
}

.betterdocs-category-grid-wrapper
  .betterdocs-category-grid-inner-wrapper.layout-flex.betterdocs-column-2 {
  --drake-grid-cols: 2;
}
.betterdocs-category-grid-wrapper
  .betterdocs-category-grid-inner-wrapper.layout-flex.betterdocs-column-4 {
  --drake-grid-cols: 4;
}

@media only screen and (max-width: 1024px) {
  .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.layout-flex {
    --drake-grid-cols: 2;
  }
}

@media only screen and (max-width: 767px) {
  .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.layout-flex {
    --drake-grid-cols: 1;
  }
}