/* finesse · register=product · shell=paper-learning-notebook
 * Inherits the approved social page's paper, pencil, type and compact navigation. */

.education-theme .page-content--education { width: min(100%, 1040px); padding: 30px 28px 32px; }
.education-theme .education-platform { gap: 22px; }
.education-theme .education-platform__header { gap: 9px; padding: 0 3px 21px; border-bottom: 1px dashed var(--social-line); }
.education-theme .education-platform__description { max-width: 42em; color: var(--social-muted); font-size: 16px; line-height: 1.65; }
.education-theme :is(.education-platform a, .education-platform button):focus-visible { outline: 2px solid var(--social-focus); outline-offset: 4px; }

.education-theme .education-tabs { gap: 11px; overflow: visible; padding: 0 2px 3px; }
.education-theme .education-tab { position: relative; min-width: 136px; min-height: 46px; padding: 9px 20px; border: 1px solid var(--social-line); border-radius: 6px 9px 5px 7px; background: var(--social-card) url('./social-assets/paper-grain.svg'); color: var(--social-ink); font: 400 17px/1.35 var(--social-font); white-space: nowrap; }
.education-theme .education-tab[aria-selected="true"] { background-color: var(--social-sage); border-color: var(--social-line); color: var(--social-sage-ink); box-shadow: 1px 2px 0 var(--social-shadow); }
.education-theme .education-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 23%; right: 23%; bottom: 4px; height: 3px; background: url('./social-assets/pencil-underline.svg') center / 100% 100% no-repeat; }

.education-theme .education-project { position: relative; overflow: visible; grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr); border: 1px solid var(--social-line); border-radius: 7px 10px 6px 9px; background: var(--social-card) url('./social-assets/paper-fibers.png') center / 700px; box-shadow: 2px 3px 0 var(--social-shadow); }
.education-theme .education-project::before { content: ""; position: absolute; z-index: 1; top: -10px; left: 32px; width: 59px; height: 20px; transform: rotate(-9deg); background: url('./social-assets/paper-tape.svg') center / 100% 100% no-repeat; pointer-events: none; }
.education-theme .education-project::after { content: ""; position: absolute; z-index: 1; top: -9px; right: 25px; width: 48px; height: 18px; transform: rotate(12deg); background: url('./social-assets/paper-tape.svg') center / 100% 100% no-repeat; filter: hue-rotate(47deg) saturate(.7); pointer-events: none; }
.education-theme .education-project[data-tone] .education-project__visual { min-height: 0; padding: 30px; align-content: center; gap: 22px; border-right: 1px dashed var(--social-line); background: transparent; overflow: visible; }
.education-theme .education-project__visual::before { content: ""; position: absolute; inset: 20px; z-index: 0; opacity: .35; background-image: radial-gradient(var(--social-line) .7px, transparent .8px); background-size: 17px 17px; pointer-events: none; }
.education-theme .education-project[data-tone] .education-project__image { position: relative; width: min(156px, 100%); max-height: 180px; padding: 10px; object-fit: contain; }
.education-theme .education-project[data-tone="teal"] .education-project__image { padding: 25px 16px; border-radius: 8px 12px 7px 10px; background: var(--social-sage-ink); box-shadow: 2px 3px 0 var(--social-shadow); }
.education-theme .education-project[data-tone="coral"] .education-project__image { width: min(185px, 100%); }
.education-theme .education-project[data-tone="gold"] .education-project__image { width: min(135px, 100%); }
.education-theme .education-project__badge { position: relative; right: auto; bottom: auto; width: fit-content; padding: 5px 9px; border: 1px solid var(--social-line); border-radius: 4px 6px 3px 5px; background: var(--social-card); color: var(--social-muted); font-size: 12px; font-weight: 400; }
.education-theme .education-project__content { gap: 13px; padding: 27px 30px; }
.education-theme .education-project__source { color: var(--social-muted); font-size: 13px; font-weight: 400; line-height: 1.3; }
.education-theme .education-project__title { margin: -3px 0 0; color: var(--social-ink); font-size: 28px; font-weight: 400; line-height: 1.3; }
.education-theme .education-project__introduction { margin: 0; color: var(--social-muted); font: 400 16px/1.8 var(--social-font); text-indent: 2em; text-align: start; text-wrap: pretty; }
.education-theme .education-project__action { justify-content: space-between; gap: 24px; min-height: 46px; margin: 0 0 3px; padding: 9px 17px; border: 1px solid var(--social-line); border-radius: 8px 12px 9px 10px; background: var(--social-blue) url('./social-assets/paper-grain.svg'); color: var(--social-ink); font: 400 17px/1.4 var(--social-font); box-shadow: 1px 2px 0 var(--social-shadow); transition: background-color 140ms, transform 140ms; }
.education-theme .education-project__action:hover { background-color: var(--social-sage); border-color: var(--social-line); }
.education-theme .education-project__action:active { transform: translateY(1px); }
.education-theme .education-project__action-arrow { font-size: 21px; }
.education-theme .education-project__details { gap: 15px; margin: 0; padding: 13px 0; border-top: 1px dashed var(--social-line); border-bottom: 1px dashed var(--social-line); }
.education-theme .education-project__detail-label { color: var(--social-muted); font-size: 12px; font-weight: 400; }
.education-theme .education-project__detail-value { margin-top: 5px; color: var(--social-ink); font-size: 14px; font-weight: 400; line-height: 1.55; }
.education-theme .education-project__features { gap: 7px; }
.education-theme .education-project__feature { padding-left: 21px; color: var(--social-ink); font-size: 15px; line-height: 1.6; }
.education-theme .education-project__feature::before { top: 5px; width: 12px; height: 12px; border: 1px solid var(--social-line); border-radius: 2px 3px 2px 3px; background: transparent; }
.education-theme .education-project__feature::after { content: ""; position: absolute; left: 3px; top: 7px; width: 8px; height: 4px; border-left: 1px solid var(--social-sage-ink); border-bottom: 1px solid var(--social-sage-ink); transform: rotate(-48deg); }

@media (max-width: 767px) {
  .education-theme .page-content--education { padding: 20px 14px 25px; }
  .education-theme .education-platform { gap: 17px; }
  .education-theme .education-platform__header { gap: 7px; padding: 0 3px 14px; }
  .education-theme .education-platform__description { font-size: 14px; line-height: 1.65; }
  .education-theme .education-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 0 1px 2px; }
  .education-theme .education-tab { min-width: 0; min-height: 44px; padding: 8px 6px; font-size: 15px; }
  .education-theme .education-project { grid-template-columns: minmax(0, 1fr); }
  .education-theme .education-project::before { left: 17px; width: 41px; height: 17px; top: -8px; }
  .education-theme .education-project::after { right: 17px; width: 38px; height: 16px; top: -8px; }
  .education-theme .education-project[data-tone] .education-project__visual { position: absolute; left: 16px; top: 22px; width: 78px; min-height: 82px; padding: 0; gap: 8px; border: 0; }
  .education-theme .education-project__visual::before { display: none; }
  .education-theme .education-project[data-tone] .education-project__image { width: 70px; height: 54px; max-height: 54px; padding: 0; }
  .education-theme .education-project[data-tone="teal"] .education-project__image { width: 70px; height: 49px; padding: 10px 8px; border-radius: 5px 7px 5px 6px; }
  .education-theme .education-project[data-tone="coral"] .education-project__image { width: 78px; height: 54px; }
  .education-theme .education-project[data-tone="gold"] .education-project__image { width: 48px; height: 54px; }
  .education-theme .education-project__badge { padding: 3px 4px; border: 0; background: transparent; font-size: 12px; white-space: nowrap; }
  .education-theme .education-project__content { gap: 11px; padding: 20px 16px 18px; }
  .education-theme .education-project__source { margin-top: 5px; margin-left: 95px; font-size: 12px; }
  .education-theme .education-project__title { min-height: 42px; margin: -3px 0 0 95px; font-size: 23px; line-height: 1.35; }
  .education-theme .education-project__introduction { margin-top: 6px; font-size: 15px; }
  .education-theme .education-project__action { width: 100%; min-height: 44px; padding: 8px 13px; font-size: 16px; margin-bottom: 4px; }
  .education-theme .education-project__details { gap: 12px; padding: 11px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .education-theme .education-project__detail-value { font-size: 13px; }
  .education-theme .education-project__features { gap: 5px; }
  .education-theme .education-project__feature { font-size: 14px; }
}

@media (max-width: 350px) {
  .education-theme .education-platform { gap: 15px; }
  .education-theme .education-platform__header { padding-inline: 0; }
  .education-theme .education-project__content { padding-inline: 13px; }
  .education-theme .education-project[data-tone] .education-project__visual { left: 12px; width: 64px; }
  .education-theme .education-project[data-tone] .education-project__image { max-width: 62px; }
  .education-theme .education-project__source { margin-left: 76px; }
  .education-theme .education-project__title { margin-left: 76px; font-size: 21px; }
  .education-theme .education-tab { font-size: 14px; }
}