/* layout: hearth */
/* Hearth layout — places components only. Uses tokens, never its own colours, fonts or sizes. */
.ly-utility { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-top: var(--space-sm); padding-bottom: var(--space-sm); flex-wrap: wrap; }
.ly-utility-links { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; color: var(--ink); }
.ly-utility-links a:hover, .ly-crumbs a:hover, .ly-headlines a:hover { text-decoration: underline; }

.ly-intro { padding-top: var(--space-2xl); padding-bottom: var(--space-xl); }
.ly-intro-rule { border-bottom: var(--border-hairline) solid var(--line-soft); padding-top: var(--space-md); }
.ly-crumbs { color: var(--ink-muted); }
.ly-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-xs); }
.ly-crumbs li + li::before { content: "/"; margin-right: var(--space-xs); }
.ly-crumbs [aria-current] { color: var(--ink); }

.ly-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3xl); padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
/* In this two-column grid, standard cards always stack (photo on top), whatever the system's feed style */
.ly-stories { --standard-direction: column; --standard-thumb-width: 100%; --standard-gap: var(--space-sm);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl) var(--space-2xl); padding-right: var(--space-2xl); border-right: var(--border-hairline) solid var(--line-soft); align-content: start; }
.ly-pager { grid-column: 1 / -1; display: flex; gap: var(--space-sm); }
.ly-pager-current { height: var(--button-height); }

.ly-sidebar { display: flex; flex-direction: column; gap: var(--space-3xl); }
.ly-block { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.ly-ranked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.ly-ranked li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.ly-tags > div { display: flex; flex-wrap: wrap; row-gap: var(--space-2xs); }
.ly-search { display: flex; }
.ly-search-input { flex: 1; min-width: 0; }
.ly-search-btn { height: var(--input-height); }

.ly-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl); padding-top: var(--space-2xl); padding-bottom: var(--space-3xl); }
.ly-footer-rule { border-top: var(--border-hairline) solid var(--line-soft); }
.ly-headlines { list-style: none; margin: 0; padding: 0; }
.ly-headlines li { padding: var(--space-sm) 0; border-bottom: var(--border-hairline) solid var(--line-soft); }
.ly-headlines h3 { margin: 0; color: var(--ink); }
.ly-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.ly-photos a { display: block; aspect-ratio: 1 / 1; background: var(--surface-alt); border-radius: var(--thumb-radius, var(--radius-none)); }

@media (max-width: 1100px) {
  .ly-main { grid-template-columns: minmax(0, 1fr); }
  .ly-stories { padding-right: 0; border-right: 0; }
  .ly-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl) var(--space-2xl); }
  .ly-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ly-sidebar { grid-template-columns: 1fr; }
  .ly-main, .ly-stories, .ly-footer-cols { grid-template-columns: 1fr; }
  .ly-stories { padding-right: 0; border-right: 0; }
}