/* ==========================================================================
   Free Tests page v2 (Oct 2026). Loaded after home-v2.css, which supplies
   the tokens, header, buttons, FAQ and footer. Everything here is ft2-*.
   ========================================================================== */

.ft2-hero { padding: 40px 0 28px; border-bottom: 1px solid var(--hp-border); background: linear-gradient(180deg, #FBFBFD 0%, #FFFFFF 100%); }
.ft2-hero h1 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; max-width: 720px; }
.ft2-hero p.ft2-lead { margin-top: 12px; color: var(--hp-muted); font-size: 1.0625rem; max-width: 680px; }
.ft2-hero .hp-hero__ctas { margin-top: 20px; }
.ft2-benefits { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.ft2-benefits li { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--hp-ink-2); }
.ft2-benefits i { color: var(--hp-purple); font-size: .875rem; }

/* ---------- Toolbar: exam chips, search, filters ---------- */
.ft2-toolbar { position: sticky; top: var(--hp-header-h); z-index: 50; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--hp-border); padding: 14px 0 12px; backdrop-filter: saturate(180%) blur(6px); }
.ft2-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ft2-chips::-webkit-scrollbar { display: none; }
.ft2-chip {
    flex: 0 0 auto; font: 600 .875rem/1 var(--hp-font); padding: 9px 14px; border-radius: 999px;
    border: 1px solid var(--hp-border); background: #fff; color: var(--hp-ink-2); cursor: pointer;
}
.ft2-chip:hover { border-color: #CDD1DB; }
.ft2-chip[aria-pressed="true"] { background: var(--hp-purple-soft); border-color: #C9C3FB; color: var(--hp-purple-text); }
.ft2-chip span { font-weight: 500; color: var(--hp-muted); margin-left: 4px; }
.ft2-chip[aria-pressed="true"] span { color: var(--hp-purple-text); }

.ft2-controls { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; gap: 10px; margin-top: 12px; align-items: center; }
.ft2-search { position: relative; }
.ft2-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--hp-muted); font-size: .875rem; }
.ft2-input, .ft2-select {
    width: 100%; height: 42px; border: 1px solid var(--hp-border); border-radius: 10px; background: #fff;
    font: 400 .9375rem var(--hp-font); color: var(--hp-ink); padding: 0 12px;
}
.ft2-input { padding-left: 34px; }
.ft2-input:focus, .ft2-select:focus { outline: none; border-color: var(--hp-purple); box-shadow: 0 0 0 3px rgba(109,94,245,.15); }
.ft2-select[hidden], .ft2-field[hidden] { display: none; }
.ft2-clear { height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--hp-border); background: #fff; color: var(--hp-ink-2); font: 600 .875rem var(--hp-font); cursor: pointer; white-space: nowrap; }
.ft2-clear:hover { background: var(--hp-grey); }
.ft2-clear:disabled { opacity: .5; cursor: default; }
.ft2-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: .8125rem; color: var(--hp-muted); min-height: 24px; }
.ft2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--hp-grey); border: 1px solid var(--hp-border); color: var(--hp-ink-2); font-weight: 500; }
.ft2-pill button { border: 0; background: none; cursor: pointer; color: var(--hp-muted); width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.ft2-pill button:hover { background: #E4E6EC; color: var(--hp-ink); }
.ft2-filters-toggle { display: none; }
.ft2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Result sections ---------- */
.ft2-results { padding: 28px 0 8px; }
.ft2-block { margin-bottom: 36px; scroll-margin-top: calc(var(--hp-header-h) + 150px); }
.ft2-block[hidden] { display: none; }
.ft2-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ft2-block__head h2 { font-size: 1.25rem; font-weight: 700; }
.ft2-block__head p { font-size: .875rem; color: var(--hp-muted); }
.ft2-count { font-size: .8125rem; color: var(--hp-muted); white-space: nowrap; }
.ft2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.ft2-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius); padding: 18px; transition: border-color .15s ease, box-shadow .15s ease; }
.ft2-card:hover { border-color: #D3D0F8; box-shadow: 0 4px 16px rgba(16,24,40,.06); }
.ft2-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ft2-tag { font-size: .75rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--hp-grey); color: var(--hp-ink-2); border: 1px solid var(--hp-border); }
.ft2-tag--exam { background: var(--hp-purple-soft); color: var(--hp-purple-text); border-color: #DDD8FD; }
.ft2-tag--easy { background: #ECFDF3; color: #067647; border-color: #ABEFC6; }
.ft2-tag--medium { background: #FFFAEB; color: #B54708; border-color: #FEDF89; }
.ft2-tag--hard { background: #FEF3F2; color: #B42318; border-color: #FECDCA; }
.ft2-card h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.ft2-card__sub { margin-top: 4px; font-size: .875rem; color: var(--hp-muted); }
.ft2-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 16px; padding-top: 12px; border-top: 1px solid var(--hp-border); font-size: .875rem; color: var(--hp-ink-2); }
.ft2-card__meta i { color: var(--hp-muted); margin-right: 6px; width: 14px; text-align: center; }
.ft2-card__actions { margin-top: auto; }
.ft2-card__actions .hp-btn { width: 100%; }
.ft2-btn-soon { width: 100%; min-height: 46px; border-radius: 10px; border: 1px dashed #CDD1DB; background: var(--hp-grey); color: var(--hp-muted); font: 600 .9375rem var(--hp-font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: not-allowed; }

.ft2-state { text-align: center; padding: 40px 20px; border: 1px dashed var(--hp-border); border-radius: var(--hp-radius); background: #fff; color: var(--hp-muted); }
.ft2-state i { font-size: 1.5rem; color: #B9BDC8; margin-bottom: 10px; display: block; }
.ft2-state h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.ft2-state .hp-btn { margin-top: 14px; }
.ft2-skeleton { height: 210px; border-radius: var(--hp-radius); border: 1px solid var(--hp-border); background: linear-gradient(90deg, #F6F7F9 0%, #FFFFFF 50%, #F6F7F9 100%); background-size: 200% 100%; animation: ft2-shimmer 1.4s ease-in-out infinite; }
@keyframes ft2-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- SEO series cards ---------- */
.ft2-series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ft2-series article { background: #fff; border: 1px solid var(--hp-border); border-radius: var(--hp-radius); padding: 24px; }
.ft2-series h2 { font-size: 1.1875rem; }
.ft2-series p { margin-top: 10px; color: var(--hp-ink-2); font-size: .9375rem; }
.ft2-series .ft2-note { color: var(--hp-muted); font-size: .8125rem; }
.ft2-series .hp-btn { margin-top: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .ft2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ft2-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .ft2-search { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .ft2-hero { padding: 20px 0 16px; }
    .ft2-hero p.ft2-lead { font-size: .9375rem; margin-top: 8px; }
    .ft2-hero .hp-hero__ctas { margin-top: 14px; gap: 8px; flex-wrap: nowrap; }
    .ft2-hero .hp-hero__ctas .hp-btn { flex: 1 1 0; min-height: 44px; padding: 0 10px; font-size: .875rem; }
    .ft2-benefits { gap: 4px 14px; margin-top: 12px; }
    .ft2-benefits li { font-size: .8125rem; }
    .ft2-toolbar { position: static; padding: 10px 0; }
    .ft2-controls { grid-template-columns: minmax(0, 1fr) auto; }
    .ft2-search { grid-column: auto; }
    .ft2-filters-toggle { display: inline-flex; height: 42px; align-items: center; gap: 6px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--hp-border); background: #fff; font: 600 .875rem var(--hp-font); color: var(--hp-ink-2); cursor: pointer; }
    .ft2-filters-toggle[aria-expanded="true"] { border-color: #C9C3FB; color: var(--hp-purple-text); background: var(--hp-purple-soft); }
    .ft2-more { display: none; grid-column: 1 / -1; gap: 10px; grid-template-columns: 1fr 1fr; }
    .ft2-more.is-open { display: grid; }
    .ft2-more .ft2-clear { grid-column: 1 / -1; }
    .ft2-grid { grid-template-columns: 1fr; gap: 12px; }
    .ft2-series { grid-template-columns: 1fr; }
    .ft2-block__head { flex-direction: column; gap: 2px; }
}
@media (min-width: 641px) {
    .ft2-more { display: contents; }
}
@media (prefers-reduced-motion: reduce) {
    .ft2-skeleton { animation: none; }
}

/* ---------- Category directory (mirrors test-series-viewer.html .tsv-side) ---------- */
.ft2-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
.ft2-side { position: sticky; top: calc(var(--hp-header-h) + 140px); align-self: start; }
.ft2-side-title {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; background: none; cursor: pointer;
    font: 650 1.05rem var(--hp-font); letter-spacing: -0.015em; color: var(--hp-ink);
}
.ft2-side-title::before { content: '\f060'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; font-size: .7rem; color: #ADACA4; transition: transform .15s, color .15s; }
.ft2-side-title:hover::before { color: var(--hp-ink-2); transform: translateX(-2px); }
.ft2-side-title[aria-pressed="true"]::before { content: '\f00a'; } /* grid icon while showing everything */
.ft2-side-group { margin-bottom: 18px; }
.ft2-side-label { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #ADACA4; }
.ft2-side-label::after { content: ''; flex: 1; height: 1px; background: var(--hp-border); }
.ft2-side-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
    background: none; border: 0; border-radius: 9px; padding: 9px 11px; cursor: pointer;
    font: 500 .875rem var(--hp-font); color: var(--hp-ink-2); transition: background .15s, color .15s;
}
.ft2-side-item:hover { background: var(--hp-grey); color: var(--hp-ink); }
.ft2-side-item[aria-pressed="true"] { background: #1A1A18; color: #fff; font-weight: 600; }
.ft2-side-item i { font-size: .72rem; opacity: .55; }
.ft2-side-item small { margin-left: auto; margin-right: 6px; font-size: .75rem; opacity: .7; font-weight: 500; }
.ft2-side-item:disabled { cursor: default; color: #ADACA4; }
.ft2-side-item:disabled:hover { background: none; }

.ft2-subhead { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 12px; }
.ft2-subhead:first-child { margin-top: 0; }
.ft2-subhead h3 { font-size: 1rem; font-weight: 700; }
.ft2-subhead button { border: 0; background: none; color: var(--hp-purple-text); font: 600 .8125rem var(--hp-font); cursor: pointer; }
.ft2-main .ft2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft2-main, .ft2-side { min-width: 0; }

@media (max-width: 1100px) {
    .ft2-main .ft2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    /* As in the viewer: a stacked rail would push the tests a screen down, so
       each group becomes a horizontal strip of pills. */
    .ft2-layout { grid-template-columns: 1fr; gap: 16px; }
    .ft2-side { position: static; }
    .ft2-side-title { font-size: .95rem; margin-bottom: 10px; }
    .ft2-side-label { display: none; }
    .ft2-side-group { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 8px; }
    .ft2-side-group::-webkit-scrollbar { display: none; }
    .ft2-side-item { width: auto; flex: 0 0 auto; border: 1px solid #D8D7D1; border-radius: 999px; padding: 7px 14px; font-size: .82rem; white-space: nowrap; }
    .ft2-side-item i { display: none; }
    .ft2-main .ft2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ft2-main .ft2-grid { grid-template-columns: 1fr; }
}