/* #inside section (app/views/home/_inside.html.erb). */
/*
 * Ingredients (left) and the nutrition card (right) in .pl-split, which stacks
 * them at ≤900px. Padding and scroll-margin come from .pl-section, the h2 type
 * from .pl-h2; values are the design's inline styles.
 */
@layer sections {
  .inside {
    background: var(--pl-green-100);
  }

  /* Left column: title, ingredients, allergen line */
  .inside__intro {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.4vw, 28px);
  }

  .inside__ingredients {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .inside__label {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pl-muted);
  }

  .inside__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .inside__chip {
    padding: 8px 15px;
    border-radius: var(--pl-r-chip);
    background: var(--pl-paper);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
  }

  /* Allergens: black chips, matching the dot of the allergen line. */
  .inside__chip--allergen {
    background: var(--pl-ink);
    color: var(--pl-paper);
  }

  .inside__chip strong {
    font-weight: inherit;
  }

  .inside__allergens {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
  }

  .inside__allergens::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: var(--pl-r-pill);
    background: var(--pl-ink);
  }

  /* Right column: nutrition card */
  .inside__card {
    min-width: 0;
    padding: clamp(22px, 2.8vw, 34px);
    border-radius: var(--pl-r-card);
    background: var(--pl-paper);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .inside__card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
  }

  .inside__card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
  }

  .inside__per {
    margin: 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--pl-muted);
  }

  .inside__energy {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
  }

  .inside__kcal {
    font-size: clamp(52px, 5.6vw, 72px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .inside__kcal-unit {
    font-size: 22px;
    font-weight: 800;
  }

  .inside__kj {
    font-size: 16px;
    font-weight: 500;
    color: var(--pl-muted);
  }

  /* Fact rows: label left, value right, hairline between rows. */
  .inside__facts {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .inside__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid var(--pl-line-dark);
  }

  .inside__fact:last-child {
    padding-bottom: 0;
  }

  .inside__fact dt {
    flex: none;
    font-size: 16px;
    color: var(--pl-muted);
  }

  /* Long values (storage, cooking) wrap to the right of their label. */
  .inside__fact dd {
    min-width: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    text-align: right;
    text-wrap: balance;
  }

  /* Phones: the cooking line goes under its label instead of a narrow column. */
  @media (max-width: 480px) {
    .inside__fact--stack {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    .inside__fact--stack dd {
      text-align: left;
    }
  }
}