/*
 * GBPicsHD — the "Modern" frontend (lib/theme.ts). The legacy theme CSS is not
 * loaded in this design; these rules style both the modern shell (m-*) and the
 * components shared by both designs (gallery, sharing, pagination, sidebar).
 *
 * Identity: blue header + GBPicsHD logo (matching the small signature on the images),
 * white panels on a cream page. Color comes from images and sharing buttons (each
 * network's own colors); brand blue is the interface's only accent.
 * No external font: the system font keeps loading fast.
 *
 * Visitors are mostly aged 30–70, sending images to WhatsApp from a phone: large text
 * (18px body), warm neutrals (Tailwind stone rather than cool blue-gray), large labeled
 * buttons, no automatic motion on load (only on touch/hover).
 *
 * Scales are fixed; choose from these rather than inventing new values:
 *   spacing 4 8 12 16 20 24 32 48 64
 *   text    13 14 16 17 18 20 24 30
 *   weight  400 (body) · 600 (accent) · 700 (heading) · 800 (logo)
 *   radius  8 (small) · 12 (panel, image)
 *   z-index 10 (label) · 40 (header) · 60 (skip link)
 * --link: the admin-configured link color (set inline by the layout); content links.
 */

:root {
  --brand: #1d4ed8;
  --brand-dark: #1e3a8a;
  --brand-light: #eff6ff;
  --link: #1d4ed8;
  /* Brand color as TEXT and as a background behind small white text: at least
     4.5:1 contrast against white (WCAG AA). When a light brand color is selected in the admin,
     the layout overrides this with a darker shade (lib/design.ts safeShade); the header band and borders retain --brand. */
  --brand-text: var(--brand);

  /* Warm neutrals (Tailwind stone). */
  --gray-50: #fafaf9;
  --gray-100: #f5f5f4;
  --gray-200: #e7e5e4;
  --gray-300: #d6d3d1;
  --gray-400: #a8a29e;
  --gray-500: #78716c;
  --gray-600: #57534e;
  --gray-700: #44403c;
  --gray-900: #1c1917;
  --cream: #f7f2ea;
  --warm: #f59e0b;

  /* Dark gray body text (gbpicsonline #303030): nearly black made bold text look too harsh. */
  --text: #302d2b;
  --text-2: var(--gray-600);
  --text-3: var(--gray-500);
  --page-bg: var(--cream);
  --panel: #fff;
  --border: var(--gray-200);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px 0 rgb(68 64 60 / 0.08), 0 1px 2px -1px rgb(68 64 60 / 0.08);

  --container: 1200px;
  --gutter: 12px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body.theme-modern {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font: 400 17px/1.75 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Resets use :where() for zero specificity, allowing component rules (one class) to override them. */
:where(.theme-modern) img {
  max-width: 100%;
  height: auto;
}

:where(.theme-modern) a {
  color: var(--link);
  text-decoration: none;
}

:where(.theme-modern) a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.theme-modern :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

:where(.theme-modern) :where(h1, h2, h3, h4) {
  margin: 0;
  color: var(--text);
  line-height: 1.25;
  text-wrap: balance;
}

:where(.theme-modern) p {
  margin: 0;
  text-wrap: pretty;
}

.theme-modern [hidden] {
  display: none !important;
}

.m-sr-only,
.theme-modern .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.m-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text) !important;
  font-weight: 600;
  transform: translateY(-200%);
}

.m-skip:focus {
  transform: none;
}

/* ---------------------------------------------------------------- header */

/* Blue band: logo + search; white menu strip below. Not sticky (save space on mobile). */
.m-header {
  background: var(--brand);
  color: #fff;
}

.m-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--gutter);
}

.m-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-right: auto;
  color: #fff !important;
  text-decoration: none !important;
}

.m-logo img {
  display: block;
  max-height: 40px;
  width: auto;
}

.m-mark {
  flex: none;
  color: var(--brand-text);
}

.m-logo-text {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.m-logo-text span {
  font-weight: 400;
  opacity: 0.8;
}

.m-search {
  display: flex;
  flex: 1 1 100%;
  order: 3;
  height: 44px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #fff;
}

.m-search input {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.m-search input:focus-visible {
  outline: none;
}

.m-search:focus-within {
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.4);
}

.m-search input::placeholder {
  color: var(--text-3);
}

.m-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  border: 0;
  background: transparent;
  color: var(--brand-text);
  cursor: pointer;
}

@media (min-width: 768px) {
  .m-search {
    flex: 0 1 400px;
    order: 0;
  }
}

.m-menu {
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.m-menu ul {
  display: flex;
  gap: 4px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.m-menu ul::-webkit-scrollbar {
  display: none;
}

.m-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.m-menu li:first-child a {
  margin-left: -12px;
}

.m-menu a:hover {
  color: var(--text);
  text-decoration: none;
}

.m-menu a[aria-current='page'] {
  border-bottom-color: var(--brand);
  color: var(--brand-text);
}

/*
 * Phone menu (as on bestekrabbels.nl): only the logo and ☰ in the blue band. The button
 * (menu-toggle.tsx) sets data-menu-open on the header; the menu opens vertically, with
 * search at the bottom, pushing the page down rather than covering it. No animation.
 * .m-header-inner becomes display: contents so search can follow the menu visually
 * while remaining next to the logo in the DOM.
 */
.m-menu-button {
  display: none;
}

/*
 * Externally injected header elements (AdSense auto ads, plugin code) must not split
 * the header row: every child except the logo / search / ☰ / menu goes to the END
 * of the row at full width. On phones .m-header-inner uses display: contents, so
 * layout occurs on .m-header; the same rule applies there. (The PageSpeed filmstrip
 * showed an ad between the logo and ☰, 2026-10-01.)
 */
.m-header-inner > :not(.m-logo, .m-search, .m-menu-button),
.m-header > :not(.m-header-inner, .m-menu) {
  flex: 1 1 100%;
  order: 20;
  max-width: 100%;
}

@media (max-width: 767px) {
  .m-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .m-header-inner {
    display: contents;
  }

  .m-logo {
    order: 0;
    min-height: 56px;
    padding-left: var(--gutter);
  }

  .m-menu-button {
    display: inline-flex;
    order: 1;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: calc(var(--gutter) - 10px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: #fff;
    cursor: pointer;
  }

  .m-menu-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
  }

  .m-header:not([data-menu-open]) .m-menu,
  .m-header:not([data-menu-open]) .m-search {
    display: none;
  }

  .m-menu {
    flex: 1 1 100%;
    order: 2;
    border-top: 1px solid rgb(255 255 255 / 0.2);
    border-bottom: 0;
    background: var(--brand-text);
  }

  .m-menu ul {
    display: block;
    padding: 0;
    overflow: visible;
  }

  .m-menu li:first-child a {
    margin-left: 0;
  }

  .m-menu a,
  .m-menu a:hover {
    display: flex;
    min-height: 56px;
    padding: 0 var(--gutter);
    border-bottom: 1px solid rgb(255 255 255 / 0.2);
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
  }

  .m-menu a[aria-current='page'] {
    border-bottom-color: rgb(255 255 255 / 0.2);
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .m-search {
    flex: 1 1 100%;
    order: 3;
    margin: 16px var(--gutter);
  }
}

/* ---------------------------------------------------------------- layout */

.m-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px var(--gutter) 48px;
}

.m-main {
  min-width: 0;
}

@media (min-width: 1024px) {
  .m-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    padding-top: 24px;
  }
}

/* Use full-width content when there are no sidebar widgets (categories page). */
.m-layout:has(> .m-sidebar .sidebar:empty) {
  grid-template-columns: minmax(0, 1fr);
}

.m-sidebar:has(.sidebar:empty) {
  display: none;
}

/* White panel: page frame, home blocks, sidebar widgets. */
.m-frame,
.m-block,
.m-sidebar .widget {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

@media (min-width: 640px) {
  .m-frame,
  .m-block {
    padding: 24px;
  }
}

.m-page-title {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 600;
}

@media (min-width: 640px) {
  .m-page-title {
    font-size: 26px;
  }
}

.m-content > * + * {
  margin-top: 24px;
}

.m-content h2 {
  font-size: 20px;
  font-weight: 600;
}

/* Bold uses 600 (soft like gbpicsonline); 700 looked too heavy in the system font. */
:where(.theme-modern) :where(strong, b) {
  font-weight: 600;
}

.m-content h3 {
  font-size: 18px;
  font-weight: 600;
}

.m-content .intro,
.m-content .outro,
.m-content .outro-text {
  max-width: 42em;
  color: var(--text-2);
}

.m-content .intro p + p,
.m-content .outro p + p {
  margin-top: 12px;
}

.m-content ul:not([class]),
.m-content ol:not([class]) {
  padding-left: 24px;
}

/* Static page text (About us, Contact, Legal notice) arrives inside an unstyled wrapper;
   the "> * + *" rule above does not reach it — paragraphs and headings ran together. */
.m-content > div:not([class]) > * + * {
  margin-top: 16px;
}

.m-content > div:not([class]) > h2 {
  margin-top: 32px;
  text-wrap: balance;
}

.m-content > div:not([class]) > p {
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- home */

/* One white card (like bestekrabbels): welcome, tiles, large images, holidays. */
.m-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 640px) {
  .m-home {
    gap: 40px;
  }
}

.m-welcome h1 {
  font-size: 24px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .m-welcome h1 {
    font-size: 30px;
  }
}

.m-date {
  margin-bottom: 4px;
  color: var(--brand-text);
  font-size: 16px;
  font-weight: 600;
}

.m-intro {
  max-width: 42em;
  margin-top: 8px;
  color: var(--text-2);
}

.m-block .m-intro:first-child {
  margin-top: 0;
}

.m-block-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.m-block-heading h2 {
  font-size: 20px;
  font-weight: 700;
}

.m-block-heading a {
  color: var(--brand-text);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

/* Greeting heading: "Good evening!" is bold; the question ("What would you like to send tonight?") is softer. */
.m-block-heading h2 span {
  color: var(--text-2);
  font-weight: 400;
}

/*
 * Tiles like bestekrabbels: 2 equal cells on phones, 4 on tablets and desktops; images
 * centered in each cell (160px on phones, 110×110 on wide screens), names span the cell.
 * Admin-configured tiles use the same layout.
 */
.m-tiles,
.theme-modern .gb-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .m-tiles,
  .theme-modern .gb-tile-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.m-tiles a,
.theme-modern .gb-tile a {
  display: block;
  color: var(--text);
  text-align: center;
}

.m-tiles a:hover {
  text-decoration: none;
}

.m-tile-image {
  position: relative;
  display: block;
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

@media (min-width: 480px) {
  .m-tile-image {
    width: 110px;
  }
}

.m-tile-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms ease;
}

/* Slight fade on hover like gbpicsonline (opacity .7, 0.2s); no scaling (user request 2026-10-05). */
@media (hover: hover) {
  .m-tiles a:hover img,
  .theme-modern .gb-tile a:hover img {
    opacity: 0.7;
  }

  .m-tiles a:hover .m-tile-name {
    color: var(--brand-text);
  }
}

.m-tile-name {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}





/* Large images: borderless like bestekrabbels, stacked; image, gallery name, count, sharing. */
.m-pictures {
  display: grid;
  grid-template-columns: minmax(0, 500px);
  justify-content: center;
  gap: 40px;
}

.m-picture {
  text-align: center;
}

.m-picture-image {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.m-picture-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Include the content container to override .m-content h2 (h2 on listing pages). */
.m-picture :is(h2, h3),
.m-content .m-picture h2 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
}

.m-picture :is(h2, h3) a {
  color: var(--text);
}

.m-picture :is(h2, h3) a:hover {
  color: var(--brand-text);
}

.m-picture-count {
  color: var(--text-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.m-picture .codeboxlinks {
  margin-top: 12px;
}

/* ---------------------------------------------------------------- listings (category, search): large stacked images like bestekrabbels */

.m-card-grid,
.theme-modern #archive-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.m-card-grid > *,
.theme-modern #archive-container > .archive-item {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.theme-modern #archive-container > .pagination {
  margin-top: 0;
}

.theme-modern .share-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Home quick links (legacy data): square tiles. */
.theme-modern .gbpics-quick-links-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 16px 12px;
}

.theme-modern .gbpics-quick-link-item {
  color: var(--text);
  text-align: center;
}

.theme-modern .gbpics-quick-link-item:hover {
  text-decoration: none;
}

.theme-modern .gbpics-quick-link-item figure {
  margin: 0;
}

.theme-modern .gbpics-quick-link-item img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  border-radius: var(--radius);
}

.theme-modern .gbpics-quick-link-title {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* Category page tile groups (Categories → Page layout): same as home tiles. */
.theme-modern .gb-tile-group + .gb-tile-group {
  margin-top: 32px;
}

.theme-modern .gb-tile-group h2 {
  margin-bottom: 16px;
  font-size: 20px;
}

/* Admin-configured tiles (Categories → Page layout): share the .m-tiles grid above. */
.theme-modern .gb-tile a:hover {
  color: var(--brand-text);
  text-decoration: none;
}

.theme-modern .gb-tile img,
.theme-modern .gb-tile-empty {
  display: block;
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  margin-inline: auto;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--gray-100);
  transition: opacity 200ms ease;
}

@media (min-width: 480px) {
  .theme-modern .gb-tile img,
  .theme-modern .gb-tile-empty {
    width: 110px;
  }
}

.theme-modern .gb-tile-title {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- gallery */

/* bestekrabbels layout: stacked images, each followed by sharing buttons and its message. */
.theme-modern .gbpics-post-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.theme-modern .gbpics-post-content > p {
  max-width: 42em;
  color: var(--text-2);
}

.theme-modern .gbpics-post-content figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center !important;
}

.theme-modern .gbpics-post-content > figure:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.theme-modern .gbpics-post-content figure > br {
  display: none;
}

.theme-modern .gbpics-post-content figure .gb-image-link {
  order: 1;
  width: 100%;
  max-width: 600px;
}

.theme-modern .gbpics-post-content figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.theme-modern .gbpics-post-content figcaption {
  order: 2;
  max-width: 600px;
  margin: 12px 0 0 !important;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.5;
}

.theme-modern .gbpics-post-content figcaption strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

.theme-modern .gbpics-post-content figcaption br {
  display: none;
}

.theme-modern .gbpics-post-content figure .codeboxlinks {
  order: 3;
  margin-top: 12px;
}

.theme-modern .gbpics-post-content figure .code-boxes {
  order: 4;
  width: 100%;
}

.theme-modern .gb-image-link {
  display: block;
}

/*
 * Sharing buttons: labeled ("WhatsApp", "Facebook", "Save"), 48px tall. The background
 * uses the network color (--share-color, ShareLink), darkened by 28% to make white
 * text readable (light green and orange have insufficient contrast with white).
 * On phones the buttons share the row equally, showing only labels without icons
 * (icons remain on desktop).
 */
.theme-modern .codeboxlinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
}

.theme-modern .codeboxlinks .share-button {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
}

.theme-modern .codeboxlinks a,
.theme-modern .share-icons a {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 48px;
  padding: 0 16px 0 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--share-color, var(--gray-700)) 72%, #000);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.theme-modern .codeboxlinks a:hover,
.theme-modern .share-icons a:hover {
  background: color-mix(in srgb, var(--share-color, var(--gray-700)) 60%, #000);
  text-decoration: none;
}

.theme-modern .gb-share-icon {
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
}

.theme-modern .gb-share-icon svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 479px) {
  .theme-modern .codeboxlinks {
    flex-wrap: nowrap;
    width: 100%;
  }

  .theme-modern .codeboxlinks .share-button {
    flex: 1 1 0;
  }

  /*
   * Labels only on narrow screens: icon + name did not fit across three buttons.
   * The names are familiar (WhatsApp, Facebook, Save); buttons share the full row equally.
   */
  .theme-modern .codeboxlinks a {
    height: 52px;
    padding: 0 8px;
  }

  /* !important overrides the inline display: inline-flex (ShareIcon). */
  .theme-modern .codeboxlinks a .gb-share-icon {
    display: none !important;
  }
}

/* Below 360px (older small phones): keep "WhatsApp" away from the button edge. */
@media (max-width: 359px) {
  .theme-modern .codeboxlinks {
    gap: 6px;
  }

  .theme-modern .codeboxlinks a {
    padding: 0 4px;
    font-size: 15px;
  }
}

/* Link/HTML/BB-code boxes. */
.theme-modern .code-boxes {
  display: grid;
  gap: 8px;
  max-width: 600px;
  margin: 16px auto 0;
  text-align: left;
}

.theme-modern .code-box label {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.theme-modern .code-box strong {
  color: var(--text-3);
  font-size: 14px;
  font-weight: 600;
}

.theme-modern .codebox {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  color: var(--text-2);
  font: 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Pagination (site.tsx Pagination). */
.theme-modern .pagination {
  margin-top: 32px;
}

.theme-modern .pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.theme-modern .pagination li {
  display: flex;
}

.theme-modern .pagination a,
.theme-modern .pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.theme-modern .pagination a:hover {
  border-color: var(--brand);
  color: var(--brand-text);
  text-decoration: none;
}

.theme-modern .pagination .current {
  border-color: var(--brand);
  background: var(--brand-text);
  color: #fff;
}

.theme-modern .pagecount {
  margin-top: 12px;
  color: var(--text-3);
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Related images below a post and similar images on the image page. */
.theme-modern #related-images,
.theme-modern .gb-similar {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.theme-modern .gb-similar h2 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 400;
  text-align: left;
}

@media (min-width: 640px) {
  .theme-modern .gb-similar h2 {
    font-size: 26px;
  }
}

/* Similar images on the image page — gbpicsonline dimensions (2026-10-05): centered two columns, square corners;
   150px / 15px gap on phones, 200px / 40px gap on wide screens. */
.theme-modern .gb-similar #boxes-related-images {
  grid-template-columns: repeat(auto-fill, 150px);
  justify-content: center;
  gap: 15px;
}

/* Fixed 200px tiles on wide screens, as many columns as fit (gbpicsonline: 2 on narrow desktops, 3 on wide). */
@media (min-width: 640px) {
  .theme-modern .gb-similar #boxes-related-images {
    grid-template-columns: repeat(auto-fill, 200px);
    gap: 40px;
  }
}

.theme-modern .gb-similar .box-related-images a {
  border-radius: 0;
}

/* Two columns on phones: three made image text unreadable and tiles cramped. */
.theme-modern #boxes-related-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 640px) {
  .theme-modern #boxes-related-images {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

.theme-modern .box-related-images a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.theme-modern .box-related-images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------- image page */

.theme-modern .gb-image-page > :not(.gb-similar) {
  max-width: 600px;
  margin-inline: auto;
}

.theme-modern .gb-image {
  margin: 0 auto;
}

.theme-modern .gb-image img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.theme-modern .gb-image-page > br {
  display: none;
}

/* Link/HTML/BB-code boxes are unnecessary on phones (no copying into forums): hidden. */
@media (max-width: 479px) {
  .theme-modern .gb-image-page .code-boxes,
  .theme-modern .gb-image-page .gb-codes {
    display: none;
  }
}

.theme-modern .gb-image-page .codeboxlinks {
  margin-top: 16px;
}

/* Below the image (gbpicsonline img-*.html, user request 2026-10-05): simple, centered, spacious. */
.theme-modern .gb-image-page .detail {
  margin-top: 28px;
  text-align: center;
  text-wrap: balance;
}

.theme-modern .gb-image-page .name {
  margin-top: 12px;
  text-align: center;
  text-wrap: pretty;
}

.theme-modern .category-link {
  margin-top: 20px;
  text-align: center;
}

.theme-modern .category-link a {
  color: var(--brand-text);
  font-size: 18px;
  font-weight: 600;
}

.theme-modern .category-link a:hover {
  text-decoration: underline;
}

/* Embed codes — exact gbpicsonline img-*.html dimensions (2026-10-05): 400×41 white box, 1px gray
   border, square corners, normal font; 42×41 copy button; centered label above. */
.theme-modern .gb-codes {
  display: grid;
  gap: 8px;
  margin: 10px auto 0;
  padding-bottom: 20px;
}

.theme-modern .gb-code label {
  display: block;
  font-weight: 600;
  text-align: center;
}

.theme-modern .gb-code-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.theme-modern .gb-code .codebox {
  flex: 0 1 400px;
  min-width: 0;
  height: 41px;
  padding: 6px;
  border: 1px solid #777;
  border-radius: 0;
  background: #fff;
  color: #868695;
  font: 16px/1.2 var(--font);
}

.theme-modern .gb-copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 41px;
  border: 1px solid #aaa;
  border-radius: 3px;
  background: #f5f5f5;
  color: var(--text);
  cursor: pointer;
}

.theme-modern .gb-copy:hover {
  background: #e9e9e9;
}

.theme-modern .gb-copy:focus-visible,
.theme-modern .gb-code .codebox:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

.theme-modern .category-link br {
  display: none;
}

.theme-modern .gb-image-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-weight: 600;
}

.theme-modern .gb-image-position {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.theme-modern .gb-image-categories {
  margin-top: 24px;
  color: var(--text-3);
}

/* ---------------------------------------------------------------- categories page (category-directory.tsx) */

.m-index-intro {
  margin-top: -4px;
}

.m-index {
  margin-top: 24px;
}

/* Filter box + result count. */
.m-index-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.m-index-search {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-3);
}

.m-index-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.m-index-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.m-index-search input:focus-visible {
  outline: none;
}

.m-index-total {
  color: var(--text-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* A–Z index: stays at the top while scrolling. */
.m-alphabet {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px -4px 0;
  padding: 8px 4px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.m-alphabet a,
.m-alphabet span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
}

.m-alphabet a {
  color: var(--text);
}

.m-alphabet a:hover {
  background: var(--brand-light);
  color: var(--brand-text);
  text-decoration: none;
}

.m-alphabet span {
  color: var(--gray-300);
}

/* One horizontally scrolling row on phones: keep the sticky strip from covering the screen. */
@media (max-width: 639px) {
  .m-alphabet {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .m-alphabet::-webkit-scrollbar {
    display: none;
  }

  .m-alphabet a,
  .m-alphabet span {
    flex: none;
  }
}

/* Letter groups. */
.m-index-group {
  scroll-margin-top: 72px;
  margin-top: 32px;
}

.m-index-letter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--brand-text);
  font-size: 20px;
  font-weight: 700;
}

.m-index-letter::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.m-index-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-index-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.m-index-list a:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  text-decoration: none;
}

.m-index-image {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
}

.m-index-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-index-text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.m-index-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-index-list a:hover .m-index-name {
  color: var(--brand-text);
}

.m-index-count {
  color: var(--text-3);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.m-index-empty {
  margin-top: 32px;
  color: var(--text-3);
  text-align: center;
}

/* ---------------------------------------------------------------- sidebar */

.m-sidebar .sidebar {
  display: grid;
  gap: 16px;
  align-content: start;
}

@media (min-width: 1024px) {
  .m-sidebar .sidebar {
    gap: 24px;
  }
}

.m-sidebar .widget-header {
  margin: -16px -16px 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.m-sidebar .widget-title {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.m-sidebar .widget ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-sidebar .widget li a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 17px;
}

.m-sidebar .widget li a:hover {
  background: var(--brand-light);
  color: var(--brand-text);
  text-decoration: none;
}

.m-sidebar .widget .current-cat > a,
.m-sidebar .widget a[aria-current='page'] {
  background: var(--brand-light);
  color: var(--brand-text);
  font-weight: 600;
}

.m-sidebar .widget .children {
  padding-left: 12px;
}

.m-sidebar .cat-item-all {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.m-sidebar .cat-item-all a {
  color: var(--brand-text);
  font-weight: 600;
}

/* Sidebar search (site.tsx SearchForm; hidden in modern because the header already has search). */
.m-sidebar .search-form {
  display: flex;
}

.m-sidebar .search-form label {
  flex: 1;
  min-width: 0;
}

.m-sidebar .search-field {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--gray-300);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: #fff;
  font: inherit;
}

.m-sidebar .search-submit {
  width: 48px;
  height: 44px;
  border: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
    center / 20px no-repeat;
  cursor: pointer;
}

/* ---------------------------------------------------------------- advertising */

.theme-modern .advertisement {
  margin: 24px auto !important;
}

/* ---------------------------------------------------------------- footer */

/* Owner-approved footer v3: today's images, sharing steps and a quiet base row.
   lib/design.ts overrides footer-local tokens for dark admin-selected backgrounds. */
.m-footer {
  --footer-bg: var(--panel);
  --footer-fg: var(--text);
  --footer-muted: #6b6560;
  --footer-line: var(--border);
  --footer-tile: #efedeb;
  --footer-accent: var(--brand-text);
  --footer-dot: var(--brand);
  --footer-step-bg: var(--page-bg);
  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: 1px solid var(--footer-line);
}

.m-footer-inner {
  display: grid;
  gap: 30px;
  max-width: min(1120px, var(--container));
  margin: 0 auto;
  padding: 36px 28px 0;
}

.m-footer a {
  color: var(--footer-fg);
  text-decoration: none;
}

.m-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.m-footer a:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 3px;
}

.m-footer h2 {
  color: var(--footer-fg);
  text-wrap: balance;
}

.m-footer p {
  text-wrap: pretty;
}

.m-footer-today {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr);
  gap: 20px 32px;
  align-items: center;
}

.m-footer-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--footer-muted);
}

.m-footer-kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--footer-dot);
}

.m-footer-today h2 {
  margin: 6px 0 10px;
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.2;
  font-weight: 700;
}

.m-footer .m-footer-more {
  color: var(--footer-accent);
  font-weight: 600;
  font-size: 15px;
}

.m-footer-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.m-footer-thumbs a {
  display: block;
  aspect-ratio: 1;
  border-radius: calc(var(--radius-sm) + 2px);
  background: var(--footer-tile);
  overflow: hidden;
}

.m-footer-thumbs a:focus-visible {
  border-radius: calc(var(--radius-sm) + 2px);
}

.m-footer-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-footer-howto h2 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--footer-muted);
}

.m-footer-howto ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-footer-howto li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: start;
  padding: 16px;
  border-radius: calc(var(--radius) + 2px);
  background: var(--footer-step-bg);
}

.m-footer-number {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-text);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.m-footer-howto strong {
  font-size: 15.5px;
}

.m-footer-howto p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--footer-muted);
}

.m-footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  border-top: 1px solid var(--footer-line);
  padding: 16px 0 calc(22px + env(safe-area-inset-bottom));
  font-size: 14px;
  color: var(--footer-muted);
}

.m-footer-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.m-footer-who img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
}

.m-footer-who a {
  color: inherit;
}

.m-footer-base nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
}

.m-footer-pinterest,
.m-footer-network {
  display: inline-flex;
  align-items: center;
}

.m-footer-pinterest {
  gap: 8px;
  font-weight: 600;
}

.m-footer-pinterest svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.m-footer-base .m-footer-top {
  color: var(--footer-muted);
}

/* "Datenschutz-Einstellungen": a button (it opens the consent dialog) that looks like the footer links. */
.m-footer-consent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.m-footer-consent:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.m-footer-consent:focus-visible {
  outline: 2px solid var(--footer-accent, var(--brand));
  outline-offset: 2px;
}

/* Use the site's small-screen breakpoint; four flexible thumbnails always fit in one row. */
@media (max-width: 639px) {
  .m-footer-inner {
    padding: 26px 16px 0;
    gap: 24px;
  }

  .m-footer-today,
  .m-footer-howto ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .m-footer-base {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-modern *,
  .theme-modern *::before,
  .theme-modern *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Automatic category link in a heading (lib/auto-link.ts): underlined like bestekrabbels.nl,
   so color is not the only distinction. */
.theme-modern .gb-auto-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Reserved ad boxes: 20px for the policy label, plus the unit's breakpoint height. */
.theme-modern .gb-ad {
  margin: 24px 0;
  min-height: 270px;
  min-width: 0;
  width: 100%;
  text-align: center;
}

.theme-modern .gb-ad-left {
  text-align: left;
}

.theme-modern .gb-ad-right {
  text-align: right;
}

.theme-modern .gb-ad img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.theme-modern .gb-ad-label {
  height: 20px;
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 20px;
}

.theme-modern .gb-ad-box {
  min-height: 250px;
}

.theme-modern .gb-ad-box > .advertisement,
.theme-modern .gb-ad-box > .gb-ad-slot {
  margin-inline: auto;
}

.theme-modern .gb-ad .adsbygoogle {
  margin-inline: auto;
}

.theme-modern .gb-ad-left .adsbygoogle {
  margin-left: 0;
}

.theme-modern .gb-ad-right .adsbygoogle {
  margin-right: 0;
}

.theme-modern .gb-ad-inline-unit,
.theme-modern .gb-ad[data-ad="post_content"] .gb-ad-box > img,
.theme-modern .gb-ad[data-ad="list_between"] .gb-ad-box > img {
  width: 300px;
  height: 250px;
  max-width: 100%;
  object-fit: contain;
}

/* Header and footer share the main column's grid and gutters. */
.theme-modern .gb-ad-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.theme-modern .gb-ad[data-ad="header_top"] {
  min-height: 120px;
}

.theme-modern .gb-ad[data-ad="header_top"] .gb-ad-box {
  min-height: 100px;
}

.theme-modern .gb-ad[data-ad="after_gallery"] {
  min-height: 600px;
}

.theme-modern .gb-ad[data-ad="after_gallery"] .gb-ad-box {
  min-height: 580px;
}

/* Keep ads outside picture/tool blocks, with a visible rule and 32px on either side. */
.theme-modern .gb-ad.gb-ad-separated {
  margin-block: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.theme-modern .gb-image-page > .gb-ad {
  max-width: none;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .theme-modern .gb-ad {
    min-height: 300px;
  }
  .theme-modern .gb-ad-box {
    min-height: 280px;
  }
  .theme-modern .gb-ad-inline-unit,
  .theme-modern .gb-ad[data-ad="post_content"] .gb-ad-box > img,
  .theme-modern .gb-ad[data-ad="list_between"] .gb-ad-box > img {
    width: 336px;
    height: 280px;
  }
  .theme-modern .gb-ad[data-ad="header_top"] {
    min-height: 110px;
  }
  .theme-modern .gb-ad[data-ad="header_top"] .gb-ad-box {
    min-height: 90px;
  }
  .theme-modern .gb-ad[data-ad="sidebar"] {
    min-height: 270px;
  }
  .theme-modern .gb-ad[data-ad="sidebar"] .gb-ad-box {
    min-height: 250px;
  }
  .theme-modern .gb-ad[data-ad="sidebar"].gb-ad-tall {
    min-height: 620px;
  }
  .theme-modern .gb-ad[data-ad="sidebar"].gb-ad-tall .gb-ad-box {
    min-height: 600px;
  }
  .theme-modern .gb-ad[data-ad="after_gallery"] {
    min-height: 400px;
  }
  .theme-modern .gb-ad[data-ad="after_gallery"] .gb-ad-box {
    min-height: 380px;
  }
}

@media (min-width: 1024px) {
  .theme-modern .gb-ad-shell {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
  }
  .theme-modern:has(.m-sidebar .sidebar:empty) .gb-ad-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Only confirmed unfilled units below the fold may collapse. Never hide initial units. */
.theme-modern .gb-ad:not([data-ad="header_top"]):not([data-ad="sidebar"]):has(ins[data-ad-status="unfilled"]) {
  display: none;
}

/* Screen limit from the panel (ad_slots.device). Hidden units send no ad request (components/site/ads.tsx). */
@media (max-width: 767.98px) {
  .theme-modern .gb-ad-only-desktop {
    display: none;
  }
}

@media (min-width: 768px) {
  .theme-modern .gb-ad-only-mobile {
    display: none;
  }
}

/* Below 1024px the sidebar stacks right above the footer: a visible sidebar ad and the footer ad
   would follow each other at the end of the page, so the footer ad gives way. */
@media (max-width: 767.98px) {
  .theme-modern:has(.m-sidebar .gb-ad[data-ad="sidebar"]:not(.gb-ad-only-desktop)) .gb-ad-shell:has(> .gb-ad[data-ad="footer"]) {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .theme-modern:has(.m-sidebar .gb-ad[data-ad="sidebar"]:not(.gb-ad-only-mobile)) .gb-ad-shell:has(> .gb-ad[data-ad="footer"]) {
    display: none;
  }
}

/* ---------------------------------------------------------------- occasion calendar (/anlasse/) */

.ev-intro,
.ev-note {
  color: var(--text-2);
  text-wrap: pretty;
}

.ev-note {
  margin-top: 32px;
  font-size: 14px;
}





.ev-jump {
  margin-top: 16px;
}

.ev-month {
  margin-top: 32px;
  scroll-margin-top: 16px;
}

.ev-month h2 {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
  font-size: 20px;
  text-wrap: balance;
}

.ev-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gray-100);
}

.ev-date {
  flex: none;
  width: 88px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.ev-weekday {
  display: inline-block;
  width: 2.8ch;
  color: var(--text-3);
}

.ev-entry {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

a.ev-entry:hover .ev-name {
  color: var(--brand-text);
  text-decoration: underline;
}

span.ev-entry {
  color: var(--text-2);
  font-weight: 500;
}

.ev-image-empty {
  border: 1px dashed var(--gray-300);
}

.ev-entry img,
.ev-image-empty {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
}

.ev-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ev-month-name .ev-entry {
  color: var(--text-2);
  font-weight: 500;
}

.ev-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.ev-next {
  border-radius: var(--radius-sm);
  background: var(--brand-light);
}

.ev-badge-next {
  background: var(--brand);
  color: #fff;
}

@media (max-width: 479px) {
  .ev-list li {
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .ev-date {
    width: 80px;
  }

  .ev-entry {
    flex-basis: calc(100% - 90px);
  }

  .ev-badge {
    margin-left: 90px;
  }

  .ev-badge + .ev-badge {
    margin-left: 0;
  }
}

/* Subgallery strip above a gallery post (tile groups of the category with the same slug). */
.m-content > .gb-tiles:first-child {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

/* About us: Pinterest profile box (pinit.js iframe/grid). Prevent overflow on narrow screens. */
.m-pinterest-profile {
  margin-top: 32px;
  max-width: 100%;
  overflow: hidden;
}