/* ===================================================================
   Unit 1 — Page 6: המצפן שלנו: מטרות התוכנית
   Global tokens, header, footer, and sequential nav from theme.css.
   =================================================================== */

html,
body {
  background-color: #ffffff;
  background-image: none;
}

.page-bg {
  display: none;
  background-image: none;
}

.ag-page-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow-x: hidden;
  background-color: #ffffff;
  background-image: none;
}

.ag-pipes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ag-pipe {
  position: absolute;
  z-index: 0;
  display: block;
  height: auto;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  flex-shrink: 0;
}

.ag-pipe-green {
  top: 0;
  left: -1.25rem;
  width: 10.5rem;
}

.ag-pipe-mid {
  bottom: 0;
  left: -1.5rem;
  width: 13.5rem;
}

.ag-pipe-lower {
  right: 0;
  bottom: 0;
  width: 16.5rem;
}

.site-header {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
  background-image: none;
}

.site-footer {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
  background-image: none;
}

.ata-unit-title,
.ag-intro,
.ag-intro-text,
.ag-main-heading,
.ag-section-heading,
.ag-goals,
.ag-goal,
.ag-goal-copy,
.ag-goal-title,
.ag-goal-text,
.ag-workshops,
.ag-purpose,
.ag-purpose-text,
.ag-foundations,
.ag-foundation,
.ag-foundation-card,
.ata-sequential-nav,
.ata-nav-prev,
.ata-nav-next {
  position: relative;
  z-index: 1;
}

.ata-unit-page {
  max-width: var(--content);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.ata-unit-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: right;
}

.ata-unit-title-index,
.ata-unit-title-name {
  color: var(--teal);
}

.ata-unit-title-divider {
  color: var(--rose);
  padding: 0 0.625rem;
}

.ag-intro {
  width: 100%;
  margin: 0 0 2rem;
}

.ag-main-heading,
.ag-section-heading {
  width: 100%;
  margin: 0 0 0.5rem;
  color: var(--teal);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  direction: rtl;
  text-align: right;
}

.ag-section-heading {
  font-size: var(--text-h3);
  font-weight: 600;
}

.ag-intro-text,
.ag-purpose-text,
.ag-workshops-text,
.ag-goal-text {
  width: 100%;
  max-width: var(--prose-measure);
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.02em;
  direction: rtl;
  text-align: right;
  text-wrap: pretty;
}

.ag-intro-text strong,
.ag-workshops-text strong {
  font-weight: 700;
}

.ag-goals {
  width: 100%;
  margin: 0 0 2.25rem;
}

.ag-goals-grid {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 1.15rem;
  row-gap: 1.5rem;
  width: max-content;
  max-width: 100%;
  margin: 1rem 0 0;
  margin-inline-end: auto;
  padding: 0;
  list-style: none;
  direction: rtl;
}

.ag-goal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  direction: rtl;
  text-align: right;
  opacity: 0;
  animation: agGoalIn 0.7s ease forwards;
}

.ag-goal:nth-child(1) {
  animation-delay: 0.2s;
}

.ag-goal:nth-child(2) {
  animation-delay: 0.4s;
}

.ag-goal:nth-child(3) {
  animation-delay: 0.6s;
}

.ag-goal:nth-child(4) {
  animation-delay: 0.8s;
}

@keyframes agGoalIn {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ag-goal-copy {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 21.25rem;
  direction: rtl;
  text-align: right;
}

.ag-goal-title {
  display: inline;
  margin: 0;
  padding: 0.12rem 0.4rem;
  border-radius: 0.35rem;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: right;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ag-goal-1 .ag-goal-title {
  background: #ddf2da;
}

.ag-goal-2 .ag-goal-title {
  background: #f8ddd8;
}

.ag-goal-3 .ag-goal-title {
  background: #def1fb;
}

.ag-goal-4 .ag-goal-title {
  background: #f2d2e0;
}

.ag-goal-text {
  max-width: 21.25rem;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.55;
  direction: rtl;
  text-align: right;
}

.ag-goal-icon {
  display: block;
  width: 6.5rem;
  height: auto;
  max-width: 6.5rem;
  flex-shrink: 0;
  object-fit: contain;
}

.ag-goal-4 .ag-goal-icon {
  width: 8.25rem;
  max-width: 8.25rem;
}

.ag-goal-2 .ag-goal-icon {
  width: 7.35rem;
  max-width: 7.35rem;
}

.ag-workshops {
  width: 100%;
}

.ag-purpose {
  width: 100%;
  margin: 0 0 1.25rem;
}

.ag-purpose-text + .ag-purpose-text {
  margin-top: 0.5rem;
}

.ag-foundations {
  width: 100%;
  margin: 0 0 1.5rem;
  overflow: visible;
}

.ag-foundations-grid {
  display: grid;
  grid-template-columns: repeat(3, 11.25rem);
  grid-template-areas:
    "one two three"
    "four five six";
  gap: 3.75rem 3.5rem;
  width: max-content;
  max-width: 100%;
  margin-block: 1.25rem 0;
  margin-inline-start: 0;
  margin-inline-end: auto;
  padding: 0.75rem 0 0;
  list-style: none;
  direction: rtl;
  overflow: visible;
}

.ag-foundation-1 {
  grid-area: one;
  background: #add594;
}

.ag-foundation-2 {
  grid-area: two;
  background: #f79897;
}

.ag-foundation-3 {
  grid-area: three;
  background: #eabfd9;
}

.ag-foundation-4 {
  grid-area: four;
  background: #ffee81;
}

.ag-foundation-5 {
  grid-area: five;
  background: #b8e4ee;
}

.ag-foundation-6 {
  grid-area: six;
  background: #f59ec4;
}

.ag-foundation,
.ag-foundation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 10.5rem;
  padding: 1.25rem 0;
  border: none;
  border-radius: 0.625rem;
  box-shadow: none;
  filter: none;
  cursor: default;
  pointer-events: none;
  overflow: visible;
  direction: rtl;
  text-align: center;
  opacity: 0;
  translate: 0 1.25rem;
  will-change: transform;
}

.ag-foundation:hover,
.ag-foundation-card:hover {
  box-shadow: none;
  filter: none;
}

.ag-foundations.is-revealed .ag-foundation,
.ag-foundations.is-revealed .ag-foundation-card {
  animation-name: agFadeInUp, gentleFloat;
  animation-duration: 1.2s, 6s;
  animation-timing-function: ease, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
  will-change: transform;
}

.ag-foundations.is-revealed .ag-foundation:nth-child(1) {
  animation-delay: 0s, 1.2s;
}

.ag-foundations.is-revealed .ag-foundation:nth-child(2) {
  animation-delay: 0.5s, 1.7s;
}

.ag-foundations.is-revealed .ag-foundation:nth-child(3) {
  animation-delay: 1s, 2.2s;
}

.ag-foundations.is-revealed .ag-foundation:nth-child(4) {
  animation-delay: 1.5s, 2.7s;
}

.ag-foundations.is-revealed .ag-foundation:nth-child(5) {
  animation-delay: 2s, 3.2s;
}

.ag-foundations.is-revealed .ag-foundation:nth-child(6) {
  animation-delay: 2.5s, 3.7s;
}

@keyframes agFadeInUp {
  from {
    opacity: 0;
    translate: 0 1.25rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes gentleFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

.ag-foundation-num {
  position: absolute;
  top: -1.05rem;
  left: -0.55rem;
  right: auto;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--navy);
  direction: ltr;
  text-align: center;
}

.ag-foundation-label {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 11rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-align: center;
}

@media (max-width: 56rem) {
  .ag-goals-grid {
    column-gap: 0.85rem;
    row-gap: 1.25rem;
  }

  .ag-goal-icon {
    width: 5.25rem;
    max-width: 5.25rem;
  }

  .ag-goal-4 .ag-goal-icon {
    width: 6.75rem;
    max-width: 6.75rem;
  }

  .ag-goal-2 .ag-goal-icon {
    width: 6rem;
    max-width: 6rem;
  }

  .ag-foundations-grid {
    gap: 2.25rem 1.5rem;
  }
}

@media (max-width: 51.25rem) {
  .ag-goals-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .ag-goal {
    align-items: flex-start;
    width: 100%;
  }

  .ag-goal-copy,
  .ag-goal-text {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .ag-goal-title {
    display: block;
    width: 100%;
    text-align: right;
  }
}

@media (max-width: 768px) {
  .ag-pipe-green {
    left: -1.75rem;
    width: 7rem;
  }

  .ag-pipe-mid {
    left: -2rem;
    width: 9rem;
  }

  .ag-pipe-lower {
    right: 0;
    width: 11rem;
  }

  .ag-goal-icon,
  .ag-goal-2 .ag-goal-icon,
  .ag-goal-4 .ag-goal-icon {
    width: 4.75rem;
    max-width: 4.75rem;
  }

  .ag-goals-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }

  .ag-goal {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }

  .ag-goal-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    max-width: 100%;
  }

  .ag-goal-title {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    align-self: flex-start;
  }

  .ag-goal-text {
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .ag-foundations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "one two"
      "three four"
      "five six";
    gap: 1.35rem 0.75rem;
    width: 100%;
    max-width: 100%;
  }

  .ag-foundation,
  .ag-foundation-card {
    min-height: 8.25rem;
    padding: 0.85rem 0.5rem;
  }

  .ag-foundation-label {
    max-width: 100%;
    font-size: 1.05rem;
    line-height: 1.35;
  }

  .ag-foundation-num {
    font-size: 1.75rem;
    top: -0.85rem;
    left: -0.35rem;
  }
}

@media (max-width: 47.9375rem) {
  .ag-foundations-grid {
    gap: 1.15rem 0.65rem;
  }
}

@media (max-width: 30rem) {
  .ata-unit-page {
    padding: 1.75rem 1rem 3rem;
  }

  .ag-foundation,
  .ag-foundation-card {
    min-height: 7.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-goal,
  .ag-foundation,
  .ag-foundation-card,
  .ag-foundation:hover,
  .ag-foundation-card:hover,
  .ag-foundations.is-revealed .ag-foundation,
  .ag-foundations.is-revealed .ag-foundation-card {
    opacity: 1;
    transform: none;
    translate: none;
    animation: none;
  }
}