/*
 * PEK.si public layout v0.23.34
 * One authoritative responsive/layout correction layer.
 * Replaces pek-responsive.v0.23.32.css; do not stack both files.
 */

/* Shared safety: grid/flex children may shrink instead of overlapping neighbours. */
.hero-grid > *,
.editorial-grid > *,
.secondary-stories > *,
.topic-grid > * {
  min-width: 0;
}

/* Header: keep the expanded tablet navigation compact. */
@media (max-width: 1100px) {
  .site-header .header-inner {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
  }

  .site-header .menu-toggle[aria-expanded="false"] + .primary-nav {
    display: none !important;
  }

  .site-header .menu-toggle[aria-expanded="true"] + .primary-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
    order: 3;
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    margin: 0;
    padding: 12px 0 16px;
    align-items: stretch;
    align-content: start;
    justify-content: start;
  }

  .site-header .menu-toggle[aria-expanded="true"] + .primary-nav a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 9px 12px;
    text-align: left;
    white-space: normal;
    line-height: 1.25;
  }
}

/*
 * HERO minimum viable two-column width.
 * Around 1045px the former two-column composition had less than ~500px per side,
 * while the editorial H1 and trust row still required desktop width. Switch to
 * one normal-flow column before that collision point instead of offsetting layers.
 */
@media (max-width: 1180px) {
  .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    gap: 30px !important;
    padding-block: 38px !important;
  }

  .hero-copy,
  .hero-media {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .hero-copy {
    z-index: auto !important;
  }

  .hero-media {
    z-index: auto !important;
  }

  .hero-copy h1 {
    max-width: 18ch;
    text-wrap: balance;
  }
}

/*
 * Featured editorial block.
 * On compact desktop/tablet the three secondary cards become a readable stack
 * with image + copy. Descriptions stay visible instead of collapsing into thumbnails.
 */
@media (max-width: 1180px) {
  .editorial-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr) !important;
    gap: 32px !important;
    align-items: start !important;
  }

  .secondary-stories {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    align-content: start !important;
  }

  .compact-story {
    display: grid !important;
    grid-template-columns: 138px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: stretch !important;
    min-width: 0 !important;
    min-height: 138px;
    overflow: hidden;
  }

  .compact-story > * {
    min-width: 0;
  }

  .compact-story > div,
  .compact-story .compact-copy,
  .compact-story .story-copy {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 16px 14px 0 !important;
  }

  .compact-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 138px;
    margin: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover;
  }

  .compact-story h3,
  .compact-story h3 a {
    margin: 0 !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .compact-story p {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 8px 0 0 !important;
  }
}

@media (max-width: 900px) {
  .editorial-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
  }

  .secondary-stories {
    gap: 16px !important;
  }

  .compact-story {
    grid-template-columns: 160px minmax(0, 1fr) !important;
    min-height: 150px;
  }

  .compact-media {
    min-height: 150px;
  }
}

@media (max-width: 760px) {
  .site-header .menu-toggle[aria-expanded="true"] + .primary-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-grid {
    gap: 22px !important;
    padding-block: 28px !important;
  }

  .trust-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 620px) {
  .compact-story {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .compact-media {
    min-height: 0;
    aspect-ratio: 16 / 9 !important;
  }

  .compact-story > div,
  .compact-story .compact-copy,
  .compact-story .story-copy {
    padding: 14px 16px 18px !important;
  }
}

/*
 * Six core knowledge areas are intentionally 3 × 2 on desktop.
 * This removes the former 4 + 2 ragged grid and its visual empty slots.
 */
.topics--core-six {
  border-bottom: 0 !important;
}

.topic-grid--core-six {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.topic-grid--core-six .topic-card {
  min-width: 0;
  height: 100%;
}

/* The label no longer owns an arrow; keep one card-level directional cue only. */
.topic-grid--core-six .topic-card .topic-copy em::after {
  content: none !important;
}

.topic-grid--core-six .topic-card::after {
  content: "→";
}

.topics--core-six .pek-secondary-hubs {
  margin-top: 30px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 900px) {
  .topic-grid--core-six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .topic-grid--core-six {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}