/* Block 4. Everything is scoped so existing direction/homepage styles stay intact. */
.oz-direction-learning { width: min(1400px, calc(100% - 80px)); margin: 88px auto 0; color: #202124; }
.oz-direction-learning .oz-direction-learning__heading { margin: 0 0 48px; font-size: clamp(32px, 3.1vw, 48px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; overflow-wrap: anywhere; }
.oz-direction-learning__layout { display: grid; grid-template-columns: .95fr 1.15fr; align-items: center; gap: 64px; }
.oz-direction-learning__visual { position: relative; min-width: 0; }
.oz-direction-learning__photo { display: block; width: 100%; height: auto; aspect-ratio: 600 / 640; object-fit: cover; object-position: 50% 45%; -webkit-mask: url('../images/direction-learning-mask.svg') center / 100% 100% no-repeat; mask: url('../images/direction-learning-mask.svg') center / 100% 100% no-repeat; }
.oz-direction-learning__outline { position: absolute; inset: 0; width: 100%; height: 100%; color: #36d9bb; transform: rotate(-8deg) scale(1.025); pointer-events: none; }
.oz-direction-learning__star { position: absolute; top: 8%; right: -4%; width: 62px; height: 70px; color: #ff9600; transform: rotate(9deg); pointer-events: none; }
.oz-direction-learning__strokes { position: absolute; bottom: -2%; right: 2%; width: 90px; height: 54px; color: #36d9bb; pointer-events: none; }
.oz-direction-learning__items { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 72px 44px; padding: 24px 24px 36px 0; }
.oz-direction-learning__item { position: relative; min-width: 0; --learning-marker: url('../images/learning-marker-mint.svg'); --learning-accent: #36d9bb; }
.oz-direction-learning__item--blue { --learning-marker: url('../images/learning-marker-blue.svg'); --learning-accent: #3495ff; }
.oz-direction-learning__item--purple { --learning-marker: url('../images/learning-marker-purple.svg'); --learning-accent: #aa83ff; }
.oz-direction-learning__item--orange { --learning-marker: url('../images/learning-marker-orange.svg'); --learning-accent: #ff9600; }
.oz-direction-learning .oz-direction-learning__title { position: relative; margin: 0; padding-inline: 10px; font-size: 25px; line-height: 1.55; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.oz-direction-learning__title span { padding: 5px 8px 7px; background: var(--learning-marker) center / 100% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.oz-direction-learning .oz-direction-learning__description { margin: 20px 0 0; padding-left: 10px; font-size: 19px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.oz-direction-learning__item:nth-child(1)::before,
.oz-direction-learning__item:nth-child(2)::before { content: ''; position: absolute; top: -31px; left: 10px; width: 5px; height: 21px; border-radius: 5px; background: var(--learning-accent); transform: rotate(-25deg); box-shadow: 17px 9px 0 -1px var(--learning-accent); }
.oz-direction-learning__item:nth-child(2)::before { left: auto; right: 9px; transform: rotate(22deg); }
.oz-direction-learning__clock { position: absolute; width: 62px; height: 70px; right: -26px; bottom: -24px; color: #ff9600; pointer-events: none; }
@media (min-width: 901px) and (max-width: 1199px) {
  .oz-direction-learning { width: calc(100% - 64px); }
  .oz-direction-learning__layout { grid-template-columns: .8fr 1.2fr; gap: 32px; }
  .oz-direction-learning__items { gap: 40px 24px; padding-right: 12px; }
  .oz-direction-learning .oz-direction-learning__title { font-size: 21px; }
  .oz-direction-learning .oz-direction-learning__description { font-size: 16px; margin-top: 14px; }
  .oz-direction-learning__star { width: 40px; height: 46px; }
  .oz-direction-learning__clock { width: 42px; height: 48px; right: -16px; }
}
@media (max-width: 900px) {
  .oz-direction-learning { width: min(620px, calc(100% - 48px)); margin-top: 48px; }
  .oz-direction-learning .oz-direction-learning__heading { margin-bottom: 24px; font-size: 30px; }
  .oz-direction-learning__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .oz-direction-learning__visual { width: min(390px, 100%); margin-inline: auto; }
  .oz-direction-learning__photo { aspect-ratio: 1; }
  .oz-direction-learning__star { width: 43px; height: 49px; right: 0; }
  .oz-direction-learning__strokes { width: 68px; height: 41px; right: 3%; }
  .oz-direction-learning__items { gap: 32px 24px; padding: 0 0 12px; }
  .oz-direction-learning .oz-direction-learning__title { font-size: 20px; line-height: 1.55; }
  .oz-direction-learning .oz-direction-learning__description { margin-top: 12px; font-size: 16px; line-height: 1.5; }
  .oz-direction-learning__item:nth-child(1)::before,
  .oz-direction-learning__item:nth-child(2)::before { display: none; }
  .oz-direction-learning__clock { display: none; }
}
@media (max-width: 600px) {
  .oz-direction-learning__items { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}