/* Shared layout for the dedicated course-category pages. */

.course-category-shell {
  width:min(100%, var(--max));
  margin:0 auto;
}

.course-category-hero__content {
  max-width:900px;
}

.course-category-eyebrow {
  display:inline-block;
  margin:0 0 16px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:3px;
  background:rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.82);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.course-category-hero h1 {
  max-width:850px;
  margin:0;
}

.course-category-subtitle {
  max-width:800px;
  margin:18px 0 0;
  color:#fff;
  font-size:clamp(1.08rem, 2vw, 1.35rem);
  font-weight:500;
  line-height:1.45;
}

.course-category-intro {
  max-width:780px;
  margin:18px 0 0;
  color:rgba(255,255,255,0.76);
  font-size:0.94rem;
  font-weight:300;
  line-height:1.78;
}

.course-category-trust {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
}

.course-category-trust li {
  padding:8px 13px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:0.78rem;
  letter-spacing:0.02em;
}

.course-anchor-nav {
  padding:15px 6vw;
  border-bottom:1px solid var(--border);
  background:rgba(250,252,253,0.98);
}

.course-anchor-nav__links {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.course-anchor-nav a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 15px;
  border:1px solid rgba(27,48,84,0.13);
  border-radius:999px;
  color:var(--navy);
  font-size:0.78rem;
  font-weight:600;
  line-height:1.35;
  text-decoration:none;
  transition:border-color 0.2s, background-color 0.2s, color 0.2s;
}

.course-anchor-nav a:hover {
  border-color:rgba(58,139,122,0.42);
  background:var(--teal-soft);
  color:var(--teal);
}

.course-anchor-nav a:focus-visible {
  outline:2px solid var(--teal);
  outline-offset:3px;
}

.course-offer-section {
  padding:80px 6vw;
  background:var(--white);
  scroll-margin-top:88px;
}

.course-offer-section--group {
  background:var(--off);
}

.course-section-label {
  margin:0 0 8px !important;
  color:var(--teal) !important;
  font-size:0.68rem !important;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.course-product-list {
  display:flex;
  flex-direction:column;
  gap:34px;
}

.course-product {
  min-width:0;
  padding:clamp(26px, 4vw, 44px);
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#fff;
  box-shadow:0 16px 44px rgba(27,48,84,0.06);
}

.course-product--group {
  border-top:3px solid rgba(58,139,122,0.48);
}

.course-product__header {
  max-width:840px;
}

.course-product__format {
  margin:0 0 10px;
  color:var(--teal);
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.course-product h3 {
  margin:0;
  color:var(--navy);
  font-size:clamp(1.55rem, 3vw, 2.25rem);
  line-height:1.14;
  overflow-wrap:break-word;
  hyphens:auto;
}

.course-product__subtitle {
  margin:12px 0 0;
  color:var(--navy);
  font-size:1rem;
  font-weight:600;
  line-height:1.55;
}

.course-product__description {
  max-width:780px;
  margin:12px 0 0;
  color:var(--muted);
  font-size:0.86rem;
  line-height:1.75;
}

.course-product__features {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 28px;
  margin:26px 0 0;
  padding:22px 0 0;
  border-top:1px solid var(--border);
  list-style:none;
}

.course-product__features li {
  position:relative;
  min-width:0;
  padding-left:20px;
  color:var(--muted);
  font-size:0.8rem;
  line-height:1.65;
  overflow-wrap:break-word;
}

.course-product__features li::before {
  content:"";
  position:absolute;
  top:0.6em;
  left:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--teal);
}

.course-pricing-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:30px;
}

.course-price-card {
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:24px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--off);
}

.course-price-card--recommended {
  border-color:rgba(58,139,122,0.42);
  background:linear-gradient(180deg, #fff 0%, var(--teal-soft) 145%);
  box-shadow:0 12px 30px rgba(27,48,84,0.07);
}

.course-price-card .course-card__badge {
  margin-bottom:12px;
}

.course-price-card h4,
.course-single-offer h4 {
  margin:0;
  color:var(--navy);
  font-size:1rem;
  line-height:1.4;
  overflow-wrap:break-word;
  hyphens:auto;
}

.course-single-offer__price {
  margin:20px 0 0;
  color:var(--navy);
  font-family:"Philosopher", Georgia, "Times New Roman", serif;
  font-size:clamp(1.55rem, 2.8vw, 2rem);
  font-weight:700;
  line-height:1.12;
  white-space:normal;
}

.course-single-offer__price span {
  font-family:"DM Sans 18 pt", "DM Sans", "Segoe UI", sans-serif;
  font-size:0.7rem;
  font-weight:700;
  white-space:nowrap;
}

.course-price-card__unit {
  margin:20px 0 0;
  color:var(--navy);
  font-family:"Philosopher", Georgia, "Times New Roman", serif;
  font-size:clamp(1.55rem, 2.8vw, 2rem);
  font-weight:700;
  line-height:1.12;
  white-space:normal;
}

.course-price-card__total {
  margin:8px 0 0;
  color:var(--muted);
  font-size:0.76rem;
  font-weight:400;
  line-height:1.45;
}

.course-price-card__total span {
  font:inherit;
  white-space:nowrap;
}

.course-price-card__scope,
.course-single-offer__scope {
  margin:9px 0 0;
  color:var(--muted);
  font-size:0.76rem;
  line-height:1.55;
}

.course-price-card .course-card__button {
  margin-top:auto;
  padding-top:13px;
}

.course-price-card__scope + .course-card__button {
  margin-top:22px;
}

.course-single-offer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:30px;
  padding:26px;
  border:1px solid rgba(58,139,122,0.24);
  border-radius:var(--r);
  background:var(--teal-soft);
}

.course-single-offer__price {
  margin-top:10px;
}

.course-single-offer__note {
  max-width:650px;
  margin:10px 0 0;
  color:var(--muted);
  font-size:0.76rem;
  line-height:1.55;
}

.course-single-offer__button {
  flex:0 0 min(260px, 32%);
  width:auto;
  margin-top:0;
}

.course-offers {
  padding:80px 6vw;
  background:var(--white);
}

.course-section-heading {
  max-width:720px;
  margin-bottom:34px;
}

.course-section-heading h2 {
  margin:0 0 12px;
  font-size:clamp(1.8rem, 3.3vw, 2.8rem);
}

.course-section-heading p {
  margin:0;
  color:var(--muted);
  font-size:0.9rem;
  line-height:1.75;
}

.course-card-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}

.course-card {
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:30px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#fff;
  box-shadow:0 14px 38px rgba(27,48,84,0.06);
}

.course-card--recommended {
  border-color:rgba(58,139,122,0.42);
  box-shadow:0 18px 44px rgba(27,48,84,0.09);
}

.course-card__badge {
  align-self:flex-start;
  margin:0 0 16px;
  padding:5px 9px;
  border-radius:999px;
  background:var(--teal-soft);
  color:var(--teal);
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.09em;
  text-transform:uppercase;
}

.course-card h3 {
  margin:0 0 12px;
  font-size:1.28rem;
  line-height:1.3;
}

.course-card__description {
  margin:0;
  color:var(--muted);
  font-size:0.84rem;
  line-height:1.72;
}

.course-card__features {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:22px 0 28px;
  padding:0;
  list-style:none;
}

.course-card__features li {
  position:relative;
  padding-left:20px;
  color:var(--muted);
  font-size:0.8rem;
  line-height:1.6;
}

.course-card__features li::before {
  content:"";
  position:absolute;
  top:0.58em;
  left:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--teal);
}

.course-card__price-block {
  margin-top:auto;
  padding-top:22px;
  border-top:1px solid var(--border);
}

.course-card__price {
  margin:0;
  color:var(--navy);
  font-family:"Philosopher", Georgia, "Times New Roman", serif;
  font-size:clamp(1.65rem, 2.8vw, 2.15rem);
  font-weight:700;
  line-height:1.12;
}

.course-card__price-unit {
  display:block;
  margin-top:5px;
  color:var(--teal);
  font-family:"DM Sans 18 pt", "DM Sans", "Segoe UI", sans-serif;
  font-size:0.76rem;
  font-weight:700;
  line-height:1.45;
}

.course-card__total {
  min-height:1.6em;
  margin:10px 0 0;
  color:var(--muted);
  font-size:0.76rem;
  line-height:1.55;
}

.course-card__button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:22px;
  padding:13px 22px;
  border-radius:var(--r);
  background:var(--navy);
  box-shadow:0 2px 12px rgba(27,48,84,0.14);
  color:#fff;
  font-size:0.87rem;
  font-weight:500;
  line-height:1.3;
  text-decoration:none;
  transition:background 0.25s, box-shadow 0.25s, transform 0.25s;
}

.course-card__button:hover {
  background:var(--teal);
  box-shadow:0 5px 20px rgba(58,139,122,0.22);
  transform:translateY(-1px);
}

.course-card__button:focus-visible {
  outline:3px solid rgba(58,139,122,0.42);
  outline-offset:3px;
}

.course-information {
  padding:80px 6vw;
  background:var(--off);
}

.course-information-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

.course-info-block {
  padding:30px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:rgba(255,255,255,0.92);
  box-shadow:0 10px 30px rgba(27,48,84,0.04);
}

.course-info-block h2,
.course-info-block h3 {
  margin:0 0 13px;
  font-size:1.35rem;
}

.course-info-block p {
  margin:0;
  color:var(--muted);
  font-size:0.84rem;
  line-height:1.75;
}

.course-info-block ol,
.course-info-block ul {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:16px 0 0;
  padding-left:22px;
  color:var(--muted);
  font-size:0.82rem;
  line-height:1.65;
}

.course-info-block--faq {
  grid-column:1 / -1;
  scroll-margin-top:88px;
}

.course-category-faq {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:18px;
}

.course-category-faq details {
  border-top:1px solid var(--border);
  padding-top:14px;
}

.course-category-faq summary {
  cursor:pointer;
  color:var(--navy);
  font-size:0.86rem;
  font-weight:700;
  line-height:1.55;
}

.course-category-faq summary:focus-visible {
  outline:2px solid var(--teal);
  outline-offset:4px;
}

.course-category-faq p {
  margin-top:10px;
}

@media (max-width: 1000px) {
  .course-pricing-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .course-pricing-grid .course-price-card:last-child {
    grid-column:1 / -1;
  }

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

  .course-card:last-child {
    grid-column:1 / -1;
    width:calc(50% - 11px);
  }
}

@media (max-width: 700px) {
  .course-offers,
  .course-offer-section,
  .course-information {
    padding-top:64px;
    padding-bottom:64px;
  }

  .course-card-grid,
  .course-pricing-grid,
  .course-product__features,
  .course-information-grid,
  .course-category-faq {
    grid-template-columns:1fr;
  }

  .course-pricing-grid .course-price-card:last-child,
  .course-card:last-child,
  .course-info-block--faq {
    grid-column:auto;
    width:auto;
  }

  .course-card,
  .course-price-card,
  .course-info-block {
    padding:24px;
  }

  .course-single-offer {
    align-items:stretch;
    flex-direction:column;
    gap:22px;
    padding:24px;
  }

  .course-single-offer__button {
    flex-basis:auto;
    width:100%;
  }
}

@media (max-width: 430px) {
  .course-anchor-nav__links {
    gap:8px;
  }

  .course-anchor-nav a {
    flex:1 1 auto;
  }

  .course-category-trust {
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-anchor-nav a,
  .course-card__button {
    scroll-behavior:auto;
    transition:none;
  }

  .course-card__button:hover {
    transform:none;
  }
}