/* =====================================================================
   ScholarHat - Home "free resources" section (ViewComponent: FreeResources)
   Sits on the home page's own gradient (.gradient-bg from home.css) so it blends with the sections around it.
   Palette: ScholarHat cyan -> blue, shared with the adjacent homepage sections.
   Tactile = raised surfaces with a top highlight and layered shadow, pressed state on click.
   Everything is scoped under .fr.
   ===================================================================== */

.fr {
    --fr-ink: #0f1b2d;
    --fr-body: #46566b;
    --fr-muted: #6b7c91;
    --fr-card: rgba(255, 255, 255, .72);
    --fr-card-solid: #ffffff;
    --fr-line: rgba(20, 90, 140, .16);
    --fr-accent: #0891b2;
    --fr-accent-2: #2563eb;
    --fr-accent-ink: #0b6f8c;
    --fr-soft: rgba(8, 145, 178, .10);
    --fr-hi: rgba(255, 255, 255, .9);                       /* top edge light of a raised surface */
    --fr-lo: rgba(15, 60, 100, .10);                        /* contact shadow */
    --fr-lift: 0 1px 0 var(--fr-hi) inset, 0 1px 2px var(--fr-lo), 0 14px 26px -18px rgba(15, 80, 130, .35);
    --fr-lift-hover: 0 1px 0 var(--fr-hi) inset, 0 2px 4px var(--fr-lo), 0 22px 34px -20px rgba(8, 145, 178, .45);
    --fr-press: 0 2px 6px rgba(15, 60, 100, .22) inset, 0 1px 0 var(--fr-hi);
    --fr-easy: #2f8f6b; --fr-med: #b7791f; --fr-hard: #c2415d;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--fr-body);
    padding: clamp(48px, 7vw, 88px) 0;
}
[data-bs-theme="dark"] .fr {
    --fr-ink: #eef7ff;
    --fr-body: #b4c6d9;
    --fr-muted: #7f95ab;
    --fr-card: rgba(7, 24, 44, .62);
    --fr-card-solid: #07182c;
    --fr-line: rgba(110, 190, 230, .16);
    --fr-accent: #2fb8d6;
    --fr-accent-2: #3b82f6;
    --fr-accent-ink: #7fd6ec;
    --fr-soft: rgba(47, 184, 214, .12);
    --fr-hi: rgba(255, 255, 255, .07);
    --fr-lo: rgba(0, 0, 0, .35);
    --fr-lift: 0 1px 0 var(--fr-hi) inset, 0 1px 2px var(--fr-lo), 0 16px 28px -18px rgba(0, 0, 0, .7);
    --fr-lift-hover: 0 1px 0 var(--fr-hi) inset, 0 2px 4px var(--fr-lo), 0 24px 36px -20px rgba(47, 184, 214, .35);
    --fr-press: 0 3px 8px rgba(0, 0, 0, .5) inset, 0 1px 0 var(--fr-hi);
    --fr-easy: #5cd1a3; --fr-med: #f0b95b; --fr-hard: #f27a93;
}
.fr *, .fr *::before, .fr *::after { box-sizing: border-box; }
.fr-shell { width: min(1180px, 100% - 32px); margin-inline: auto; position: relative; }
.fr-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* soft light behind everything: two slow blobs in the accent hues */
.fr-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fr-bg i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.fr-bg .a { width: 460px; height: 460px; left: -120px; top: -140px; background: rgba(8, 145, 178, .28); animation: fr-drift 16s ease-in-out infinite alternate; }
.fr-bg .b { width: 420px; height: 420px; right: -100px; bottom: -160px; background: rgba(37, 99, 235, .24); animation: fr-drift 20s ease-in-out infinite alternate-reverse; }
[data-bs-theme="dark"] .fr-bg i { opacity: .28; }

/* ---------- heading ---------- */
.fr-head { max-width: 760px; margin: 0 0 28px; }
.fr-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border: 1px solid var(--fr-line); border-radius: 999px; background: var(--fr-card); box-shadow: var(--fr-lift); font-size: .8125rem; font-weight: 600; color: var(--fr-accent-ink); }
.fr-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--fr-accent); box-shadow: 0 0 0 0 var(--fr-accent); animation: fr-pulse 2.4s infinite; }
.fr-head h2 { margin: 16px 0 12px; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; color: var(--fr-ink); text-wrap: balance; }
.fr-head h2 em { font-style: normal; background: linear-gradient(100deg, var(--fr-accent), var(--fr-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fr-head p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--fr-muted); text-wrap: pretty; }

/* ---------- tabs: keys with a pressed glider ---------- */
.fr-tabs { position: relative; display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 0 34px; padding: 5px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--fr-line); border-radius: 16px; background: var(--fr-card); box-shadow: var(--fr-lift); backdrop-filter: blur(10px); }
.fr-tabs::-webkit-scrollbar { display: none; }
.fr-glider { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 12px; background: linear-gradient(180deg, var(--fr-card-solid), color-mix(in srgb, var(--fr-card-solid) 88%, var(--fr-accent))); box-shadow: 0 1px 0 var(--fr-hi) inset, 0 1px 2px var(--fr-lo), 0 6px 14px -8px rgba(79, 95, 207, .55); transition: transform .35s cubic-bezier(.3, .8, .3, 1), width .35s cubic-bezier(.3, .8, .3, 1); }
.fr-tab { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: var(--fr-muted); font: inherit; font-size: .9375rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .2s, transform .15s; }
.fr-tab small { padding: 2px 8px; border-radius: 999px; background: var(--fr-soft); font-size: .75rem; font-weight: 700; color: var(--fr-accent-ink); font-variant-numeric: tabular-nums; }
.fr-tab:hover { color: var(--fr-ink); }
.fr-tab[aria-selected="true"] { color: var(--fr-ink); }
.fr-tab:active { transform: translateY(1px) scale(.985); }
.fr-tab:focus-visible, .fr a:focus-visible { outline: 3px solid color-mix(in srgb, var(--fr-accent) 55%, transparent); outline-offset: 2px; }

/* ---------- panel: points on the left, stage on the right ---------- */
.fr-panel { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 992px) { .fr-panel { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; } }
.fr-panel[hidden] { display: none; }
.fr-panel.fr-in .fr-points li { animation: fr-rise .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.fr-panel.fr-in .fr-stage { animation: fr-rise .55s cubic-bezier(.2, .7, .2, 1) .08s both; }

.fr-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fr-points li { position: relative; padding: 18px 20px; border: 1px solid transparent; border-radius: 18px; transition: background .25s, border-color .25s, box-shadow .25s, transform .25s cubic-bezier(.2, .7, .2, 1); }
.fr-points li:hover { background: var(--fr-card); border-color: var(--fr-line); box-shadow: var(--fr-lift); transform: translateX(4px); }
.fr-points h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.25rem; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--fr-ink); }
.fr-points h3 .fr-ico { width: 1.3rem; height: 1.3rem; color: var(--fr-accent); }
.fr-points p { margin: 0 0 12px; font-size: 1rem; line-height: 1.6; color: var(--fr-body); max-width: 46ch; }
.fr-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9375rem; color: var(--fr-ink); text-decoration: none; }
.fr-cta .fr-ico { transition: transform .25s; }
.fr-cta:hover { color: var(--fr-accent-ink); }
.fr-cta:hover .fr-ico { transform: translateX(4px); }

/* ---------- stage: a raised "window" that tilts a few degrees ---------- */
.fr-stage { --rx: 0deg; --ry: 0deg; perspective: 1100px; }
.fr-device { border: 1px solid var(--fr-line); border-radius: 22px; background: var(--fr-card); box-shadow: var(--fr-lift-hover); backdrop-filter: blur(12px); overflow: hidden; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.fr-device__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--fr-line); background: color-mix(in srgb, var(--fr-card-solid) 60%, transparent); }
.fr-dots { display: inline-flex; gap: 6px; }
.fr-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--fr-line); box-shadow: 0 1px 0 var(--fr-hi) inset; }
.fr-dots i:nth-child(1) { background: #e8837a; } .fr-dots i:nth-child(2) { background: #e8c16a; } .fr-dots i:nth-child(3) { background: #7bc79a; }
[data-bs-theme="dark"] .fr-dots i { opacity: .75; }
.fr-url { flex: 1; min-width: 0; padding: 5px 12px; border: 1px solid var(--fr-line); border-radius: 999px; background: var(--fr-soft); font-size: .75rem; color: var(--fr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-url b { font-weight: 600; color: var(--fr-ink); }
.fr-device__body { padding: 18px; min-height: 340px; }
.fr-all { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-top: 1px solid var(--fr-line); font-weight: 700; font-size: .9375rem; color: var(--fr-accent-ink); text-decoration: none; background: color-mix(in srgb, var(--fr-card-solid) 50%, transparent); transition: background .2s; }
.fr-all:hover { background: var(--fr-soft); color: var(--fr-accent-ink); }
.fr-all .fr-ico { transition: transform .25s; }
.fr-all:hover .fr-ico { transform: translateX(4px); }

/* raised items share one recipe: highlight edge, contact shadow, lift on hover, press on active, cursor spotlight */
.fr-tile, .fr-book, .fr-row, .fr-prob, .fr-chip { position: relative; overflow: hidden; text-decoration: none; color: var(--fr-ink); border: 1px solid var(--fr-line); background: var(--fr-card-solid); box-shadow: var(--fr-lift); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s; }
.fr-tile::before, .fr-book::before, .fr-row::before, .fr-prob::before, .fr-chip::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--fr-accent) 18%, transparent), transparent 70%); }
.fr-tile:hover, .fr-book:hover, .fr-row:hover, .fr-prob:hover, .fr-chip:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--fr-accent) 40%, var(--fr-line)); box-shadow: var(--fr-lift-hover); }
.fr-tile:hover::before, .fr-book:hover::before, .fr-row:hover::before, .fr-prob:hover::before, .fr-chip:hover::before { opacity: 1; }
.fr-tile:active, .fr-book:active, .fr-row:active, .fr-prob:active, .fr-chip:active { transform: translateY(0) scale(.985); box-shadow: var(--fr-press); }
.fr-tile > *, .fr-book > *, .fr-row > *, .fr-prob > * { position: relative; }

/* courses: logo tiles */
.fr-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .fr-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fr-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px 14px; border-radius: 16px; text-align: center; }
.fr-tile__img { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(160deg, var(--fr-soft), transparent), var(--fr-card-solid); border: 1px solid var(--fr-line); box-shadow: 0 1px 0 var(--fr-hi) inset; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.fr-tile:hover .fr-tile__img { transform: translateY(-2px) scale(1.06) rotate(-3deg); }
.fr-tile__img img { width: 36px; height: 36px; object-fit: contain; }
.fr-tile__img b, .fr-row__img b, .fr-book__cover b { font-size: 1.25rem; color: var(--fr-accent-ink); }
.fr-tile__name { font-size: .8125rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* books: covers with a spine */
.fr-book { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 12px; border-radius: 14px; }
.fr-book__cover { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 6px 12px 12px 6px; background: linear-gradient(145deg, color-mix(in srgb, var(--fr-accent) 22%, var(--fr-card-solid)), color-mix(in srgb, var(--fr-accent-2) 16%, var(--fr-card-solid))); box-shadow: 0 1px 0 var(--fr-hi) inset, 0 8px 14px -8px rgba(15, 80, 130, .5); overflow: hidden; }
.fr-book__cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .16) 60%, transparent); }
.fr-book__cover img { width: 44%; max-width: 54px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.fr-book:hover .fr-book__cover img { transform: scale(1.1); }
.fr-book__cover i { position: absolute; right: 8px; bottom: 7px; font-style: normal; font-size: .625rem; font-weight: 800; letter-spacing: .06em; color: var(--fr-accent-ink); opacity: .8; }
.fr-book .fr-tile__name { text-align: left; font-size: .75rem; }
.fr-body--books .fr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .fr-body--books .fr-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* tutorials: rows */
.fr-rows { display: grid; gap: 10px; }
@media (min-width: 560px) { .fr-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; }
.fr-row__img { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--fr-soft); border: 1px solid var(--fr-line); }
.fr-row__img img { width: 24px; height: 24px; object-fit: contain; }
.fr-row__name { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fr-row small { font-size: .6875rem; color: var(--fr-muted); white-space: nowrap; }
.fr-row .fr-ico, .fr-prob .fr-ico { color: var(--fr-muted); transition: transform .25s, color .25s; }
.fr-row:hover .fr-ico, .fr-prob:hover .fr-ico { transform: translateX(3px); color: var(--fr-accent-ink); }

/* practice: topic chips + problem rows */
.fr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fr-chip { padding: 7px 13px; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.fr-probs { display: grid; gap: 10px; }
.fr-prob { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; }
.fr-prob__name { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-diff { flex: none; min-width: 62px; padding: 3px 10px; border-radius: 999px; font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.fr-diff--easy { --c: var(--fr-easy); } .fr-diff--medium { --c: var(--fr-med); } .fr-diff--hard { --c: var(--fr-hard); }

/* ---------- mobile: compact, no extra scrolling ---------- */
@media (max-width: 991.98px) {
    .fr-head { margin-bottom: 20px; }
    .fr-tabs { margin-bottom: 22px; }
    .fr-points li { padding: 12px 14px; }
    .fr-points li:hover { transform: none; }
    .fr-points h3 { font-size: 1.0625rem; }
    .fr-points p { font-size: .9rem; margin-bottom: 8px; }
    .fr-device__body { min-height: 0; padding: 14px; }
    .fr-device { transform: none; }
}
@media (max-width: 575.98px) {
    .fr-tabs { width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
    .fr-points li:nth-child(n+3) { display: none; }       /* two points are enough on a phone */
    .fr-url { font-size: .6875rem; }
    .fr-tile__img { width: 48px; height: 48px; }
}

@keyframes fr-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fr-pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes fr-drift { to { transform: translate(40px, 30px); } }
@media (prefers-reduced-motion: reduce) {
    .fr *, .fr *::before, .fr *::after { animation: none !important; transition: none !important; }
    .fr-device { transform: none; }
}