/* Amazon: builds on project.css. A short, NDA-safe page in the presentation's navy and blue. */

/* ---------- Theme ---------- */
.amz {
  --amz-navy: #0f1a26;
  --amz-blue: #5b8def;

  --color-bg-brand: #2f6bdc;
  --color-bg-brand-hover: #2459bd;
  --color-bg-brand-subtle: #eaf0fc;
  --color-text-brand: #2a62cc;
  --color-border-brand: #2f6bdc;
  --color-icon-brand: #2f6bdc;
  --pj-brand-light: #8fb2f2;
}

/* The intro: the frame runs margin to margin, filled with the video's own blue backdrop
   (sampled from its edges). The video keeps its size in the middle, 880px at most, so it stays
   sharp, and its sides fade into the backdrop, which also hides its black corners. */
.amz-cover {
  display: grid;
  justify-items: center;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(#a4dbfa, #a9d5f8 50%, #89c8fd) left / 50% 100% no-repeat,
    linear-gradient(#c5e4ff, #edf5ff 50%, #edf5ff) right / 50% 100% no-repeat;
}

.amz-cover video {
  display: block;
  width: min(100%, 880px);
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 1.8%, #000 7%, #000 93%, transparent 98.2%);
  mask-image: linear-gradient(to right, transparent 1.8%, #000 7%, #000 93%, transparent 98.2%);
  clip-path: inset(3px 0); /* the video's own black edge along the top and bottom */
}

/* ---------- 01 The brief ---------- */
.amz-brief {
  margin: 0;
  padding: var(--space-5xl) var(--space-4xl);
  border-radius: var(--radius-xl);
  background: var(--color-bg-brand-subtle);
  text-align: center;
}

.amz-brief p {
  max-width: 34ch;
  margin: 0 auto;
  color: var(--color-text-secondary);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.amz-brief strong {
  color: var(--color-text-primary);
}

/* ---------- 02 What I built ---------- */
.amz-layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.amz-layers li {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  background: var(--color-bg-secondary, #f1f2f4);
}

.amz-layers h3 span {
  margin-left: var(--space-sm);
  color: var(--color-text-brand);
}

.amz-layers p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

/* The three shapes from the presentation: one block, two stacked, two side by side. */
.amz-layers__shape {
  display: grid;
  gap: 6px;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-lg);
}

.amz-layers__shape--what {
  border-radius: 28px 10px 28px 28px;
  background: var(--amz-blue);
}

.amz-layers__shape--how {
  grid-template-rows: 1fr 1.6fr;
}

.amz-layers__shape--where {
  grid-template-columns: 1fr 1fr;
}

.amz-layers__shape i {
  border-radius: 14px;
  background: var(--amz-blue);
}

.amz-pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-4xl);
  margin: var(--space-2xl) 0 0;
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  background: var(--amz-navy);
  list-style: none;
}

.amz-pillars li {
  color: #e9edf5;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.015em;
}

.amz-pillars li + li::before {
  content: "·";
  margin-right: var(--space-4xl);
  color: var(--amz-blue);
}

/* ---------- Under NDA ---------- */
.amz-nda {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xl) var(--space-3xl);
  padding: var(--space-4xl);
  border-radius: var(--radius-xl);
  background: #1b1e24;
  color: #e9edf5;
}

.amz-nda__mark {
  flex: none;
  width: 52px;
  height: 52px;
  fill: none;
  stroke: var(--pj-brand-light);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.amz-nda__text {
  display: grid;
  flex: 1 1 320px;
  gap: var(--space-sm);
}

.amz-nda__text h2 {
  margin: 0;
  color: #f9f9f9;
}

.amz-nda__text p {
  max-width: 60ch;
  margin: 0;
  color: #c3c9d4;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1099px) {
  .amz-layers {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .amz-brief {
    padding: var(--space-3xl) var(--space-xl);
  }

  .amz-pillars {
    flex-direction: column;
    align-items: center;
  }

  .amz-pillars li + li::before {
    content: none;
  }

  .amz-nda {
    padding: var(--space-2xl);
  }
}