/* Section heading of the old site: a red bar beside the name, an optional
   line, and "Tümünü gör" on the right. No rule under it. */

.g-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 16px;
}

.g-section-heading__title {
  position: relative;
  margin: 0;
  padding-left: 14px;
  font-size: var(--wp--preset--font-size--section);
  font-weight: 800;
  line-height: 1.05;
}

.g-section-heading__title::before {
  content: "";
  position: absolute;
  inset: 0.08em auto 0.08em 0;
  width: 5px;
  background: var(--wp--preset--color--brand);
}

.g-section-heading__tagline {
  display: none;
  margin: 0;
  color: var(--wp--preset--color--stone);
  font-size: var(--wp--preset--font-size--meta);
}

.g-section-heading__more {
  margin-left: auto;
  padding-block: 2px;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 250ms ease-out;
}

.g-section-heading__more:hover,
.g-section-heading__more:focus-visible {
  text-decoration-color: var(--wp--preset--color--brand);
}

.g-section-heading--dark,
.g-section-heading--dark .g-section-heading__tagline {
  color: #ffffff;
}

.g-section-heading--dark .g-section-heading__more:hover,
.g-section-heading--dark .g-section-heading__more:focus-visible {
  text-decoration-color: #ffffff;
}

@media (min-width: 768px) {
  .g-section-heading__tagline {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g-section-heading__more {
    transition: none;
  }
}

/* A heading that is a tile: one slim band with the red bar, the name and the link. */
.g-section-heading.g-section-heading--tile {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 6px 12px 6px 28px;
}

.g-section-heading--tile::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 12px;
  width: 6px;
  background: var(--wp--preset--color--brand);
}

.g-section-heading--tile .g-section-heading__title {
  padding-left: 0;
  font-size: 1.625rem;
  line-height: 1.05;
}

.g-section-heading--tile .g-section-heading__title::before {
  content: none;
}

.g-section-heading--tile .g-section-heading__more {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  font-weight: 500;
}

@media (min-width: 390px) {
  .g-section-heading--tile .g-section-heading__title {
    font-size: 1.75rem;
  }
}

@media (min-width: 768px) {
  .g-section-heading.g-section-heading--tile {
    padding: 6px 16px 6px 34px;
  }

  .g-section-heading--tile::before {
    left: 16px;
    width: 7px;
  }

  .g-section-heading--tile .g-section-heading__title {
    font-size: var(--wp--preset--font-size--pano-section-row);
  }
}

/*
 * Lower home sections are drawn only as the reader nears them. Their lazy photos then wait too,
 * instead of sharing a phone's connection with the lead photo. The reserved height keeps the
 * scrollbar steady; "auto" remembers the real height once a section has been drawn.
 * The columnists' shelf and the video shelf measure themselves on load, so they stay drawn.
 */
.gorunum-home > .g-section,
.gorunum-home > .gorunum-home__columns,
.gorunum-home > .g-home-memorial {
  content-visibility: auto;
  contain-intrinsic-size: auto 1100px;
}

/* On phones and tablets the top block runs about three screens tall; its last row waits too. */
.g-home-top .g-current-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

@media (min-width: 1024px) {
  .gorunum-home > .g-section,
  .gorunum-home > .gorunum-home__columns,
  .gorunum-home > .g-home-memorial {
    contain-intrinsic-size: auto 720px;
  }

  /* On a wide screen that row is part of the first screen. */
  .g-home-top .g-current-row {
    content-visibility: visible;
  }
}