/* iLearn Maths public resource pages — clean visual edition */
.resource-page {
  margin: 0;
  background: #f7f9fc;
  color: #24364d;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.resource-page *, .resource-page *::before, .resource-page *::after { box-sizing: border-box; }
.resource-main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 1rem 0 3rem; }
.resource-breadcrumbs { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.2rem 0 .85rem; color:#68798d; font-size:.86rem; }
.resource-breadcrumbs a { color:#3d6994; font-weight:700; text-decoration:none; }
.resource-breadcrumbs a:hover, .resource-breadcrumbs a:focus-visible { text-decoration:underline; }
.resource-kicker, .eyebrow { margin:0 0 .35rem; color:#4f759c; font-size:.73rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.compact-heading { margin-bottom:.9rem; }
.compact-heading h2 { margin:0; color:#1f3047; font-size:clamp(1.35rem,2.4vw,1.85rem); letter-spacing:-.02em; }

/* Hero */
.clean-hero { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:center; gap:1.8rem; min-height:310px; padding:clamp(1.5rem,4vw,2.7rem); border:1px solid #dde5ee; border-radius:26px; background:#fff; box-shadow:0 10px 30px rgba(34,56,82,.06); }
.clean-hero-copy { max-width:690px; }
.clean-hero h1 { margin:0; color:#17283d; font-size:clamp(2.2rem,5vw,4rem); line-height:1.03; letter-spacing:-.045em; }
.clean-hero-copy > p:not(.resource-kicker) { max-width:650px; margin:.8rem 0 0; color:#53677d; font-size:clamp(1rem,1.8vw,1.18rem); line-height:1.55; }
.resource-hero-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.1rem; }
.resource-button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:.65rem 1rem; border:1px solid #ccd8e4; border-radius:12px; background:#fff; color:#29435f; font-weight:850; text-decoration:none; transition:.15s ease; }
.resource-button.primary { border-color:#3978b7; background:#3978b7; color:#fff; }
.resource-button:hover, .resource-button:focus-visible { transform:translateY(-1px); box-shadow:0 6px 16px rgba(42,76,108,.12); outline:none; }
.math-visual { min-height:215px; display:grid; place-items:center; border-radius:24px; background:#f4f8fd; border:1px solid #e0e8f1; overflow:hidden; }

/* Visual maths illustrations */
.visual-equation { width:170px; display:grid; justify-items:end; font-variant-numeric:tabular-nums; color:#254c72; font-size:2.35rem; font-weight:800; }
.visual-equation .operator { margin-top:.1rem; }
.visual-equation i { width:100%; border-top:3px solid #254c72; margin:.25rem 0 .15rem; }
.visual-equation strong { color:#2f7655; }
.dot-array { display:grid; grid-template-columns:repeat(4,24px); gap:13px; justify-content:center; align-items:center; }
.dot-array span { width:20px; height:20px; border-radius:50%; background:#3e79b1; }
.dot-array b { grid-column:1/-1; margin-top:.55rem; color:#284b70; font-size:1.35rem; text-align:center; }
.group-visual { display:grid; gap:.55rem; color:#3d75ad; font-size:1.45rem; letter-spacing:.25rem; text-align:center; }
.group-visual div { padding:.35rem .6rem; border:2px solid #cadbea; border-radius:999px; background:#fff; }
.group-visual b { color:#294d71; font-size:1.2rem; letter-spacing:0; }
.fraction-visual { display:grid; place-items:center; gap:.65rem; }
.fraction-circle { width:140px; height:140px; border-radius:50%; border:3px solid #2f6fa9; background:conic-gradient(#4a83ba 0 50%, #fff 50% 100%); box-shadow:inset 0 0 0 3px #fff; }
.fraction-visual strong { color:#2d5e8d; font-size:2rem; }
.place-chart { display:grid; grid-template-columns:repeat(3,72px); gap:5px; text-align:center; }
.place-chart span { display:grid; place-items:center; min-height:82px; border:2px solid #ccdae7; border-radius:12px; background:#fff; color:#285b86; font-size:2rem; font-weight:900; }
.place-chart small { display:block; color:#75889b; font-size:.63rem; font-weight:800; text-transform:uppercase; }
.place-chart b { grid-column:1/-1; margin-top:.4rem; color:#2b4f70; font-size:1.4rem; }
.decimal-chart { grid-template-columns:repeat(3,82px); }
.ruler-visual { width:240px; padding:1rem; border-radius:14px; background:#fff; border:2px solid #ccdae7; color:#2e608d; }
.ruler-ticks { height:58px; background:repeating-linear-gradient(90deg,#2f668f 0 2px, transparent 2px 19px); border-bottom:3px solid #2f668f; }
.ruler-visual strong { display:block; margin-top:.7rem; font-size:1.45rem; text-align:center; }
.clock-visual { position:relative; width:165px; height:165px; border:5px solid #356d9f; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 8px #f2f7fb; }
.clock-visual::before { content:"12"; position:absolute; top:8px; left:50%; transform:translateX(-50%); color:#668098; font-weight:800; }
.clock-visual::after { content:"6"; position:absolute; bottom:7px; left:50%; transform:translateX(-50%); color:#668098; font-weight:800; }
.clock-hand { position:absolute; left:50%; top:50%; transform-origin:0 50%; height:4px; border-radius:4px; background:#294d70; }
.clock-hand.hour { width:45px; transform:rotate(105deg); }
.clock-hand.minute { width:62px; transform:rotate(180deg); background:#4f83b2; }
.clock-visual i { position:absolute; width:12px; height:12px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:#294d70; }
.clock-visual b { position:absolute; left:50%; bottom:-42px; transform:translateX(-50%); color:#2d577e; white-space:nowrap; font-size:1.35rem; }
.money-visual { position:relative; width:210px; height:150px; }
.money-visual span { position:absolute; display:grid; place-items:center; width:118px; height:70px; border:2px solid #b9d3c3; border-radius:13px; background:#fff; color:#367356; font-size:1.8rem; font-weight:900; }
.money-visual span:first-child { left:8px; top:8px; transform:rotate(-6deg); }
.money-visual span:nth-child(2) { right:5px; top:48px; transform:rotate(5deg); }
.money-visual strong { position:absolute; left:50%; bottom:-12px; transform:translateX(-50%); color:#285f47; font-size:1.7rem; }
.math-board { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; width:100%; padding:.8rem; }
.math-board span { min-height:68px; display:grid; place-items:center; border:1px solid #d8e3ed; border-radius:15px; background:#fff; color:#315f8c; font-size:1.25rem; font-weight:900; }

/* Compact sections */
.quick-maths, .choose-year, .clean-skills, .clean-related, .clean-topic-section, .clean-year-section { margin-top:1.15rem; padding:1.35rem; border:1px solid #e0e7ef; border-radius:22px; background:#fff; box-shadow:0 6px 20px rgba(35,55,79,.04); }
.snapshot-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.math-snapshot { min-height:105px; display:grid; align-content:center; justify-items:center; gap:.35rem; padding:.8rem; border-radius:16px; background:#f7faff; border:1px solid #dfe8f1; text-align:center; }
.math-snapshot small { color:#718399; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.math-snapshot strong { color:#254f78; font-size:clamp(1.15rem,2vw,1.5rem); }
.year-pick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.year-pick { min-height:92px; display:grid; grid-template-columns:74px 1fr auto; gap:.75rem; align-items:center; padding:.75rem .9rem; border:1px solid #dce6ef; border-radius:15px; background:#fbfdff; color:inherit; text-decoration:none; transition:.15s ease; }
.year-pick:hover, .year-pick:focus-visible { transform:translateY(-2px); border-color:#adc6dc; box-shadow:0 7px 17px rgba(45,73,104,.08); outline:none; }
.year-pick > span { display:grid; place-items:center; min-height:54px; border-radius:12px; background:#eaf3fb; color:#2e6495; font-size:1rem; font-weight:900; }
.year-pick strong { color:#30455d; font-size:.93rem; line-height:1.25; }
.year-pick b { color:#3d78ae; font-size:1.2rem; }
.skill-chip-list { display:flex; flex-wrap:wrap; gap:.55rem; }
.skill-chip { display:inline-flex; align-items:center; min-height:39px; padding:.5rem .75rem; border-radius:999px; background:#f2f7fb; border:1px solid #d9e5ef; color:#3b5874; font-size:.88rem; font-weight:750; }
.resource-details { margin-top:1rem; border-top:1px solid #e4eaf0; padding-top:.85rem; }
.resource-details summary { width:max-content; max-width:100%; color:#396b98; font-weight:850; cursor:pointer; }
.resource-details ul { margin:.7rem 0 0; padding-left:1.25rem; color:#586b7e; line-height:1.55; }
.resource-details li { margin:.35rem 0; }
.related-links { display:flex; flex-wrap:wrap; gap:.55rem; }
.related-links a { display:inline-flex; align-items:center; min-height:40px; padding:.5rem .75rem; border:1px solid #d7e2ec; border-radius:999px; background:#f8fbfd; color:#356895; font-weight:800; text-decoration:none; }
.related-links a:hover, .related-links a:focus-visible { background:#eef6fb; border-color:#acc5da; outline:none; }
.resource-cta { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.15rem; padding:1.2rem 1.35rem; border-radius:20px; background:#243c56; color:#fff; }
.resource-cta h2 { margin:0 0 .25rem; color:#fff; font-size:1.4rem; }
.resource-cta p { margin:0; color:#dce8f2; }
.compact-cta { min-height:102px; }

/* Main topic hub */
.hub-hero { min-height:300px; }
.clean-topic-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.7rem; }
.clean-topic-card { min-height:145px; display:grid; align-content:center; justify-items:center; gap:.38rem; padding:.8rem; border:1px solid #dce6ef; border-radius:17px; background:#fbfdff; color:inherit; text-decoration:none; text-align:center; transition:.15s ease; }
.clean-topic-card:hover, .clean-topic-card:focus-visible { transform:translateY(-2px); border-color:#a9c4dc; box-shadow:0 8px 18px rgba(43,72,103,.08); outline:none; }
.clean-topic-card > span { min-width:54px; height:54px; display:grid; place-items:center; padding:0 .45rem; border-radius:15px; background:#eaf3fb; color:#2f6b9f; font-size:1.35rem; font-weight:900; }
.clean-topic-card strong { color:#263d57; font-size:1rem; }
.clean-topic-card small { color:#718397; font-size:.78rem; line-height:1.25; }
.year-button-row { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.55rem; }
.year-button { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:.45rem; padding:.65rem .75rem; border:1px solid #dce6ef; border-radius:14px; background:#fbfdff; color:#315f8a; text-decoration:none; }
.year-button strong { color:#315878; }
.year-button:hover, .year-button:focus-visible { border-color:#a9c4dc; background:#f2f8fc; outline:none; }

/* Homepage resource cards kept clean and compact */
.home-resource-section { margin:1.25rem 0; }
.home-resource-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.7rem; }
.home-resource-card { display:flex; min-height:132px; flex-direction:column; padding:.85rem; border:1px solid #dce6ef; border-radius:16px; background:#fff; text-decoration:none; box-shadow:0 4px 13px rgba(36,54,83,.04); }
.home-resource-card:hover, .home-resource-card:focus-visible { transform:translateY(-2px); box-shadow:0 8px 18px rgba(36,54,83,.08); outline:none; }
.home-resource-card span { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:#eef6fc; color:#3372aa; font-size:1.15rem; font-weight:900; }
.home-resource-card strong { margin:.6rem 0 .2rem; color:#233852; }
.home-resource-card small { color:#718195; line-height:1.3; }
.home-resource-link { display:inline-flex; margin-top:.8rem; color:#376fa6; font-weight:850; text-decoration:none; }
.home-resource-link:hover, .home-resource-link:focus-visible { text-decoration:underline; }

/* Year-page topic links */
.year-topic-resources { width:min(1160px,100%); margin:1rem auto; padding:1rem; border:1px solid #dce6ef; border-radius:16px; background:#fff; box-shadow:0 5px 15px rgba(36,54,83,.04); }
.year-topic-resources h2 { margin:0 0 .25rem; color:#21364f; font-size:1.22rem; }
.year-topic-resources p { margin:.15rem 0 .65rem; color:#65778b; font-size:.91rem; }
.year-topic-resource-links { display:flex; flex-wrap:wrap; gap:.45rem; }
.year-topic-resource-links a { display:inline-flex; min-height:38px; align-items:center; padding:.45rem .7rem; border:1px solid #d4e1ec; border-radius:999px; background:#f7fbfe; color:#376b9d; font-weight:800; text-decoration:none; font-size:.88rem; }
.year-topic-resource-links a:hover, .year-topic-resource-links a:focus-visible { background:#edf6fd; border-color:#a8c4dd; outline:none; }

@media (max-width: 980px) {
  .clean-hero { grid-template-columns:1fr 270px; }
  .clean-topic-grid, .home-resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .year-pick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .year-button-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .resource-main { width:min(100% - 1rem,1120px); padding-top:.65rem; }
  .clean-hero { grid-template-columns:1fr; min-height:auto; border-radius:21px; padding:1.25rem; }
  .math-visual { min-height:180px; }
  .hub-hero .math-board { min-height:180px; }
  .snapshot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .year-pick-grid, .clean-topic-grid, .home-resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .year-button-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .year-pick { grid-template-columns:64px 1fr auto; }
  .resource-cta { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 440px) {
  .clean-topic-grid, .home-resource-grid, .year-pick-grid { grid-template-columns:1fr; }
  .snapshot-grid { grid-template-columns:1fr 1fr; }
}

/* Batch 3 visuals: geometry, statistics and probability */
.geometry-visual { width:240px; min-height:180px; position:relative; display:grid; place-items:center; }
.geometry-visual .geo-square { position:absolute; width:82px; height:82px; left:23px; top:26px; border:4px solid #356f9f; border-radius:8px; background:#fff; transform:rotate(-7deg); }
.geometry-visual .geo-triangle { position:absolute; width:0; height:0; right:28px; top:30px; border-left:48px solid transparent; border-right:48px solid transparent; border-bottom:86px solid #9fc4df; }
.geometry-visual .geo-triangle::after { content:""; position:absolute; left:-40px; top:9px; width:0; height:0; border-left:40px solid transparent; border-right:40px solid transparent; border-bottom:71px solid #fff; }
.geometry-visual .geo-circle { position:absolute; width:66px; height:66px; left:88px; top:74px; border:4px solid #4b8467; border-radius:50%; background:#fff; }
.geometry-visual b { position:absolute; bottom:4px; color:#2d5c86; font-size:1.45rem; letter-spacing:.25rem; }
.statistics-visual { width:240px; display:grid; justify-items:center; gap:.7rem; }
.stat-bars { width:215px; height:145px; display:flex; align-items:flex-end; justify-content:center; gap:18px; padding:12px 18px 0; border-left:3px solid #52708c; border-bottom:3px solid #52708c; background:#fff; border-radius:8px 8px 0 0; }
.stat-bars span { width:28px; height:var(--h); min-height:24px; border-radius:7px 7px 0 0; background:#4b82b4; }
.statistics-visual b { color:#2d5c86; font-size:1.35rem; }
.probability-visual { display:grid; place-items:center; gap:.8rem; }
.probability-spinner { width:150px; height:150px; position:relative; border:4px solid #356f9f; border-radius:50%; background:conic-gradient(#6c9fc8 0 25%, #fff 25% 50%, #6c9fc8 50% 75%, #fff 75% 100%); box-shadow:inset 0 0 0 3px #fff; }
.probability-spinner::before,.probability-spinner::after { content:""; position:absolute; background:#356f9f; }
.probability-spinner::before { width:3px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.probability-spinner::after { width:100%; height:3px; left:0; top:50%; transform:translateY(-50%); }
.probability-spinner i { position:absolute; left:50%; top:-17px; transform:translateX(-50%); width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:20px solid #2f7655; z-index:2; }
.probability-visual b { color:#2d5c86; font-size:1.5rem; }
.home-resource-more { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.8rem; }
.home-resource-more a { min-height:38px; display:inline-flex; align-items:center; padding:.45rem .72rem; border:1px solid #d7e2ec; border-radius:999px; background:#f8fbfd; color:#356895; font-weight:800; text-decoration:none; }
.home-resource-more a:hover,.home-resource-more a:focus-visible { background:#eef6fb; border-color:#acc5da; outline:none; }


/* SEO Stage 3 — Year + Topic landing pages */
.year-topic-hero .year-topic-badge{display:inline-flex;align-items:center;justify-content:center;min-width:74px;min-height:42px;padding:.45rem .75rem;border-radius:999px;background:#eaf3fb;color:#2f6595;font-weight:900;margin-bottom:.65rem}
.lesson-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.lesson-preview{display:grid;grid-template-columns:58px 1fr;gap:.7rem;align-items:center;min-height:76px;padding:.7rem .8rem;border:1px solid #dfe7ef;border-radius:14px;background:#fbfdff}
.lesson-preview span{display:grid;place-items:center;min-height:48px;border-radius:11px;background:#eef6fc;color:#356d9f;font-size:.78rem;font-weight:900;text-align:center}
.lesson-preview strong{color:#30465e;font-size:.9rem;line-height:1.3}
.year-topic-nav{display:flex;flex-wrap:wrap;gap:.55rem}
.year-topic-nav a{display:inline-flex;align-items:center;min-height:40px;padding:.5rem .75rem;border:1px solid #d7e2ec;border-radius:999px;background:#f8fbfd;color:#356895;font-weight:800;text-decoration:none}
.year-topic-nav a:hover,.year-topic-nav a:focus-visible{background:#eef6fb;border-color:#acc5da;outline:none}
@media(max-width:720px){.lesson-preview-grid{grid-template-columns:1fr}.year-topic-hero.clean-hero{grid-template-columns:1fr}}