/* V18 (Stage B Wave 5, 2026-08-06): /free-tools/ page + Local Promo & QR Maker tool.
   Masthead consistency correction (2026-08-06): this wrapper used to set its
   own arbitrary 900px width, which also capped the masthead it contains --
   narrower than the ~1180px canonical shell every other Standard-tier page
   uses. Now shares that same token, so Free Tools' masthead lines up with
   Directory/HertsJobs/etc.; the card grid below simply gets the same extra
   breathing room (no layout/column change, still one column).

   Standard-masthead spacing correction (2026-08-07): the previous quick fix
   (2026-08-07, same day) bumped this wrapper's own CSS Grid `gap` to make
   the masthead-to-grid space feel more deliberate -- but a live side-by-side
   measurement against HertsJobs during THIS correction found that comparison
   was apples-to-oranges: HertsJobs' gap is between two block-flow siblings,
   where adjacent margins collapse; this wrapper is `display: grid`, where
   they don't, so its own `gap` was stacking ADDITIVELY on top of the shared
   masthead's own bottom margin rather than matching it. Removed the grid
   layout/gap entirely -- with no `display` override this wrapper is a plain
   block container, so the masthead's own margin-block-end (page-surfaces.css)
   is now the single, real source of this gap, exactly like Local Updates and
   Add Your Business already behaved correctly. Nothing downstream needed a
   dedicated top-of-element margin to compensate: `.hp-free-tools__grid` has
   its own internal `gap` for its tiles (untouched, unrelated), and the
   tool-page variant's `.hp-free-tools__back` already carries its own
   `margin-bottom` for the gap to the tool card below it. */
.hp-free-tools { width: min(100% - var(--hp-shell-gutter) * 2, var(--hp-shell-max-width)); margin: 0 auto clamp(3rem, 8vw, 5rem); }

/* Reusable tool-card grid (design-system consolidation, 2026-08-06): CSS
   Grid with a minmax-based auto-fit, not a hardcoded 4-column split -- a
   future third/fourth tool continues the same pattern automatically
   without a code change here. Breakpoints below pin the practical result
   to 4-up desktop / 2-up tablet / 1-up mobile per the approved direction. */
.hp-free-tools__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var(--hp-space-4);
}

.hp-free-tools__tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp-space-2);
	padding: var(--hp-card-padding);
	border: var(--hp-card-border);
	border-radius: var(--hp-card-radius);
	background: var(--hp-color-white);
	box-shadow: var(--hp-card-shadow);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--hp-transition-card), transform var(--hp-transition-card), border-color var(--hp-transition-card);
}

.hp-free-tools__tile:hover,
.hp-free-tools__tile:focus-visible {
	box-shadow: var(--hp-card-shadow-hover);
	border-color: var(--hp-color-primary-200);
	transform: translateY(-2px);
}

.hp-free-tools__tile:focus-visible {
	outline: 3px solid var(--hp-color-primary-400);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.hp-free-tools__tile { transition: none; }
	.hp-free-tools__tile:hover, .hp-free-tools__tile:focus-visible { transform: none; }
}

.hp-free-tools__tile-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--hp-radius-md);
	background: var(--hp-color-primary-100);
	color: var(--hp-color-primary-700);
}

.hp-free-tools__tile-icon svg { width: 22px; height: 22px; }

.hp-free-tools__tile-eyebrow { color: var(--hp-color-primary-700); font-size: var(--hp-text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hp-free-tools__tile-title { margin: 0; font-family: var(--hp-font-heading); font-size: var(--hp-text-lg); color: var(--hp-color-ink); }
.hp-free-tools__tile-desc { margin: 0; color: var(--hp-color-body); font-size: var(--hp-text-sm); line-height: 1.55; flex-grow: 1; }
.hp-free-tools__tile-cta { display: inline-flex; align-items: center; gap: var(--hp-space-1); margin-top: var(--hp-space-2); color: var(--hp-color-primary-700); font-weight: 700; }
.hp-free-tools__tile:hover .hp-free-tools__tile-cta,
.hp-free-tools__tile:focus-visible .hp-free-tools__tile-cta { color: var(--hp-color-primary-900); }

@media (max-width: 899px) {
	.hp-free-tools__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
	.hp-free-tools__grid { grid-template-columns: 1fr; }
}

.hp-free-tools__tool { padding: clamp(1.5rem, 4vw, 2.25rem); scroll-margin-top: 24px; }
.hp-free-tools__eyebrow { margin: 0 0 var(--hp-space-2); color: var(--hp-color-primary-700); font-size: var(--hp-text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hp-free-tools__tool h2 { margin: 0 0 var(--hp-space-3); font-family: var(--hp-font-heading); font-size: var(--hp-text-2xl); }
.hp-free-tools__tool > p:not([class]) { max-width: 60ch; color: var(--hp-color-body); line-height: 1.6; }
.hp-free-tools__badges { display: flex; flex-wrap: wrap; gap: var(--hp-space-2); align-items: flex-start; margin: 0 0 var(--hp-space-4); }
.hp-free-tools--tool-page .hp-free-tools__tool { margin-top: 0; }
.hp-free-tools__back { margin: 0 0 var(--hp-space-4); font-weight: 700; }
.hp-free-tools__back a { color: var(--hp-color-primary-700); text-decoration: none; }
.hp-free-tools__back a:hover, .hp-free-tools__back a:focus-visible { text-decoration: underline; }

.hp-qr-maker { margin-top: var(--hp-space-6); }
.hp-qr-maker__form { display: grid; gap: var(--hp-space-4); max-width: 32rem; }
.hp-qr-maker__result { margin-top: var(--hp-space-6); padding-top: var(--hp-space-6); border-top: 1px solid var(--hp-color-border); }
.hp-qr-maker__code { display: inline-block; padding: var(--hp-space-4); border: 1px solid var(--hp-color-border); border-radius: var(--hp-radius-lg); background: var(--hp-color-white); }
.hp-qr-maker__code svg { display: block; width: 100%; max-width: 320px; height: auto; }
.hp-qr-maker__caption { margin: var(--hp-space-4) 0 0; font-weight: 700; }
.hp-qr-maker__hint { margin: var(--hp-space-2) 0 0; color: var(--hp-color-body); font-size: var(--hp-text-sm); }

@media (max-width: 599px) {
	.hp-free-tools { width: min(100% - var(--hp-shell-gutter-mobile) * 2, var(--hp-shell-max-width)); }
}