/* Page-owned styles for /porady/ */
.porady-page {
  --porady-section-pad: var(--space-xxl);
}

/* Hero */
.porady-hero {
  background-color: var(--color-sand);
  padding-block: var(--porady-section-pad);
  text-align: center;
}

.porady-hero__inner {
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.porady-hero__inner > * {
  min-width: 0;
}

.porady-hero h1 {
  margin-block-end: 0;
}

.porady-hero__lead {
  max-width: 600px;
  margin-block-end: 0;
}

.porady-hero__facts {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
  max-width: 500px;
  width: 100%;
}

.porady-hero__facts li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.porady-hero__facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-grass-green);
  border: var(--border-width) var(--border-style) var(--color-deep-forest);
}

.porady-cta {
  min-width: 220px;
}

/* Intro */
.porady-intro {
  background-color: var(--color-white);
  padding-block: var(--porady-section-pad);
}

.porady-intro__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.porady-intro__column {
  min-width: 0;
}

.porady-intro__column h2 {
  margin-block-end: var(--space-md);
}

.porady-intro__column p {
  margin-block-end: var(--space-md);
}

.porady-intro__column .content-list {
  margin-block-start: var(--space-md);
}

/* Steps */
.porady-steps {
  background-color: var(--color-sand);
  padding-block: var(--porady-section-pad);
}

.porady-steps h2,
.porady-building h2 {
  margin-block-end: var(--space-xl);
  text-align: center;
}

.porady-steps__grid,
.porady-building__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.porady-card {
  background-color: var(--color-cream);
  border: var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform 0.2s ease;
}

.porady-card:hover {
  transform: translateY(-4px);
}

.porady-card h3 {
  margin-block-end: 0;
}

.porady-card p {
  margin-block-end: 0;
}

.porady-card .content-list {
  margin-block-end: 0;
}

.porady-card__icon {
  font-size: 2rem;
  line-height: 1;
}

/* Exploration */
.porady-exploration {
  background-color: var(--color-white);
  padding-block: var(--porady-section-pad);
}

.porady-exploration__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-xl);
  align-items: start;
}

.porady-exploration__content {
  min-width: 0;
}

.porady-exploration__content h2 {
  margin-block-end: var(--space-lg);
}

.porady-exploration__content article {
  margin-block-end: var(--space-lg);
}

.porady-exploration__content article:last-child {
  margin-block-end: 0;
}

.porady-exploration__content h3 {
  margin-block-end: var(--space-sm);
}

.porady-exploration__content p {
  margin-block-end: var(--space-sm);
}

.porady-exploration__content .content-list {
  margin-block-end: 0;
}

.porady-exploration__media {
  min-width: 0;
  margin-block-end: 0;
}

.porady-exploration__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid var(--color-deep-forest);
  border-radius: var(--radius-md);
}

.porady-exploration__media figcaption {
  margin-block-start: var(--space-xs);
}

/* Building */
.porady-building {
  background-color: var(--color-sand);
  padding-block: var(--porady-section-pad);
}

/* Mistakes */
.porady-mistakes {
  background-color: var(--color-cream);
  padding-block: var(--porady-section-pad);
}

.porady-mistakes__inner {
  max-width: 600px;
  margin-inline: auto;
}

.porady-mistakes h2 {
  margin-block-end: var(--space-xl);
}

.porady-mistakes__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.porady-mistakes__list > li {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  min-width: 0;
}

.porady-mistakes__icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.porady-mistakes__list h3 {
  margin-block-end: var(--space-sm);
}

.porady-mistakes__list p {
  margin-block-end: var(--space-sm);
}

.porady-mistakes__list .content-list {
  margin-block-end: 0;
}

/* Summary */
.porady-summary {
  background-color: var(--color-sand);
  padding-block: var(--porady-section-pad);
  text-align: center;
}

.porady-summary__inner {
  max-width: 600px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.porady-summary__inner > * {
  min-width: 0;
}

.porady-summary h2 {
  margin-block-end: 0;
}

.porady-summary p {
  margin-block-end: 0;
}

.porady-summary__list {
  margin-block-end: 0;
  text-align: left;
  max-width: 400px;
  width: 100%;
}

/* Download */
.porady-download {
  background-color: var(--color-grass-green);
  padding-block: var(--porady-section-pad);
  text-align: center;
}

.porady-download__inner {
  max-width: 500px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.porady-download__inner > * {
  min-width: 0;
}

.porady-download h2,
.porady-download p {
  color: var(--color-white);
}

.porady-download h2 {
  margin-block-end: 0;
}

.porady-download p {
  margin-block-end: 0;
}

.porady-download__facts {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
  color: var(--color-white);
  max-width: 400px;
  width: 100%;
}

.porady-download__facts li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.porady-download__facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-clay-orange);
  border: var(--border-width) var(--border-style) var(--color-deep-forest);
}

.porady-download__cta {
  min-width: 240px;
}

/* Tablet: 768px */
@media (max-width: 48rem) {
  .porady-intro__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .porady-steps__grid,
  .porady-building__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .porady-exploration__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .porady-exploration__media {
    order: 2;
  }

  .porady-exploration__content {
    order: 1;
  }
}

/* Mobile: 390px */
@media (max-width: 30rem) {
  .porady-page {
    --porady-section-pad: var(--space-xl);
  }

  .porady-hero__inner,
  .porady-summary__inner,
  .porady-download__inner {
    gap: var(--space-md);
  }

  .porady-card {
    padding: var(--space-md);
  }

  .porady-mistakes__list > li {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .porady-cta,
  .porady-download__cta {
    width: 100%;
    min-width: 0;
  }
}