/**
 * JEE Main subject hubs V4 — layout composition only.
 * Scoped under .rbl-jee-shub-v4. Typography follows global Ribblu tokens
 * and JEE V7.1 / CBSE heading+body roles. Do not edit tokens.css.
 */

.rbl-jee-shub-v4 {
  --ink: var(--rbl-ink-strong, #142238);
  --muted: var(--rbl-muted-readable, #4b5563);
  --line: var(--rbl-border, #e5e7eb);
  --orange: var(--rbl-cta-fill, #c2410c);
  --warm: var(--rbl-surface-warm, #fcf7f1);
  --accent: #277dc9;
  --tint: #edf7ff;
  --edge: #c8e3fb;
  color: var(--ink);
  background: #fff;
  /* Inherit global body font; do not invent a page type scale. */
  font-family: inherit;
  font-size: inherit;
  line-height: var(--rbl-leading-body, 1.6);
}

.rbl-jee-shub-v4[data-subject="physics"] {
  --accent: #277dc9;
  --tint: #edf7ff;
  --edge: #c8e3fb;
}

.rbl-jee-shub-v4[data-subject="chemistry"] {
  --accent: #0c9e7d;
  --tint: #ecfaf4;
  --edge: #c9eddb;
}

.rbl-jee-shub-v4[data-subject="mathematics"] {
  --accent: #8757c6;
  --tint: #f5f0ff;
  --edge: #e3d8fa;
}

.rbl-jee-shub-v4 .rbl-jee-shub-v4__container {
  max-width: var(--rbl-container-wide, 1280px);
  width: calc(100% - 48px);
  margin-inline: auto;
}

.rbl-jee-shub-v4 .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rbl-jee-shub-v4 a {
  color: inherit;
  text-decoration: none;
}

.rbl-jee-shub-v4 button,
.rbl-jee-shub-v4 input {
  font: inherit;
}

.rbl-jee-shub-v4 button {
  cursor: pointer;
  color: inherit;
}

.rbl-jee-shub-v4 button:focus-visible,
.rbl-jee-shub-v4 a:focus-visible,
.rbl-jee-shub-v4 input:focus-visible,
.rbl-jee-shub-v4 summary:focus-visible {
  outline: 3px solid var(--rbl-focus, #1d4ed8);
  outline-offset: 3px;
}

.rbl-jee-shub-v4 img {
  max-width: 100%;
}

.rbl-jee-shub-v4 h1,
.rbl-jee-shub-v4 h2,
.rbl-jee-shub-v4 h3 {
  font-family: var(--rbl-font-display, Outfit, system-ui, sans-serif);
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
}

.rbl-jee-shub-v4 p {
  margin: 0;
}

/* Eyebrow — same role as .rbl-jee-eyebrow */
.rbl-jee-shub-v4 .eyebrow {
  color: #b74b1a;
  font-size: var(--rbl-fs-eyebrow, 0.75rem);
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ——— Hero ——— */
.rbl-jee-shub-v4 .hero {
  --hero-wash: linear-gradient(112deg, #fffdf9 0%, #f4faff 34%, var(--tint) 70%, #eff8ff 100%);
  background: var(--hero-wash);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e9eef4;
  isolation: isolate;
}

.rbl-jee-shub-v4 .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 92% 78%, var(--edge) 0, transparent 55%),
    radial-gradient(ellipse at 4% 100%, #ffeddfb7, transparent 42%);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.rbl-jee-shub-v4 .hero-artwork {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  bottom: 0;
  /* Match approved V4 right-side composition (kit: min(55vw, 780px)) */
  width: min(55vw, 780px);
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  overflow: hidden;
}

.rbl-jee-shub-v4 .hero-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0.93;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
}

.rbl-jee-shub-v4 .hero-inner {
  padding: 1.15rem 0 1.25rem;
  position: relative;
  z-index: 2;
}

.rbl-jee-shub-v4 .breadcrumbs {
  font-size: 0.75rem;
  color: #7f8a9a;
  margin-bottom: 1rem;
}

.rbl-jee-shub-v4 .breadcrumbs span {
  margin: 0 0.4rem;
  color: #a5b3c0;
}

.rbl-jee-shub-v4 .breadcrumbs strong {
  font-weight: 650;
  color: #52708a;
}

.rbl-jee-shub-v4 .breadcrumbs a:hover {
  color: var(--accent);
}

.rbl-jee-shub-v4 .hero-copy {
  max-width: min(36rem, 56%);
  position: relative;
  z-index: 2;
}

.rbl-jee-shub-v4 .eyebrow-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 4px;
  vertical-align: middle;
}

/* H1 — JEE hub heading role (long SEO title; keep rem clamp) */
.rbl-jee-shub-v4 .hero h1 {
  font-family: var(--rbl-font-display, Outfit, system-ui, sans-serif);
  font-size: clamp(1.75rem, 1.35rem + 1.1vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin-top: 0.45rem;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.rbl-jee-shub-v4 .hero h1 .rbl-jee-shub-v4__subject {
  color: var(--accent);
}

.rbl-jee-shub-v4 .hero h1 strong {
  font-weight: 800;
}

/* Visual second line without breaking SEO textContent spacing */
.rbl-jee-shub-v4 .hero h1 .rbl-jee-shub-v4__h1-tail {
  display: block;
}

/* Intro — JEE lead / CBSE hero paragraph role */
.rbl-jee-shub-v4 .hero-copy p {
  font-size: 0.95rem;
  color: #5c6c7e;
  max-width: 36rem;
  line-height: 1.55;
  margin-top: 0.75rem;
}

.rbl-jee-shub-v4 .hero-action-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.15rem;
  position: relative;
  z-index: 2;
}

.rbl-jee-shub-v4 .search-form {
  min-height: var(--rbl-touch-min, 48px);
  height: 3.05rem;
  display: flex;
  align-items: center;
  border-radius: var(--rbl-radius-lg, 12px);
  background: #fff;
  border: 1px solid #dbe5ef;
  box-shadow: var(--rbl-shadow);
  gap: 0.55rem;
  padding: 0.25rem 0.3rem 0.25rem 0.85rem;
  width: min(34rem, 58%);
}

.rbl-jee-shub-v4 .search-form img {
  height: 1.15rem;
  width: 1.15rem;
  opacity: 0.68;
  flex-shrink: 0;
}

.rbl-jee-shub-v4 .search-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--rbl-text-sm, 0.875rem);
  color: var(--ink);
}

.rbl-jee-shub-v4 .search-form input::placeholder {
  color: #8192a5;
}

.rbl-jee-shub-v4 .search-form button {
  min-height: var(--rbl-target, 44px);
  min-width: 5.5rem;
  padding: 0 1rem;
  border: 0;
  background: var(--orange);
  color: #fff;
  border-radius: var(--rbl-radius, 8px);
  font-weight: 700;
  font-size: var(--rbl-text-sm, 0.875rem);
}

.rbl-jee-shub-v4 .subjects {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
  position: relative;
  z-index: 2;
}

.rbl-jee-shub-v4 .subjects-intro {
  font-size: var(--rbl-fs-eyebrow, 0.75rem);
  letter-spacing: 0.08em;
  color: #75869a;
  font-weight: 750;
  margin-right: 0.2rem;
}

.rbl-jee-shub-v4 .subjects a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  min-height: var(--rbl-target, 44px);
  border: 1px solid #d8e3ed;
  background: #fff;
  border-radius: var(--rbl-radius, 8px);
  font-size: var(--rbl-text-sm, 0.875rem);
  font-weight: 700;
  transition: background 0.2s, border 0.2s;
}

.rbl-jee-shub-v4 .subjects a img {
  width: 1rem;
  height: 1rem;
}

.rbl-jee-shub-v4 .subjects a[aria-current="page"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 11px #174d921a;
}

.rbl-jee-shub-v4 .subjects a[aria-current="page"] img {
  filter: brightness(0) invert(1);
}

.rbl-jee-shub-v4 .subjects a[aria-current="page"]::after {
  content: "✓";
  font-size: 0.7rem;
}

.rbl-jee-shub-v4 .subjects a:not([aria-current="page"]):hover {
  background: var(--tint);
  border-color: var(--edge);
}

/* ——— Types ——— */
.rbl-jee-shub-v4 .types-section {
  background: #fff;
  padding: 1.15rem 0 1.2rem;
  border-bottom: 1px solid #edf0f5;
}

.rbl-jee-shub-v4 .types-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.rbl-jee-shub-v4 .types-heading h2,
.rbl-jee-shub-v4 .section-head h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 0.3rem;
}

.rbl-jee-shub-v4 .types-note {
  font-size: var(--rbl-fs-meta, 0.8125rem);
  color: var(--muted);
}

.rbl-jee-shub-v4 .type-list {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.rbl-jee-shub-v4 .type-option {
  min-height: var(--rbl-target, 44px);
  border: 1px solid #e0e7ef;
  background: #fff;
  border-radius: var(--rbl-radius-lg, 12px);
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: var(--rbl-text-sm, 0.875rem);
  min-width: 6.5rem;
  transition: background 0.15s, border 0.15s;
}

.rbl-jee-shub-v4 .type-option:hover {
  border-color: var(--accent);
}

.rbl-jee-shub-v4 .type-option img {
  height: 1.2rem;
  width: 1.2rem;
  flex-shrink: 0;
}

.rbl-jee-shub-v4 .type-option em {
  font-style: normal;
  color: #5c6c7e;
  font-size: var(--rbl-fs-meta, 0.8125rem);
  font-weight: 600;
}

.rbl-jee-shub-v4 .type-option.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 3px 12px #275a9917;
}

.rbl-jee-shub-v4 .type-option.is-active em {
  color: #ffffffd9;
}

.rbl-jee-shub-v4 .type-option.is-active img {
  filter: brightness(0) invert(1);
}

.rbl-jee-shub-v4 .type-option .type-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  gap: 0.15rem;
}

.rbl-jee-shub-v4 .type-option .type-copy span {
  white-space: nowrap;
}

/* ——— Chapters ——— */
.rbl-jee-shub-v4 .chapter-section {
  padding: 1.25rem 0 1.4rem;
}

.rbl-jee-shub-v4 .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.rbl-jee-shub-v4 .section-head > div:first-child {
  min-width: 0;
}

.rbl-jee-shub-v4 .section-head p {
  font-size: var(--rbl-fs-supporting, 0.875rem);
  color: #5c6c7e;
  margin-top: 0.4rem;
  line-height: 1.45;
}

.rbl-jee-shub-v4 .text-action,
.rbl-jee-shub-v4 .more-action,
.rbl-jee-shub-v4 .chapter-footer a {
  border: 0;
  background: transparent;
  color: var(--orange);
  font-size: var(--rbl-text-sm, 0.875rem);
  font-weight: 700;
  padding: 0.35rem;
}

/* Keep “All chapters ↗” as one unbreakable control */
.rbl-jee-shub-v4 .section-head > .text-action {
  flex-shrink: 0;
  white-space: nowrap;
  align-self: start;
  margin-top: 1.35rem; /* align beside H2 under eyebrow */
}

.rbl-jee-shub-v4 .chapters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.rbl-jee-shub-v4 .chapter-tile {
  position: relative;
  min-height: 3.75rem;
  padding: 0.7rem 1.75rem 0.7rem 0.8rem;
  background: #fff;
  border: 1px solid #e2e8ee;
  border-radius: var(--rbl-radius, 8px);
  display: flex;
  align-items: center;
  text-align: left;
  gap: 0.4rem;
  box-shadow: 0 1px 2px #142b4704;
  transition: background 0.15s, border 0.15s;
}

.rbl-jee-shub-v4 .chapter-tile:hover {
  border-color: var(--edge);
  background: var(--tint);
}

.rbl-jee-shub-v4 .chapter-tile .tile-name {
  font-size: var(--rbl-text-sm, 0.875rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.rbl-jee-shub-v4 .chapter-tile em {
  display: block;
  color: var(--accent);
  font-size: var(--rbl-fs-meta, 0.8125rem);
  font-style: normal;
  margin-top: 0.2rem;
  font-weight: 650;
}

.rbl-jee-shub-v4 .chapter-tile .tile-arrow {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #8294a8;
}

.rbl-jee-shub-v4 .chapter-footer {
  margin-top: 0.65rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
}

.rbl-jee-shub-v4 .chapter-footer a,
.rbl-jee-shub-v4 .chapter-footer button {
  font-size: var(--rbl-fs-meta, 0.8125rem);
}

/* Desktop shows all chapter tiles; keep “All chapters” visible for V4 chrome.
   Expand still works as a no-op when nothing is collapsed. */
@media (min-width: 761px) {
  .rbl-jee-shub-v4 #jee-chapters-expand-bottom {
    display: none;
  }
}

@media (max-width: 760px) {
  .rbl-jee-shub-v4 .chapters-grid .chapter-tile.is-collapsed-mobile {
    display: none;
  }
}

/* ——— Library ——— */
.rbl-jee-shub-v4 .library-section {
  padding: 1.5rem 0 1.85rem;
  background: #f8fafc;
  border-top: 1px solid #f0f2f5;
}

.rbl-jee-shub-v4 .library-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17.5rem;
  gap: 1.1rem;
}

.rbl-jee-shub-v4 .library-card {
  background: #fff;
  border: 1px solid #e3e9ef;
  border-radius: var(--rbl-radius-lg, 12px);
  padding: 1.1rem;
}

.rbl-jee-shub-v4 .library-heading {
  align-items: center;
}

.rbl-jee-shub-v4 .library-heading h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem);
}

/* Desktop: heading + tabs side-by-side is fine; mobile must not squeeze copy. */
@media (min-width: 761px) {
  .rbl-jee-shub-v4 .section-head.library-heading {
    align-items: center;
  }
}

.rbl-jee-shub-v4 .sort-tabs {
  background: #f4f6f9;
  display: flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: var(--rbl-radius, 8px);
  flex-shrink: 0;
}

.rbl-jee-shub-v4 .sort-tabs button {
  font-size: var(--rbl-fs-meta, 0.8125rem);
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 0.5rem 0.7rem;
  font-weight: 700;
  color: #657487;
  min-height: 2.5rem;
}

.rbl-jee-shub-v4 .sort-tabs button[aria-selected="true"] {
  color: var(--accent);
  background: white;
  box-shadow: 0 1px 6px #0f27431b;
}

.rbl-jee-shub-v4 .pdf-list[hidden] {
  display: none !important;
}

.rbl-jee-shub-v4 .pdf-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border: 0;
  border-top: 1px solid #ecf0f4;
  background: #fff;
  text-align: left;
  padding: 0.85rem 0.15rem;
  min-height: 3.5rem;
}

.rbl-jee-shub-v4 .pdf-row:hover .pdf-main b {
  color: var(--accent);
}

.rbl-jee-shub-v4 .pdf-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.5rem;
  background: #fff0e7;
  border-radius: var(--rbl-radius, 8px);
}

.rbl-jee-shub-v4 .pdf-icon img {
  height: 1.15rem;
  width: 1.15rem;
}

.rbl-jee-shub-v4 .pdf-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.rbl-jee-shub-v4 .pdf-main b {
  font-size: var(--rbl-text-sm, 0.875rem);
  font-weight: 700;
  line-height: 1.35;
}

.rbl-jee-shub-v4 .pdf-main small {
  color: #5c6c7e;
  font-size: var(--rbl-fs-meta, 0.8125rem);
}

.rbl-jee-shub-v4 .pdf-arrow {
  color: #8a9ba8;
  font-size: 1rem;
}

.rbl-jee-shub-v4 .more-action {
  display: inline-flex;
  padding: 0.75rem 0 0.15rem;
}

.rbl-jee-shub-v4 .library-side {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rbl-jee-shub-v4 .help-panel,
.rbl-jee-shub-v4 .upload-panel {
  border: 1px solid #e3e9ef;
  border-radius: var(--rbl-radius-lg, 12px);
  padding: 1.05rem;
  background: #fff;
}

.rbl-jee-shub-v4 .help-icon,
.rbl-jee-shub-v4 .upload-icon {
  display: grid;
  place-items: center;
  border-radius: var(--rbl-radius, 8px);
  width: 2.2rem;
  height: 2.2rem;
  background: #eff6ff;
  margin-bottom: 0.55rem;
}

.rbl-jee-shub-v4 .help-icon img,
.rbl-jee-shub-v4 .upload-icon img {
  width: 1.1rem;
  height: 1.1rem;
}

.rbl-jee-shub-v4 .library-side h3 {
  font-size: var(--rbl-text-lg, 1.125rem);
  letter-spacing: -0.03em;
  font-weight: 800;
}

.rbl-jee-shub-v4 .library-side p {
  font-size: var(--rbl-fs-supporting, 0.875rem);
  line-height: 1.5;
  color: #5c6c7e;
  margin: 0.35rem 0 0.75rem;
}

.rbl-jee-shub-v4 .upload-panel {
  background: var(--warm);
  border-color: #f4ece3;
}

.rbl-jee-shub-v4 .upload-icon {
  background: #fff;
}

.rbl-jee-shub-v4 .upload-panel a {
  display: flex;
  background: var(--orange);
  color: #fff;
  border-radius: var(--rbl-radius, 8px);
  min-height: var(--rbl-touch-min, 48px);
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: var(--rbl-text-sm, 0.875rem);
  padding: 0.5rem;
}

/* ——— About / FAQ ——— */
.rbl-jee-shub-v4 .about-section {
  padding: 1.2rem 0 1.7rem;
}

.rbl-jee-shub-v4 .about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.rbl-jee-shub-v4 .about,
.rbl-jee-shub-v4 .faqs {
  border: 1px solid #e8edf2;
  border-radius: var(--rbl-radius-lg, 12px);
  background: #fff;
}

.rbl-jee-shub-v4 .about summary {
  padding: 0.85rem;
  font-weight: 750;
  font-size: var(--rbl-text-sm, 0.875rem);
  cursor: pointer;
}

.rbl-jee-shub-v4 .about .about-body {
  padding: 0 0.85rem 0.9rem;
  color: #5c6c7e;
  font-size: var(--rbl-fs-supporting, 0.875rem);
  line-height: 1.55;
}

.rbl-jee-shub-v4 .about .about-body p {
  margin-bottom: 0.55rem;
}

.rbl-jee-shub-v4 .faqs {
  padding: 0.85rem;
}

.rbl-jee-shub-v4 .faqs h2 {
  font-size: var(--rbl-text-lg, 1.125rem);
  margin: 0 0 0.45rem;
  font-weight: 800;
}

.rbl-jee-shub-v4 .faqs details {
  border-top: 1px solid #edf1f4;
}

.rbl-jee-shub-v4 .faqs summary {
  padding: 0.65rem 0;
  font-size: var(--rbl-text-sm, 0.875rem);
  font-weight: 700;
  cursor: pointer;
}

.rbl-jee-shub-v4 .faqs p {
  font-size: var(--rbl-fs-supporting, 0.875rem);
  color: #5c6c7e;
  padding-bottom: 0.65rem;
  line-height: 1.5;
}

.rbl-jee-shub-v4 .full-library-section {
  padding: 0.5rem 0 1.75rem;
  background: #fff;
}

.rbl-jee-shub-v4 .full-library-section .rbl-stype-v2-section {
  margin: 0;
}

/* Ensure all-resources list uses readable global resource-row type */
.rbl-jee-shub-v4 .rbl-stype-v2-section-title {
  font-family: var(--rbl-font-display, Outfit, system-ui, sans-serif);
  font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem);
  font-weight: 800;
}

@media (max-width: 1000px) {
  .rbl-jee-shub-v4 .hero-copy {
    max-width: 62%;
  }

  .rbl-jee-shub-v4 .hero-artwork {
    width: min(58vw, 720px);
  }

  .rbl-jee-shub-v4 .library-layout {
    grid-template-columns: minmax(0, 1fr) 14.5rem;
  }

  .rbl-jee-shub-v4 .chapters-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .rbl-jee-shub-v4 .rbl-jee-shub-v4__container {
    width: calc(100% - 1.875rem);
  }

  .rbl-jee-shub-v4 .hero-inner {
    padding: 0.85rem 0 1rem;
  }

  .rbl-jee-shub-v4 .breadcrumbs {
    font-size: 0.75rem;
    margin-bottom: 0.65rem;
  }

  .rbl-jee-shub-v4 .hero-copy {
    max-width: 100%;
    padding-right: 22%;
  }

  .rbl-jee-shub-v4 .hero h1 {
    font-size: clamp(1.5rem, 1.2rem + 2.2vw, 1.85rem);
    line-height: 1.18;
    margin-top: 0.35rem;
  }

  .rbl-jee-shub-v4 .hero-copy p {
    max-width: none;
    font-size: var(--rbl-fs-supporting, 0.875rem);
    line-height: 1.5;
    margin-top: 0.55rem;
    position: relative;
    z-index: 2;
  }

  /*
   * Mobile motif positioning (SEO-length hero):
   * SVGs paint their recognisable focus upper-right (physics atom ~435,111 in
   * 620×286). Bottom-anchoring parked that focus under search/tabs and left the
   * intro band empty. Pin the artwork to the upper hero beside H1/intro instead.
   */
  .rbl-jee-shub-v4 .hero-artwork {
    /* Sit beside H1/intro; keep clear of search + subject tabs */
    top: 1.7rem;
    bottom: 8.35rem;
    right: -2.1rem;
    width: min(82vw, 19rem);
    max-width: 84%;
    height: auto;
    /* Cap so painted focus stays in the intro band on short heroes (Math) */
    max-height: 12.75rem;
    align-items: stretch;
    justify-content: flex-end;
    opacity: 1;
    z-index: 0;
  }

  .rbl-jee-shub-v4 .hero-artwork img {
    width: 100%;
    height: 100%;
    max-height: none;
    /* Soft wash — positioning (not opacity alone) places the painted motif */
    opacity: 0.42;
    object-fit: cover;
    /* Bias toward painted focus (~70% x / ~35% y across subject SVGs) */
    object-position: 70% 32%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  }

  .rbl-jee-shub-v4 .hero-action-row,
  .rbl-jee-shub-v4 .subjects {
    position: relative;
    z-index: 2;
  }

  .rbl-jee-shub-v4 .hero-action-row {
    margin-top: 0.75rem;
  }

  .rbl-jee-shub-v4 .search-form {
    width: 100%;
    height: auto;
    min-height: var(--rbl-touch-min, 48px);
    padding: 0.25rem 0.3rem 0.25rem 0.7rem;
  }

  .rbl-jee-shub-v4 .search-form input {
    font-size: var(--rbl-fs-search, 16px);
  }

  .rbl-jee-shub-v4 .search-form button {
    font-size: var(--rbl-text-sm, 0.875rem);
    min-width: 4.5rem;
  }

  .rbl-jee-shub-v4 .subjects {
    margin-top: 0.65rem;
    gap: 0.35rem;
  }

  .rbl-jee-shub-v4 .subjects-intro {
    display: none;
  }

  .rbl-jee-shub-v4 .subjects a {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.35rem;
    gap: 0.3rem;
    font-size: var(--rbl-fs-meta, 0.8125rem);
  }

  .rbl-jee-shub-v4 .subjects a img {
    height: 0.9rem;
    width: 0.9rem;
  }

  .rbl-jee-shub-v4 .types-section {
    padding: 0.85rem 0 0.95rem;
  }

  .rbl-jee-shub-v4 .types-heading {
    margin-bottom: 0.55rem;
    align-items: start;
  }

  .rbl-jee-shub-v4 .types-heading h2,
  .rbl-jee-shub-v4 .section-head h2 {
    font-size: 1.25rem;
  }

  .rbl-jee-shub-v4 .types-note {
    display: none;
  }

  /* V4 density: 3 columns at ~360–430px (and up to 760) */
  .rbl-jee-shub-v4 .type-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .rbl-jee-shub-v4 .type-option {
    min-width: 0;
    min-height: var(--rbl-target, 44px);
    height: auto;
    padding: 0.4rem 0.45rem;
    gap: 0.4rem;
    align-items: center; /* icon + label vertically centred once count is hidden */
  }

  .rbl-jee-shub-v4 .type-option img {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
  }

  .rbl-jee-shub-v4 .type-option .type-copy {
    gap: 0;
    justify-content: center;
  }

  .rbl-jee-shub-v4 .type-option .type-copy span {
    white-space: normal;
    line-height: 1.25;
    /* Keep approved Ribblu mobile type — do not shrink further */
    font-size: var(--rbl-text-sm, 0.875rem);
  }

  /* Suppress PDF-count line on mobile cards only; data remains in markup/DB */
  .rbl-jee-shub-v4 .type-option em {
    display: none;
  }

  .rbl-jee-shub-v4 .chapter-section {
    padding: 0.95rem 0 1.1rem;
    /* Anchor / in-view clearance vs fixed .rbl-bottom-nav (body already pads page end) */
    scroll-margin-bottom: calc(var(--rbl-bottom-nav-h, 64px) + 0.5rem);
  }

  .rbl-jee-shub-v4 #chapters,
  .rbl-jee-shub-v4 .chapter-section .section-head {
    scroll-margin-bottom: calc(var(--rbl-bottom-nav-h, 64px) + 0.5rem);
  }

  .rbl-jee-shub-v4 .section-head {
    align-items: start;
    margin-bottom: 0.65rem;
  }

  .rbl-jee-shub-v4 .section-head > .text-action {
    margin-top: 1.15rem;
    white-space: nowrap;
    font-size: var(--rbl-fs-meta, 0.8125rem);
    padding: 0.25rem 0;
  }

  .rbl-jee-shub-v4 .chapters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .rbl-jee-shub-v4 .chapter-tile {
    min-height: 3.35rem;
    padding: 0.55rem 1.3rem 0.55rem 0.65rem;
  }

  .rbl-jee-shub-v4 .library-section {
    padding: 1rem 0 1.2rem;
  }

  .rbl-jee-shub-v4 .library-layout {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  /*
   * Regression fix: .section-head is a 2-col grid. On mobile that put
   * Most Downloaded / Recently Added beside the Popular PDFs heading and
   * crushed the title/description into a word-wrap column. Stack instead.
   */
  .rbl-jee-shub-v4 .section-head.library-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }

  .rbl-jee-shub-v4 .library-heading > div:first-child {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .rbl-jee-shub-v4 .library-heading h2,
  .rbl-jee-shub-v4 .library-heading p {
    max-width: none;
  }

  .rbl-jee-shub-v4 .library-heading .sort-tabs {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .rbl-jee-shub-v4 .help-panel {
    display: none;
  }

  .rbl-jee-shub-v4 .upload-panel {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 0 0.65rem;
  }

  .rbl-jee-shub-v4 .upload-icon {
    grid-row: 1 / 3;
    margin: 0;
  }

  .rbl-jee-shub-v4 .upload-panel p {
    grid-column: 2;
  }

  .rbl-jee-shub-v4 .upload-panel a {
    grid-column: 1 / -1;
  }

  .rbl-jee-shub-v4 .about-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .rbl-jee-shub-v4 {
    padding-bottom: 0.5rem; /* page-end clearance comes from global bottom-nav body pad */
  }
}

/* Narrow mobile (~320): 2-col types; keep readable global type */
@media (max-width: 359px) {
  .rbl-jee-shub-v4 .rbl-jee-shub-v4__container {
    width: calc(100% - 1.5rem);
  }

  .rbl-jee-shub-v4 .hero-copy {
    padding-right: 16%;
  }

  .rbl-jee-shub-v4 .hero h1 {
    font-size: 1.45rem;
  }

  .rbl-jee-shub-v4 .hero-artwork {
    top: 1.5rem;
    bottom: 7.85rem;
    right: -2.35rem;
    width: min(88vw, 17.5rem);
    max-width: 88%;
    max-height: 11.5rem;
  }

  .rbl-jee-shub-v4 .hero-artwork img {
    opacity: 0.4;
    object-position: 72% 30%;
  }

  .rbl-jee-shub-v4 .subjects {
    gap: 0.25rem;
  }

  .rbl-jee-shub-v4 .subjects a {
    font-size: 0.6875rem;
    padding: 0.45rem 0.3rem;
    gap: 0;
    min-height: var(--rbl-target, 44px);
  }

  .rbl-jee-shub-v4 .subjects a img {
    display: none;
  }

  .rbl-jee-shub-v4 .subjects a[aria-current="page"]::after {
    display: none;
  }

  .rbl-jee-shub-v4 .type-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .rbl-jee-shub-v4 .type-option {
    padding: 0.4rem 0.45rem;
  }

  .rbl-jee-shub-v4 .chapter-section .section-head p {
    display: none;
  }

  .rbl-jee-shub-v4 .section-head > .text-action {
    margin-top: 1rem;
  }

  /* Keep Most Downloaded / Recently Added as one horizontal row under the heading */
  .rbl-jee-shub-v4 .library-heading .sort-tabs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
  }

  .rbl-jee-shub-v4 .library-heading .sort-tabs button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.45rem 0.35rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }
}