/* ROW homepage student notes — an honest, tactile classroom pinboard. */

body.page-pages-home .row-home-student-notes {
  position: relative;
  padding: clamp(3.5rem, 5vw, 4.75rem) 0 clamp(3.75rem, 5vw, 5rem);
  overflow: clip;
  background:
    linear-gradient(rgba(41, 73, 101, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 73, 101, .035) 1px, transparent 1px),
    #f3ecdf !important;
  background-size: 2rem 2rem;
}

body.page-pages-home .row-home-student-notes::before {
  position: absolute;
  top: -15rem;
  right: -9rem;
  width: 28rem;
  height: 28rem;
  border: 1px solid rgba(239, 91, 42, .2);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

body.page-pages-home .row-home .row-home-student-notes__layout {
  position: relative;
  display: block !important;
  width: min(100% - 2rem, 80rem) !important;
  max-width: 80rem !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

body.page-pages-home .row-home .row-home-student-notes__header {
  display: grid;
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  margin-bottom: clamp(2rem, 3vw, 2.75rem);
}

body.page-pages-home .row-home-student-notes__title {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  text-align: center;
}
body.page-pages-home .row-home-student-notes__title .row-home-kicker {
  display: flex;
  justify-content: center;
  margin: 0 0 .75rem;
  padding: 0;
  color: #8f1d4b !important;
  font: 800 .75rem/1 "Barlow", sans-serif;
  letter-spacing: .18em;
  gap: .75rem;
  align-items: center;
}
body.page-pages-home .row-home-student-notes__title .row-home-kicker::before { width: 2.25rem; height: 2px; background: #ef5b2a; content: ""; }

body.page-pages-home .row-home-student-notes__title h2 {
  max-width: 24ch;
  margin: 0 auto !important;
  color: #1c3a54 !important;
  font-family: "Libre Baskerville", Georgia, serif !important;
  font-size: clamp(2.35rem, 4.15vw, 4.3rem);
  font-weight: 400 !important;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
}

body.page-pages-home .row-home-student-notes__title h2 span {
  display: block;
  white-space: nowrap;
}

body.page-pages-home .row-home-student-notes__source {
  position: relative;
  margin: 0 !important;
  padding: 1rem 0 1rem 1.2rem;
  border-left: 3px solid #ef5b2a;
  color: #53636c !important;
  font: 400 clamp(.92rem, 1.15vw, 1rem)/1.6 "Barlow", sans-serif;
  text-wrap: pretty;
}

body.page-pages-home .row-home .row-home-student-notes__photo-grid {
  --row-note-gap: clamp(.85rem, 1.65vw, 1.5rem);
  position: relative;
  display: grid;
  width: 100% !important;
  min-height: clamp(20rem, 25vw, 23rem);
  grid-template-columns: .78fr 1.16fr 1fr .82fr .82fr;
  gap: var(--row-note-gap);
  align-items: center;
}

body.page-pages-home .row-home .row-home-student-notes__photo-grid::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 1rem;
  left: 1rem;
  height: .35rem;
  border-radius: 99rem;
  background: linear-gradient(90deg, #ffc94f 0 23%, #ef5b2a 23% 45%, #8f1d4b 45% 65%, #5b8163 65% 83%, #294965 83%);
  box-shadow: 0 .3rem 1.2rem rgba(79, 58, 39, .1);
  content: "";
  opacity: .58;
  transform: translateY(-50%) rotate(-.25deg);
}

body.page-pages-home .row-home-student-notes__photo {
  --row-note-rotation: 0deg;
  --row-note-tape: rgba(255, 201, 79, .78);
  --row-note-edge: #ffc94f;
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  padding: .5rem .5rem .7rem;
  background: #fffdfa;
  box-shadow: 0 1.4rem 2.5rem rgba(79, 58, 39, .16);
  transform: rotate(var(--row-note-rotation));
  transition: box-shadow 360ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1);
}

body.page-pages-home .row-home-student-notes__photo::before {
  position: absolute;
  z-index: 2;
  top: -.65rem;
  left: 50%;
  width: clamp(2.75rem, 4vw, 3.75rem);
  height: 1rem;
  background: var(--row-note-tape);
  box-shadow: 0 .15rem .35rem rgba(79, 58, 39, .1);
  content: "";
  transform: translateX(-50%) rotate(-2deg);
}

body.page-pages-home .row-home-student-notes__photo::after {
  position: absolute;
  right: .5rem;
  bottom: .22rem;
  left: .5rem;
  height: .16rem;
  border-radius: 99rem;
  background: var(--row-note-edge);
  content: "";
  opacity: .86;
}

body.page-pages-home .row-home-student-notes__photo--card {
  --row-note-rotation: -1.35deg;
  --row-note-tape: rgba(255, 201, 79, .82);
  --row-note-edge: #e6aa20;
  margin-top: -.75rem;
}
body.page-pages-home .row-home-student-notes__photo--wide {
  --row-note-rotation: .55deg;
  --row-note-tape: rgba(239, 91, 42, .68);
  --row-note-edge: #ef5b2a;
  margin-top: 1.5rem;
}
body.page-pages-home .row-home-student-notes__photo--letter {
  --row-note-rotation: -1deg;
  --row-note-tape: rgba(91, 129, 99, .72);
  --row-note-edge: #5b8163;
  margin-top: 1rem;
}
body.page-pages-home .row-home-student-notes__photo--drawing {
  --row-note-rotation: 1.2deg;
  --row-note-tape: rgba(41, 73, 101, .6);
  --row-note-edge: #294965;
  margin-top: -.5rem;
}
body.page-pages-home .row-home-student-notes__photo--collection {
  --row-note-rotation: -.45deg;
  --row-note-tape: rgba(143, 29, 75, .68);
  --row-note-edge: #8f1d4b;
  z-index: 2;
  padding: .62rem .62rem .78rem;
  box-shadow:
    0 0 0 .35rem rgba(91, 129, 99, .16),
    0 1.55rem 3rem rgba(79, 58, 39, .2);
  transform: rotate(var(--row-note-rotation)) scale(1.035);
}

body.page-pages-home .row-home-student-notes__photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  background: #fff;
  box-shadow: none;
  filter: none;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (hover: hover) and (pointer: fine) {
  body.page-pages-home .row-home-student-notes__photo:hover {
    z-index: 3;
    box-shadow: 0 2rem 3.25rem rgba(79, 58, 39, .22);
    transform: translateY(-.65rem) rotate(0deg) scale(1.018);
  }

  body.page-pages-home .row-home-student-notes__photo--collection:hover {
    transform: translateY(-.65rem) rotate(0deg) scale(1.052);
  }
}

@media (max-width: 1050px) {
  body.page-pages-home .row-home .row-home-student-notes__photo-grid {
    min-height: clamp(17rem, 34vw, 22rem);
    gap: clamp(.7rem, 1.5vw, 1.1rem);
  }
  body.page-pages-home .row-home-student-notes__photo { margin-top: 0; }
}

@media (max-width: 820px) {
  body.page-pages-home .row-home .row-home-student-notes__photo-grid {
    min-height: 0;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.12fr) minmax(0, .9fr);
    grid-template-rows: repeat(2, auto);
    align-items: center;
    gap: 1rem;
  }
  body.page-pages-home .row-home-student-notes__photo--card { grid-column: 1; grid-row: 1; }
  body.page-pages-home .row-home-student-notes__photo--wide { grid-column: 1; grid-row: 2; }
  body.page-pages-home .row-home-student-notes__photo--collection { grid-column: 2; grid-row: 1 / span 2; }
  body.page-pages-home .row-home-student-notes__photo--letter { grid-column: 3; grid-row: 1; }
  body.page-pages-home .row-home-student-notes__photo--drawing { grid-column: 3; grid-row: 2; }
}

@media (max-width: 699px) {
  body.page-pages-home .row-home-student-notes { padding: 3.25rem 0 3.75rem; }
  body.page-pages-home .row-home .row-home-student-notes__header { margin-bottom: 2.25rem; }
  body.page-pages-home .row-home-student-notes__title h2 { font-size: clamp(1.5rem, 7.8vw, 3.35rem); line-height: 1.04; }
  body.page-pages-home .row-home-student-notes__photo-grid { gap: .85rem; }
}

@media (max-width: 520px) {
  body.page-pages-home .row-home .row-home-student-notes__photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    align-items: center;
    gap: 1rem .8rem;
  }
  body.page-pages-home .row-home-student-notes__photo--collection { grid-column: 1; grid-row: 1 / span 2; }
  body.page-pages-home .row-home-student-notes__photo--wide { grid-column: 2; grid-row: 1; }
  body.page-pages-home .row-home-student-notes__photo--card { grid-column: 2; grid-row: 2; }
  body.page-pages-home .row-home-student-notes__photo--letter { grid-column: 1; grid-row: 3; }
  body.page-pages-home .row-home-student-notes__photo--drawing { grid-column: 2; grid-row: 3; }
  body.page-pages-home .row-home-student-notes__photo--collection { transform: rotate(var(--row-note-rotation)); }
}

@media (prefers-reduced-motion: reduce) {
  body.page-pages-home .row-home-student-notes__photo { transition: none !important; }
  body.page-pages-home .row-home-student-notes__photo:hover { transform: rotate(var(--row-note-rotation)); }
  body.page-pages-home .row-home-student-notes__photo--collection,
  body.page-pages-home .row-home-student-notes__photo--collection:hover { transform: rotate(var(--row-note-rotation)) scale(1.035); }
}