/* help.css: help page (/help/) only. Spacing of the "Get your Questions Answered" tutorial grid, measured from
   reference/help (1440 and 390). Card chrome itself is the shared .icon-box in main.css. */

/* ---- Section: 32px under the header on phones, 80px at 1440; 59 / 91px after the last card ---- */
.page-help .help-tutorials { padding: 32px 0 59px; }

/* Phones: the heading is centred and runs edge to edge (x=0..390); from 768 it is left-aligned */
.page-help .help-tutorials__title { margin-inline: calc(-1 * var(--gutter)); text-align: center; }
/* The Open Sans accent has taller ascent/descent than Circular Std; a line-height of 1 keeps it inside the
   heading's own line box (otherwise the h1 grows 62 -> 66px at 1440 and 29 -> 31px at 390). Page-scoped on purpose:
   every other page's capture measures the taller 66px / 30.8px box, i.e. the source did grow there. */
.page-help .help-tutorials__title .section-title__accent { line-height: 1; }

/* The grid is a list of cards; each item stretches its card so rows keep equal heights */
.page-help .help-tutorials__grid { margin-top: 30px; }
.page-help .help-tutorials__item { display: flex; }
.page-help .help-tutorials__item > .icon-box { width: 100%; }

/* Phones: the source kept its three-card rows, so the gap between rows (after cards 3 and 6) is 20px, not 40px */
.page-help .help-tutorials__item:nth-child(3n + 1):not(:first-child) { margin-top: -20px; }

/* Page sprite holder (see the template): takes no space, and is not display:none so <use> keeps working */
.page-help .help-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The ekiticons glyphs fill a 32px em box; the wide Circle-progress glyph spills past it like the font glyph did */
.page-help .icon-box__icon { place-items: center start; padding-left: 10px; }
.page-help .icon-box__icon .icon { overflow: visible; }


@media (min-width: 768px) {
  .page-help .help-tutorials { padding: 95px 0 85px; }
  .page-help .help-tutorials__title { margin-inline: 0; text-align: left; }
  .page-help .help-tutorials__grid { margin-top: 64px; }
  .page-help .help-tutorials__item:nth-child(3n + 1):not(:first-child) { margin-top: 0; }
}

@media (min-width: 1025px) {
  .page-help .help-tutorials { padding: 80px 0 91px; }
  /* Heading spans the 1250px container (x=95); the cards sit 10px further in (x=105..1335, 383px each) */
  .page-help .help-tutorials__grid { margin-top: 50px; padding-inline: 10px; }
}