/* Free Tools section: /resources/free-tools/ hub + individual tool pages.
   Loaded alongside cinema.css + integration.css only (for header/footer/fonts/reset) —
   deliberately not batch-03/04, so this file owns every rule it needs. No new colours;
   same Paper/Ink/Forest/Terracotta/Sage/Peach tokens as the rest of the site. */

.skip-link { position: fixed; z-index: 200; left: 16px; top: -120px; padding: 12px 20px; background: #26352e; color: #f5f3ed; text-decoration: none; }
.skip-link:focus { top: 12px; }
.cinema.free-tools :is(a,[tabindex]):focus-visible { outline: 3px solid #bc452f; outline-offset: 4px; }

/* ---- shared breadcrumb + intro, used by the hub and every tool page ---- */
.ft-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; padding-block: 28px 64px; }
.ft-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding-block: 12px 28px; color: #536457; font-size: 0.9375rem; }
.ft-crumb a { color: inherit; text-decoration-thickness: 1px; }
.ft-eyebrow { display: flex; align-items: center; gap: 12px; color: #536457; font-size: 0.9375rem; margin-bottom: 16px; }
.ft-eyebrow::before { content: ''; width: 28px; height: 1px; background: #bc452f; flex-shrink: 0; }
.ft-intro h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; max-width: 20ch; }
.ft-intro p { margin: 20px 0 0; max-width: 62ch; font-size: 1.0625rem; line-height: 1.65; color: #536457; }

/* ---- tool badges (icon marks) — Forest square, Paper glyph, Terracotta accent dot ---- */
.ft-badge { width: 64px; height: 64px; border-radius: 14px; background: #26352e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ft-badge svg { width: 34px; height: 34px; display: block; }
.ft-badge.is-soon { background: #ece9df; }

/* ---- hub grid ---- */
.ft-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: #c9c9bd; border: 1px solid #c9c9bd; margin-top: 40px; }
.ft-hub-card { background: #f5f3ed; padding: 30px 26px; display: flex; flex-direction: column; gap: 18px; }
.ft-hub-card.is-soon { background: #ece9df; }
.ft-hub-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ft-status { font-size: 0.8125rem; font-weight: 600; color: #536457; display: inline-flex; align-items: center; gap: 7px; }
.ft-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #819582; }
.ft-status.is-soon::before { background: #c9c9bd; }
.ft-hub-card h2 { font-size: 1.5rem; line-height: 1.2; margin: 0; }
.ft-hub-card.is-soon h2 { color: #536457; }
.ft-hub-card p { margin: 0; color: #536457; font-size: 0.9375rem; line-height: 1.55; flex-grow: 1; }
.ft-hub-card .textlink { margin-top: 4px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #28332d; text-decoration-thickness: 1px; }
.ft-hub-card.is-soon .textlink { display: none; }

/* ---- individual tool-page shell (wraps the tool itself, replaces its own mini-header) ---- */
.ft-tool-head { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.ft-tool-head .ft-intro { flex: 1; min-width: 0; }
.ft-tool-head .ft-intro h1 { max-width: none; font-size: clamp(1.875rem, 3.4vw, 2.75rem); }
.ft-embed-frame { margin-top: 36px; border: 1px solid #c9c9bd; border-radius: 4px; overflow: hidden; background: #fbfaf6; }
.ft-embed-frame iframe { display: block; width: 100%; height: 82vh; min-height: 640px; border: 0; }
.ft-embed-note { margin-top: 16px; font-size: 0.875rem; color: #536457; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ft-embed-note a { color: #28332d; }

@media(min-width:768px) {
  .ft-shell { padding-block: 40px 88px; }
  .ft-hub-card { padding: 34px 30px; }
}
@media(max-width:600px) {
  .ft-tool-head { flex-direction: column; align-items: flex-start; }
}