/* =========================================
   SOCIAL STUDIES PAGE
   ========================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #f3f0e8;
  color: #111a16;
}


/* =========================================
   PAGE
   ========================================= */

.subject-page {
  width: 100%;
  min-height: 100vh;

  padding: 22px 5.2% 70px;
}


/* =========================================
   HEADER
   ========================================= */

.subject-page-header {
  margin-bottom: 60px;
}

.subject-page-kicker {
  display: block;

  margin-bottom: 12px;

  font-size: 17px;
  font-weight: 700;
  letter-spacing: 3px;

  color: #111a16;
}

.subject-page-header h1 {
  margin: 0;

  font-size: clamp(58px, 7vw, 110px);
  line-height: 0.95;

  font-weight: 700;
  letter-spacing: -4px;

  color: #111a16;
}

.subject-page-header p {
  margin: 34px 0 0;

  font-size: 21px;
  line-height: 1.4;

  color: #111a16;
}


/* =========================================
   GRADE GRID
   ========================================= */

.subject-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;

  width: 100%;
}


/* =========================================
   GRADE CARD
   ========================================= */

.subject-card {
  min-height: 300px;

  padding: 30px 34px 32px;

  border: 1.5px solid #111a16;

  display: flex;
  flex-direction: column;

  text-decoration: none;

  color: #111a16;
  background: transparent;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


/* card number */

.subject-number {
  display: block;

  margin-bottom: 48px;

  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;

  color: #111a16;
}


/* card heading */

.subject-card h2 {
  margin: 0 0 15px;

  font-size: 38px;
  line-height: 1;

  letter-spacing: -1.5px;
  font-weight: 700;

  color: #111a16;
}


/* card description */

.subject-card p {
  margin: 0;

  max-width: 420px;

  font-size: 18px;
  line-height: 1.45;

  color: #111a16;
}


/* Open → */

.subject-open {
  display: block;

  margin-top: auto;
  padding-top: 40px;

  font-size: 18px;
  font-weight: 700;

  color: #111a16;
}


/* =========================================
   HOVER
   ========================================= */

.subject-card:hover {
  background: #111a16;
  color: #f3f0e8;

  transform: translateY(-2px);
}

.subject-card:hover .subject-number,
.subject-card:hover h2,
.subject-card:hover p,
.subject-card:hover .subject-open {
  color: #f3f0e8;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1000px) {

  .subject-page {
    padding: 24px 5% 60px;
  }

  .subject-page-header h1 {
    font-size: clamp(54px, 9vw, 85px);
  }

  .subject-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subject-card {
    min-height: 280px;
  }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

  .subject-page {
    padding: 24px 22px 50px;
  }

  .subject-page-header {
    margin-bottom: 42px;
  }

  .subject-page-kicker {
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 14px;
  }

  .subject-page-header h1 {
    font-size: 52px;
    line-height: 0.98;

    letter-spacing: -2.5px;
  }

  .subject-page-header p {
    margin-top: 24px;

    font-size: 17px;
  }

  .subject-grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .subject-card {
    min-height: 240px;

    padding: 24px 25px;
  }

  .subject-number {
    margin-bottom: 36px;

    font-size: 14px;
  }

  .subject-card h2 {
    font-size: 34px;
  }

  .subject-card p {
    font-size: 16px;
  }

  .subject-open {
    font-size: 16px;
    padding-top: 32px;
  }
}