/* Category headings and dish rows: the menu, search results. A row reads well without a photo. */

@layer components {
  .section-title {
    margin: var(--s-5) var(--s-4) var(--s-2);
    font-family: var(--font-display);
    font-style: var(--display-style);
    font-weight: var(--display-weight);
    font-size: 1.3125rem;
  }

  .section-title--sub {
    font-size: 1.125rem;
  }

  .section-desc {
    margin: 0 var(--s-4) var(--s-2);
    color: var(--muted);
    font-size: 0.875rem;
  }

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

  .dish {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--border);
  }

  .dish__body {
    flex: 1;
    min-width: 0;
  }

  .dish__name {
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: break-word; /* a word that cannot fit on a line of its own breaks; the cards are wide enough for the longest ones (see .dishes) */
  }

  /* The link of the name covers the whole row: a big touch target, and the only link of the row. */
  /* Pressed: the row answers the finger at once. */
  .dish:active {
    background: var(--surface-2);
  }

  /*
   * The link is the name, a line of text 18 to 20px high: its own box is the 24px that WCAG 2.5.8 asks of a target (axe
   * measures the box of the element, not the stretched area of ::after). The padding is cancelled by the margin, so the text
   * stays where it is.
   */
  .dish__link {
    display: inline-block;
    padding-block: 2px;
    margin-block: -2px;
    color: var(--text);
    text-decoration: none;
  }

  .dish__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .dish:has(.dish__link:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
  }

  .dish__link:focus-visible {
    outline: 0;
  }

  .dish__desc {
    display: -webkit-box;
    margin: 2px 0 6px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.4;
    overflow-wrap: anywhere; /* a long word ("klei-oven/Tandoor.") breaks at large text instead of being clipped by the line clamp */
  }

  .dish__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .dish__extra {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.8125rem;
  }

  /* "3 gerechten gevonden" above the results. */
  .results-count {
    margin: 0 var(--s-4) var(--s-2);
    color: var(--muted);
    font-size: 0.875rem;
  }

  .price {
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .dish__side {
    position: relative;
    flex: none;
    align-self: center;
  }

  .dish__side--photo {
    align-self: flex-start;
    padding: 0 6px 6px 0;
  }

  .thumb {
    width: 84px;
    height: 84px;
    border-radius: var(--r-md);
    object-fit: cover;
    background: var(--surface-2);
  }

  /* The + button: it puts the dish in the cart, or opens it when it has a required choice (see _dish_row.html.twig). Above the stretched link of the row. */
  .add {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    text-decoration: none;
  }

  .dish__side--photo .add {
    position: absolute;
    right: -2px;
    bottom: -2px;
    border: 3px solid var(--surface);
  }

  @media (prefers-reduced-motion: no-preference) {
    .dish {
      transition:
        background-color var(--dur) ease-out,
        box-shadow var(--dur) ease-out;
    }

    .add {
      transition:
        transform var(--dur-fast) ease-out,
        background-color var(--dur) ease-out;
    }

    .add:active {
      transform: scale(0.96);
    }
  }

  /*
   * From 600px wide (a tablet, a phone on its side, a desktop) the dishes are a grid of cards: as many columns of at
   * least 270px as fit, so two on a tablet in portrait and two or three in the middle of the menu next to the sidebar.
   */
  @media (min-width: 600px) {
    .dishes {
      display: grid;
      /*
       * A card is at least 270px wide, and from about 175% text wider than that: wide enough for the longest word of a
       * title (6.5rem: "(vegetarische", "Mulligatawny") next to the + button, so that a title does not break a word at
       * large text ("Mulligatawn / y Soep"). 88px is the padding of the card, the button and the gap between them.
       */
      grid-template-columns: repeat(auto-fill, minmax(max(270px, calc(88px + 6.75rem)), 1fr));
      gap: var(--s-3);
      margin-inline: var(--s-4);
    }

    .dish {
      padding: var(--s-4);
      border-bottom: 0;
      border-radius: var(--r-lg);
      background: var(--surface);
      box-shadow: var(--shadow-1);
    }

    .dish:active {
      background: var(--surface-2);
    }
  }

  /*
   * Where there is a mouse a dish answers when it is pointed at: a row (a narrow window) takes the tint of a pressed
   * row, a card shows its edge and a soft shadow under it. It does not move: a card that lifts out from under the
   * pointer at its lower edge flickers.
   */
  @media (hover: hover) and (pointer: fine) {
    .dish:hover {
      background: var(--surface-2);
    }

    .add:hover {
      filter: brightness(1.1);
    }

    @media (min-width: 600px) {
      .dish:hover {
        background: var(--surface);
        box-shadow:
          var(--shadow-1),
          0 0 0 1px var(--border-strong),
          0 8px 20px color-mix(in srgb, var(--text) 12%, transparent);
      }
    }
  }

  /* "Back to the menu" in the page: where the title bar with the back button is not shown. */
  .back-link {
    display: none;
    align-items: center;
    align-self: flex-start;
    gap: var(--s-1);
    min-height: var(--tap);
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
  }

  .back-link:active {
    opacity: 0.6;
  }

  /* Hidden, it is still the first thing in the page, and the rule that spaces what follows another thing would push the
     title down: where the link is not shown the title is at the top, as it was before the link. */
  .page > .back-link + * {
    margin-top: 0;
  }

  @media (min-width: 1024px) {
    .back-link {
      display: inline-flex;
    }

    .page > .back-link + * {
      margin-top: var(--s-4);
    }
  }

  /* The dish page: a sheet-like page with the photo on top; a card in the middle of the page from 600px wide. */
  @media (min-width: 600px) {
    /*
     * It clips the photo to its round corners. "clip", not "hidden": a box that is overflow hidden is the scroll container of
     * what sticks inside it, and the foot of the dish would stick to the card (and cover the note) and not to the screen.
     */
    .dish-card {
      margin: var(--s-5) var(--s-4);
      overflow: hidden;
      overflow: clip;
      border-radius: var(--r-lg);
      background: var(--surface);
      box-shadow: var(--shadow-1);
    }

    .dish-card .dish-page__photo {
      max-height: 320px;
    }

    .dish-card > .page {
      padding: var(--s-5) var(--s-6) var(--s-6);
    }
  }

  .dish-page__photo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
  }

  /* Allergens of the dish, as a quiet row (or the allergy note, see .note). */
  .details {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.875rem;
  }

  .details .icon {
    margin-top: 0.1rem;
  }

  .dish-page__title {
    font-size: 1.5rem;
  }

  .dish-page__category {
    color: var(--muted);
    font-size: 0.875rem;
  }
}