@layer styles {
  /*
   * One, two, then three across.
   *
   * Counted rather than left to auto-fill: with minmax tracks the number of
   * columns falls out of the container width and the gap, so a column
   * silently appears or disappears whenever --container-max-width is touched.
   * Three across on a desktop is a design decision, so it says three.
   *
   * Three starts at 60em rather than the site's usual 48em: at 48em the
   * container is still narrower than the viewport, and thirds of it are too
   * small to read a caption in.
   */
  .instagram-feed {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space--medium) var(--space);
    margin-top: var(--space);
    padding: 0;
    list-style: none;
  }

  @media (min-width: 30em) {
    .instagram-feed {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 60em) {
    .instagram-feed {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .instagram-feed__more {
    margin-top: var(--space);
    text-align: center;
  }

  .instagram-post__body {
    white-space: pre-line;
  }

  /* --- "Läs mer" expander -------------------------------------------------
     CSS-only: the checkbox holds the state, the label is the control. Works
     with JavaScript disabled, and the full caption is always in the markup so
     screen readers reach it whether it is expanded or not. */

  .expander__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    /* Not display:none — it has to stay focusable for keyboard users. */
  }

  .expander__toggle:not(:checked) ~ .instagram-post__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  .expander__control {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: var(--font-size--small);
    text-decoration: underline;
    cursor: pointer;
  }

  .expander__toggle:focus-visible ~ .expander__control {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .expander__toggle:not(:checked) ~ .expander__control .expander__less,
  .expander__toggle:checked ~ .expander__control .expander__more {
    display: none;
  }

  /* --- Slide viewer ------------------------------------------------------ */

  .carousel {
    position: relative;
    display: block;
    margin-bottom: 0.75rem;
  }

  /* The track is the whole feature without JS: one slide wide, snapping. */
  .carousel__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .carousel__track::-webkit-scrollbar {
    display: none;
  }

  .carousel__track:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .carousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }

  .carousel__image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .carousel__nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.85);
    color: var(--color-ink);
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .carousel__nav--prev {
    left: 0.5rem;
  }
  .carousel__nav--next {
    right: 0.5rem;
  }

  /* Reveal on hover, and whenever anything inside is keyboard-focused. */
  .carousel:hover .carousel__nav,
  .carousel:focus-within .carousel__nav {
    opacity: 1;
  }

  .carousel__nav[disabled] {
    opacity: 0 !important;
    pointer-events: none;
  }

  .carousel__nav span::before {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }

  .carousel__nav--prev span::before {
    rotate: -135deg;
    translate: 2px 0;
  }
  .carousel__nav--next span::before {
    rotate: 45deg;
    translate: -2px 0;
  }

  .carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
  }

  .carousel__dot {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.25;
    cursor: pointer;
    transition: opacity 150ms ease;
  }

  .carousel__dot[aria-current='true'] {
    opacity: 1;
  }

  /* Announced by screen readers, not shown. */
  .carousel__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}