/*
 * Bumo — overrides on top of Quark 2 (loaded last).
 */

/* Cal Sans (headings) ships a single 400 weight, but Quark 2 sets h2–h6 to
 * 600/700, so browsers smear on a faux bold. Cal Sans 400 is already heavy;
 * render it as designed. Inter is variable (100–900) and is unaffected. */
:root {
  font-synthesis-weight: none;
}

/* Cal Sans is a display face: below ~24px its heavy strokes and narrow word
 * spaces clog up. Keep it for h1/h2 and set the smaller headings in Inter,
 * which has real 600/700 weights. */
h3,
h4,
h5,
h6,
.card-title :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--pico-font-family-sans-serif);
}

img.rounded {
  border-radius: 8px;
}

img.shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Used in content as ?classes=float-right (Lastenrad Bubi image) */
img.float-right {
  float: right;
  max-width: 50%;
  margin: 0 0 1rem 1.5rem;
}
@media (max-width: 576px) {
  img.float-right {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem;
  }
}

/* The logo is black on transparent; keep it visible in dark mode. */
:root[data-theme="dark"] .navbar-brand img {
  filter: invert(1);
}

/* Blog post title: Quark 2's h1 display size is too large for long titles. */
.content-title h1 {
  /* Inter instead of Cal Sans: at this size Cal Sans clogs up (see above). */
  font-family: var(--pico-font-family-sans-serif);
  font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Home page: blog posts as a horizontally scrollable card strip
 * (templates/modular/latest-posts.html.twig). 3 cards on desktop,
 * 2 on tablet, and on phones the next card peeks in to hint at scrolling. */
.latest-posts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.latest-posts-nav {
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.latest-posts-nav[hidden] {
  display: none;
}
.latest-posts-nav .btn {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}
.latest-posts-nav .btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.blog-strip {
  --strip-gap: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: var(--strip-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  /* room for the card shadow and hover lift, which overflow would clip */
  padding: 0.5rem 0.25rem 1.25rem;
  margin-inline: -0.25rem;
}
@media (min-width: 560px) {
  .blog-strip {
    grid-auto-columns: calc((100% - var(--strip-gap)) / 2);
  }
}
@media (min-width: 1024px) {
  .blog-strip {
    grid-auto-columns: calc((100% - 2 * var(--strip-gap)) / 3);
  }
}
.blog-strip > .card {
  height: 100%;
  scroll-snap-align: start;
}
.blog-strip .card-body p {
  margin-bottom: 0;
}

/* Logo placeholder for posts and Eingaben without an image: a quiet gray
 * tile with the (black) logo toned down, inverted in dark mode. */
:root {
  --placeholder-bg: #ebebee;
  --placeholder-logo-filter: none;
  --placeholder-logo-opacity: 0.4;
}
:root[data-theme="dark"] {
  --placeholder-bg: var(--q2-bg-muted);
  --placeholder-logo-filter: invert(1);
  --placeholder-logo-opacity: 0.45;
}

.card-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--placeholder-bg);
}
.card-image--placeholder img,
.card-image.card-image--placeholder img {
  width: 45%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  filter: var(--placeholder-logo-filter);
  opacity: var(--placeholder-logo-opacity);
}

/* Heading on its own line, then the intro text with the "Alle Beiträge"
 * button next to it (wrapping below on narrow screens). The bottom margin
 * matches the scroll buttons so both line up above the strip. */
.latest-posts-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.latest-posts-intro h2 {
  flex-basis: 100%;
  margin-bottom: 0.25rem;
}
.latest-posts-intro p {
  margin: 0;
  color: var(--q2-text-muted);
}
.latest-posts-all i {
  margin-left: 0.375rem;
  font-size: 0.85em;
  transition: transform 0.2s ease;
}
.latest-posts-all:hover i {
  transform: translateX(2px);
}

/* Home page "Was wir machen": lay the feature cards out as a centered flex
 * wrap instead of Quark 2's grid, so an incomplete last row sits in the
 * middle. Column counts mirror Quark 2's layouts: small = 4 / 3 / 2 and
 * standard = 3 / 2 / 1 across desktop / tablet / phone. */
.modular-features .columns {
  --cols: 2;
  --gap: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.modular-features[data-layout="standard"] .columns {
  --cols: 1;
}
@media (min-width: 640px) {
  .modular-features .columns {
    --cols: 3;
  }
  .modular-features[data-layout="standard"] .columns {
    --cols: 2;
  }
}
@media (min-width: 1024px) {
  .modular-features .columns {
    --cols: 4;
  }
  .modular-features[data-layout="standard"] .columns {
    --cols: 3;
  }
}

/* Center icon and title on the feature cards. */
.modular-features .column {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
  text-align: center;
}
.modular-features .feature-icon {
  align-items: center;
}

/* Grouped rows of links: the Bürgereingaben timeline (templates/anfragen)
 * and the Linksammlung (templates/linksammlung). Rows are outlined rather
 * than filled, since they sit on the content panel, which already uses the
 * card color. */
.row-group {
  margin-top: 2rem;
}
.row-group h3 {
  margin-bottom: 0.75rem;
  color: var(--q2-text-muted);
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.row-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.row-list li {
  margin: 0;
  list-style: none;
}
.row-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: var(--q2-radius-md);
  box-shadow: inset 0 0 0 1px var(--q2-border-ring);
  color: inherit;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.row-link:hover,
.row-link:focus-visible {
  background: var(--q2-bg-muted);
  box-shadow: inset 0 0 0 1px var(--q2-border-strong);
}
.row-thumb {
  flex: 0 0 auto;
  width: 6rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--q2-radius);
}
.row-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.row-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--placeholder-bg);
}
.row-thumb.row-thumb--placeholder img {
  width: 60%;
  height: auto;
  object-fit: contain;
  filter: var(--placeholder-logo-filter);
  opacity: var(--placeholder-logo-opacity);
}
.row-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.row-text time,
.row-meta {
  color: var(--q2-text-muted);
  font-size: 0.875rem;
}
.row-desc {
  color: var(--q2-text);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.row-title {
  color: var(--q2-text-strong);
  font-weight: 600;
  line-height: 1.35;
}
.row-link:hover .row-title {
  color: var(--q2-accent);
}
.row-arrow {
  flex: 0 0 auto;
  color: var(--q2-text-muted);
}
@media (max-width: 576px) {
  .row-link {
    gap: 0.75rem;
  }
  .row-thumb {
    width: 4.5rem;
  }
  .row-arrow {
    display: none;
  }
}

/* Section overview tiles (templates/uebersicht): icon, title and teaser of
 * each subpage, centered like the home page tiles. Outlined like the rows
 * above, since they also sit on the content panel. */
.tile-grid {
  --cols: 1;
  --gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .tile-grid {
    --cols: 2;
  }
}
@media (min-width: 900px) {
  .tile-grid {
    --cols: 3;
  }
}
/* Flex instead of grid so an incomplete last row sits in the middle, like
 * the home page tiles. */
.tile-grid li {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
  margin: 0;
  list-style: none;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  height: 100%;
  padding: 1.25rem;
  border-radius: var(--q2-radius-md);
  box-shadow: inset 0 0 0 1px var(--q2-border-ring);
  color: inherit;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.tile:hover,
.tile:focus-visible {
  background: var(--q2-bg-muted);
  box-shadow: inset 0 0 0 1px var(--q2-border-strong);
}
.tile-icon {
  margin-bottom: 0.25rem;
  color: var(--q2-text-strong);
  font-size: 1.5rem;
}
.tile-title {
  color: var(--q2-text-strong);
  font-weight: 600;
  line-height: 1.35;
}
.tile:hover .tile-title {
  color: var(--q2-accent);
}
.tile-external {
  margin-left: 0.25rem;
  color: var(--q2-text-muted);
  font-size: 0.75em;
}
.tile-desc {
  color: var(--q2-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Home page hero (hero_classes: hero-tall): 70% of the screen, so the next
 * section peeks in. The image is positioned so the cyclist in the default
 * header photo sits below the slogan; Quark 2's parallax would pin the
 * image to the top, which is why the hero doesn't use it. */
.hero.hero-tall {
  min-height: 70dvh;
  background-position: center 62%;
}
.hero .hero-cta {
  margin-top: 1.5rem;
}

/* On-page anchors (#mitmachen etc.) land below the fixed header. */
.module-anchor {
  scroll-margin-top: 4.5rem;
}

/* Home page "Wer wir sind" tiles (templates/modular/ueber-uns): the
 * feature cards with the whole card as link and an h3 title styled like
 * Quark 2's h6 feature titles. */
.modular-ueber-uns .columns {
  margin-top: 2rem;
}
.modular-ueber-uns .column {
  padding: 0;
}
.modular-ueber-uns .feature-link {
  display: block;
  height: 100%;
  padding: 1.5rem 1.25rem;
  color: inherit;
  text-decoration: none;
}
.modular-ueber-uns .feature-title {
  margin: 0;
  color: var(--q2-text-strong);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
}
/* Tile icons: larger than Quark 2's 1.5rem, in the heading color. */
.modular-ueber-uns .feature-icon i {
  color: var(--q2-text-strong);
  font-size: 3.25rem;
}
.modular-ueber-uns .tile-svg svg {
  width: 3.25rem;
  height: 3.25rem;
}

/* Outline tile icons (tile_icon, partials/tile-icon) on the home page and
 * the overview pages: heading color and thinner strokes than Tabler's
 * default 2. Sizes are set per place. */
.tile-svg {
  color: var(--q2-text-strong);
  line-height: 0;
}
.tile-svg svg {
  stroke-width: 1.5;
}
.tile .tile-svg svg {
  width: 2.75rem;
  height: 2.75rem;
}