/* Shared /study cluster polish — linked ONCE from StudyPage.astro's <head>, so
   every /study page (hub + every feature deep-dive) inherits these rules. Previously
   each page pasted an identical scoped <style> block into its headExtrasHtml; that
   didn't inherit and drifted between pages. These selectors are cluster-generic.
   The /study cluster is net-new (no V1 parity baseline), so /browser and the other
   parity-locked clusters are untouched — this stylesheet is only ever linked from
   /study pages. */

/* Hero proportions: match the /browser/ai-chat reference hero. That page loads
   ai-chat.css, which caps .hero-thumb at 616px wide (img width:100%) and spaces the
   two columns apart; product.css (loaded here) has no such cap, so our hero-thumb
   grew to ~705px and — with a square image — ran the hero taller than the reference.
   These three rules mirror ai-chat.css and, together with the wide (~1.19:1)
   hero.webp, render the thumb at 616x516 like the reference. */
.hero-wrapper { justify-content: space-between; }
.hero-wrapper .hero-thumb { max-width: 616px; }
.hero-wrapper .hero-thumb img { width: 100%; border-radius: 24px; }

/* Round the feature-row + step illustration images to match /browser/ai-chat. The
   shared product.css only rounds <video> thumbs; these rules add the same rounding
   for our <img> thumbs. */
.feature-area .feature-thumb img { border-radius: 30px; }
.step-area .step-video img { border-radius: 20px; }

/* Hub-only: the "Explore <tool> →" deep-link under each alternating feature block
   (FeatureRow.link). Only the /study hub sets row.link, so this never renders on the
   parity-locked features cluster. */
.feature-area .feature-content .feature-link { display: inline-block; margin-top: 0.85rem; font-weight: 600; color: #144ee3; text-decoration: none; }
.feature-area .feature-content .feature-link:hover { text-decoration: underline; }

/* Keep the 3 filled-disc step icons at their natural 49px and identical regardless
   of step text length. The icon is a flex item with max-width:100%, so without
   flex-shrink:0 each icon shrinks to its row's text (longer text = smaller icon) —
   flex-shrink:0 lets them render at the reference 49px so the .step-wrapper
   li::before connector (left:22px) runs through their centers, like /browser/chrome. */
.step-area .step-list li .icon { flex-shrink: 0; }

/* Feature-row accent icon size. The shared sections.css only sets margin on
   .feature-content .icon, so each <img> falls back to its SVG's intrinsic width:
   the feature-page rows use 48px mun/study-icon SVGs while the hub's product-block
   rows use the 24px study/icons/* family — so the hub icons rendered half-size.
   Pin every /study feature-row icon to the 48px feature-page size so the hub blocks
   match. (Only ever linked from /study, so no parity-locked cluster is affected.) */
.feature-area .feature-content .icon { width: 48px; height: 48px; }

/* 'Explore the rest of the Study Set' grid: breathing room above the heading + real
   card definition (border, tinted icon chip, stronger shadow, hover lift on live cards). */
.related-tools-area { padding-top: 6rem !important; }
.related-tools-area .section-header { margin-bottom: 1.25rem; }
.related-tools-area .card { border: 1px solid #E2E8F0 !important; border-radius: 18px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07) !important; }
.related-tools-area .card img { width: 60px; height: 60px; padding: 13px; box-sizing: border-box; background: #EFF6FF; border: 1px solid #DBEAFE; border-radius: 16px; }
.related-tools-area a.card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.related-tools-area a.card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 78, 224, 0.15) !important; border-color: #BFDBFE !important; }

/* Hub-only: 'Why a Study Set works' cognitive-science principle cards — mirror the
   related-tools card treatment so the two grids read as siblings (border, tinted
   icon chip, soft shadow). The per-principle tool deep-links sit at the card foot. */
.why-it-works-area .card { border: 1px solid #E2E8F0 !important; border-radius: 18px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07) !important; }
.why-it-works-area .card img { width: 56px; height: 56px; padding: 13px; box-sizing: border-box; background: #EFF6FF; border: 1px solid #DBEAFE; border-radius: 16px; }
.why-it-works-area .why-links a { color: #144ee3; }
.why-it-works-area .why-links a:hover { text-decoration: underline !important; }

/* =====================================================================================
   HUB REDESIGN (2026-07) — study-only sections that replace the promo strip, the 9-row
   FeatureRows list and the cross-platform block. All scoped under new area classes, so
   the parity-locked clusters (which never link this file) are untouched.
   Shared accent palette: blue #144ee3, violet #6d28d9, green #047857, amber #b45309.
   ===================================================================================== */

/* --- Section rhythm + shared heading treatment ------------------------------------ */
.input-sources-area,
.tool-grid-area { padding-top: 5rem; padding-bottom: 5rem; }
.study-spotlight-area { padding: 4.5rem 0; }
.input-sources-area .section-header,
.tool-grid-area .section-header { max-width: 720px; margin: 0 auto 2.75rem; }
.input-sources-area .section-header p,
.tool-grid-area .section-header p { color: #475569; font-size: 1.05rem; }

/* --- "Feed it anything" band (compact slate card: copy LEFT, illustration RIGHT) ------ */
/* Side-by-side keeps the band short. The slate gradient matches the illustration's own
   background, and the illustration fills the right column edge-to-edge (only its empty
   left margin meets the copy), so the artwork blends into the card with no visible seam. */
/* The div gradient is set to the illustration's OWN sampled top/bottom colours (vertical
   #EFF2FA → #E1E9F2), and the art is shown at natural height (no crop) so its full-height
   gradient lines up 1:1 with the div — seamless, no regen needed. */
.input-sources-area .input-band {
  background: linear-gradient(180deg, #EFF2FA 0%, #E1E9F2 100%);
  border-radius: 28px; overflow: hidden;
  display: flex; align-items: center;
}
.input-sources-area .input-band-content {
  flex: 0 0 42%; text-align: left;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(0.75rem, 2vw, 1.5rem) clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3.5rem);
}
.input-sources-area .input-band-title { font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.15; color: #0f172a; margin-bottom: 0.75rem; }
.input-sources-area .input-band-title span { color: #144ee3; }
.input-sources-area .input-band-sub { color: #475569; font-size: 1.02rem; line-height: 1.6; margin: 0; }
.input-sources-area .input-band-thumb { flex: 1 1 58%; }
.input-sources-area .input-band-thumb img { width: 100%; height: auto; display: block; }
@media (max-width: 800px) {
  .input-sources-area .input-band { flex-direction: column; }
  .input-sources-area .input-band-content { flex: none; text-align: center; padding-bottom: 0.5rem; }
  .input-sources-area .input-band-thumb { flex: none; width: 100%; }
}

/* --- Spotlight blocks (Lecture Listen, Mastery) ------------------------------------ */
.study-spotlight--blue   { --accent: #144ee3; --frame: linear-gradient(155deg, #EFF6FF, #DBEAFE); --chip: #DBEAFE; }
.study-spotlight--violet { --accent: #6d28d9; --frame: linear-gradient(155deg, #F5F3FF, #EDE9FE); --chip: #EDE9FE; }
.study-spotlight--green  { --accent: #047857; --frame: linear-gradient(155deg, #ECFDF5, #D1FAE5); --chip: #D1FAE5; }
.study-spotlight--amber  { --accent: #b45309; --frame: linear-gradient(155deg, #FFFBEB, #FEF3C7); --chip: #FEF3C7; }
.study-spotlight--teal   { --accent: #0d9488; --frame: linear-gradient(155deg, #E1F5F3, #C7EDE9); --chip: #CCFBF1; }
.study-spotlight--rose   { --accent: #be185d; --frame: linear-gradient(155deg, #FDE8EF, #FBD5E1); --chip: #FCE7F0; }

.study-spotlight-wrapper {
  display: flex; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); flex-wrap: wrap;
}
/* The generated illustrations already carry their own soft powder-blue background, so
   the thumb is frameless — just round the image + a soft shadow, letting each image's
   own bg be the block (matches the designer's illustrations, avoids a nested blue-on-
   blue frame). The per-block --tint still drives the eyebrow pill + bullet accents. */
.study-spotlight-thumb {
  flex: 0 1 480px; min-width: 260px; align-self: center;
}
/* Cap the illustration so the two big spotlight sections don't get taller than they need
   to be (keeps the square-ish aspect, just a smaller display size). */
.study-spotlight-thumb img { width: 100%; max-width: 400px; margin: 0 auto; border-radius: 24px; display: block; box-shadow: 0 20px 50px rgba(20, 78, 224, 0.13); }
.study-spotlight-content { flex: 1 1 380px; min-width: 300px; }
.study-spotlight-eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 800; font-size: 0.8rem; color: var(--accent);
  background: var(--chip); padding: 0.3rem 0.7rem; border-radius: 999px; margin-bottom: 1rem;
}
.study-spotlight-title { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.15; color: #0f172a; margin-bottom: 1rem; }
.study-spotlight-text { color: #475569; font-size: 1.08rem; line-height: 1.6; margin-bottom: 1.4rem; }
.study-spotlight-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.study-spotlight-bullets li { display: flex; align-items: flex-start; gap: 0.7rem; color: #1e293b; font-weight: 500; line-height: 1.5; }
.study-spotlight-bullets .bullet-check { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.study-spotlight-bullets .bullet-icon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; object-fit: contain; }
/* Optional deep-link under the copy (e.g. Lecture Listen -> /study/lecture-recorder). */
.study-spotlight-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.5rem; font-weight: 700; color: var(--accent); text-decoration: none; transition: gap 0.2s ease; }
.study-spotlight-cta:hover { gap: 0.7rem; }
.study-spotlight-cta svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- Tool grid (feature showcase) -------------------------------------------------- */
.tool-grid-area .tool-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.75rem;
}
/* White card: rounded illustration on top, copy below (left-aligned). Hover ZOOMS the inner
   image (same aspect) with no card lift or displacement — like transcript. The bleed variants
   set a --base scale; the hover --hover scale composes on top via a second scale(). */
.tool-grid-area .tool-card {
  display: block; text-decoration: none; color: inherit;
  background: transparent; border: 1px solid transparent; border-radius: 22px; padding: 12px 12px 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
/* Card chrome (white bg + border) is HOVER-ONLY — no default border/background and no drop
   shadow; hover just materialises the border + white bg and zooms the inner image. */
.tool-grid-area .tool-card:hover { background: #F5F7FC; border-color: #E2E8F2; }
.tool-grid-area .tool-card-thumb {
  display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.tool-grid-area .tool-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(var(--base, 1)) scale(var(--hover, 1));
  transform-origin: var(--torigin, center);
  transition: transform 0.45s ease;
}
.tool-grid-area .tool-card:hover .tool-card-thumb img { --hover: 1.06; }
.tool-grid-area .tool-card-caption { display: block; text-align: center; padding: 1.1rem 0.75rem 1.35rem; }
.tool-grid-area .tool-card-title { display: block; font-weight: 800; font-size: 1.18rem; color: #0f172a; margin-bottom: 0.3rem; }
.tool-grid-area .tool-card-text { display: block; color: #475569; font-size: 0.96rem; line-height: 1.5; max-width: 330px; margin: 0 auto; }
.tool-grid-area .tool-card--bleed-bottom .tool-card-thumb img { --base: 1.28; --torigin: top center; }
.tool-grid-area .tool-card--bleed-right .tool-card-thumb img { --base: 1.2; --torigin: left center; }
@media (max-width: 991.98px) { .tool-grid-area .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .tool-grid-area .tool-grid { grid-template-columns: 1fr; } }

/* "Used by Students from the Top Universities" logo marquee (TopUniversities.astro).
   The /free-solver/<subject> pages render this same .logo-area markup, but there it
   gets a LIGHT theme from index.new.css + free-tool.css — stylesheets /study does NOT
   load. newest_lp.css (which /study does load) only supplies the base blue-gradient
   theme + the scroll animation. These rules replicate the subject pages' final look so
   the section matches. Loaded after newest_lp.css, so they win. */
.logo-area {
  background: #f8fafc;
}
.logo-area.bg-style-light {
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}
.logo-area.bg-style-light .logo-text {
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.logo-area .logo-slider-wrapper .logo-list img {
  max-height: 90px;
  object-fit: contain;
}
