/* Shared first-level directory for Competitive Exams, Coding,
   School Subjects, and Fun Quizzes. School Subjects is the baseline. */

.category-landing-screen {
  width:100%;
  max-width:920px!important;
  padding:24px 20px 64px!important;
  background:transparent!important;
}

.category-landing-screen > .back-btn {
  min-height:38px;
  margin:0 0 16px!important;
  margin-top:-15px!important;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  color:var(--text-muted);
  box-shadow:0 4px 14px rgba(31,24,20,.06);
  font-size:.76rem;
  font-weight:650;
  backdrop-filter:blur(10px);
}

.category-landing-screen > .sets-hero,
.category-landing-screen > .subject-hero {
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:18px;
  padding:18px 0 24px;
}

.category-landing-screen .sets-hero .cat-hero-icon,
.category-landing-screen .subject-hero .exam-hero-icon {
  grid-row:1 / 3;
  align-self:center;
  margin:0;
}

.category-landing-screen .cat-hero-logo,
.category-landing-screen .exam-hero-logo {
  width:68px;
  height:68px;
  object-fit:contain;
}

.category-landing-screen .sets-hero h2,
.category-landing-screen .subject-hero h2 {
  align-self:end;
  margin:0 0 3px;
  color:var(--text);
  font:750 2rem/1.15 'Playfair Display',Georgia,serif;
}

.category-landing-screen .sets-hero .hero-sub,
.category-landing-screen .subject-hero .hero-sub {
  align-self:start;
  max-width:none;
  color:var(--text-muted);
  font-size:.84rem;
}

.category-landing-screen .section-title {
  margin:0 0 13px;
}

.category-landing-screen #group-grid,
.category-landing-screen #exam-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}

.category-landing-screen #group-grid .category-card,
.category-landing-screen #exam-grid .exam-card {
  width:100%;
  min-width:0;
  min-height:108px;
  padding:15px 16px;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:13px;
  text-align:left;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:none;
}

.category-landing-screen #group-grid .category-card {
  border-top:2px solid var(--cat-color,var(--accent));
}
.category-landing-screen #exam-grid .exam-card {
  border-color:var(--ce-line,var(--border));
  border-top:2px solid var(--exam-color,var(--accent));
}

.category-landing-screen #group-grid .category-card:hover,
.category-landing-screen #exam-grid .exam-card:not(.exam-card--soon):hover {
  border-color:var(--cat-color,var(--exam-color,var(--accent)));
  background:var(--surface2);
  box-shadow:0 5px 16px color-mix(
    in srgb,
    var(--cat-color,var(--exam-color,var(--accent))) 14%,
    transparent
  );
  transform:translateY(-1px);
}

.school-group #group-grid .ap-physics-category-card:hover {
  border-color:var(--cat-color,var(--accent));
  background:var(--surface2);
  box-shadow:0 5px 16px color-mix(in srgb,var(--cat-color) 14%,transparent);
  transform:translateY(-1px);
}

/* Layout for the homepage track cards, moved from style.css. Declared
   before the border rules below, which is the order the browser saw when
   this lived in style.css and that file loaded first. */
.home-grid .category-card {
  width: 100%; height: 142px; min-height: 142px;
  padding: 20px 22px; gap: 17px;
  flex-direction: row; justify-content: flex-start;
  text-align: left; border-top-width: 1px;
  border-radius: 14px; box-shadow: none;
}

.home-grid .category-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb,var(--cat-color) 48%,var(--border));
  box-shadow: 0 5px 18px rgba(48,34,22,.07);
}

/* The same border language on the four homepage track cards. */
.home-grid .category-card {
  border:1px solid var(--border);
  border-top:2px solid var(--cat-color,var(--accent));
}
.home-grid .category-card:hover {
  border-color:var(--cat-color,var(--accent));
  box-shadow:0 5px 16px color-mix(in srgb,var(--cat-color,var(--accent)) 14%,transparent);
}

.category-landing-screen #group-grid .cat-icon-img,
.category-landing-screen #group-grid .cat-icon,
.category-landing-screen #exam-grid .exam-logo-img {
  width:52px;
  height:52px;
  flex:0 0 52px;
  object-fit:contain;
}

.category-landing-screen #group-grid .cat-info,
.category-landing-screen #exam-grid .exam-info {
  min-width:0;
  align-items:flex-start;
  text-align:left;
}

.category-landing-screen #group-grid .cat-name,
.category-landing-screen #exam-grid .exam-name {
  font-size:.9rem;
  font-weight:700;
  line-height:1.25;
}

.category-landing-screen #group-grid .cat-count {
  color:var(--cat-color,var(--accent));
  font-weight:600;
  line-height:1.4;
}

@media (max-width:760px) {
  .category-landing-screen #group-grid,
  .category-landing-screen #exam-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:500px) {
  .category-landing-screen {
    padding:18px 16px 52px!important;
  }
  .category-landing-screen > .sets-hero,
  .category-landing-screen > .subject-hero {
    grid-template-columns:60px minmax(0,1fr);
    column-gap:13px;
  }
  .category-landing-screen .cat-hero-logo,
  .category-landing-screen .exam-hero-logo {
    width:56px;
    height:56px;
  }
  .category-landing-screen .sets-hero h2,
  .category-landing-screen .subject-hero h2 {
    font-size:1.65rem;
  }
  .category-landing-screen #group-grid,
  .category-landing-screen #exam-grid {
    grid-template-columns:1fr;
  }
}

/* Responsive, moved from style.css with the rules above so the homepage cards
   are described in one place. */
@media (max-width: 480px) {
  .home-grid .category-card { height: 132px; min-height: 132px; }
}