/* Design: bento. Loaded on /designs/bento (shell.sql `design` param), and
   as the base for every bento-* design (shell.sql `base` param), after
   app.css. Scoped by [data-variant^="bento"] ("starts with bento") on
   .profile and .projects; page-wide colours via body:has(...).
   Colour → --tblr-* vars; sizes, radii, shadows, type → Open Props.
   Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors */

/* The shade band's angle and edge are typed custom properties, so
   bento-* designs can vary them per tile and animate them on hover
   (an untyped custom property can't transition).
   Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/@property */
@property --bento-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 160deg;
}
@property --bento-stop {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 62%;
}

/* bento: brute × toon × mint. Everything is a tile in a bento grid on a
   mint page: ink borders and hard shadows (brute), cel-shaded pastel
   fills and shine (toon), rounded corners and Fredoka (mint/toon). */
body:has(.profile[data-variant^="bento"]) {
  /* --green-9 is #2b8a3e → 43, 138, 62 */
  --tblr-primary: var(--green-9);
  --tblr-primary-rgb: 43, 138, 62;
  --tblr-body-bg: var(--green-0);
  --tblr-body-color: var(--green-12);
  --tblr-border-color: var(--green-12); /* ink */
  --tblr-bg-surface: var(--tblr-white);
  --tblr-secondary: var(--green-11);
  --tblr-green: var(--green-2);
  --tblr-teal: var(--teal-2);
  --tblr-lime: var(--lime-2);
  --tblr-yellow: var(--yellow-2);
  font-family: 'Fredoka', var(--font-sans);
}
:is(.profile, .projects)[data-variant^="bento"] {
  --bento-ink: calc(var(--border-size-1) * 3);
  --bento-shadow: var(--size-1) var(--size-1) 0 var(--tblr-border-color);
  --bento-shadow-lift: var(--size-2) var(--size-2) 0 var(--tblr-border-color);

  max-width: 48rem;

  /* Tiles: cel fill from --bento-base (set per tile), ink, hard shadow. */
  & :is(.profile-intro, .profile-link, .projects-item) {
    --bento-base: var(--tblr-bg-surface);

    position: relative;
    border: var(--bento-ink) solid var(--tblr-border-color);
    border-radius: var(--radius-3);
    background: linear-gradient(
      var(--bento-angle),
      var(--bento-base) 0 var(--bento-stop),
      color-mix(in oklab, var(--bento-base) 82%, var(--tblr-border-color)) var(--bento-stop) 100%
    );
    box-shadow: var(--bento-shadow);
  }
  & :is(.profile-link, .projects-item) {
    transition:
      transform .25s var(--ease-spring-3),
      box-shadow .15s var(--ease-out-3);

    &::before {
      content: '';
      position: absolute;
      inset-block-start: var(--size-1);
      inset-inline-start: var(--size-3);
      inline-size: var(--size-6);
      block-size: var(--size-1);
      border-radius: var(--radius-round);
      background: color-mix(in srgb, var(--tblr-white) 85%, transparent);
      rotate: -4deg;
    }
    &:hover,
    &:focus-visible {
      transform: translate(calc(-1 * var(--size-1)), calc(-1 * var(--size-1)));
      border-color: var(--tblr-border-color);
      box-shadow: var(--bento-shadow-lift);
    }
    &:active {
      transform: none;
      box-shadow: 0 0 0 var(--tblr-border-color);
    }
  }
  & :is(.profile-link-icon, .projects-item-icon) {
    border: var(--border-size-2) solid var(--tblr-border-color);
    border-radius: var(--radius-round);
    background: var(--tblr-bg-surface);
    color: var(--tblr-border-color);
  }
}
/* Profile: a 4-column grid. Row 1 is the avatar and intro; the link list
   joins the same columns via subgrid, so links are tiles in the grid.
   Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid */
.profile[data-variant^="bento"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--size-3);
  padding-block-start: var(--size-7);
  text-align: start;

  & .profile-avatar {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    border: var(--bento-ink) solid var(--tblr-border-color);
    border-radius: var(--radius-3);
    box-shadow: var(--bento-shadow);
  }
  & .profile-intro {
    --bento-base: var(--tblr-yellow);

    display: flex;
    grid-column: span 3;
    flex-direction: column;
    justify-content: center;
    padding: var(--size-4) var(--size-5);
  }
  & .profile-name {
    margin: 0;
    font-size: var(--font-size-6);
    font-weight: var(--font-weight-7);
    line-height: var(--font-lineheight-00);
  }
  & .profile-tagline {
    max-width: none;
    margin: var(--size-2) 0 0;
    color: var(--tblr-body-color);
  }
  & .profile-location {
    align-self: start;
    border: var(--border-size-2) solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
  }
  & .profile-links {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: var(--size-3);
    margin: 0;
  }
  /* 5 links on 4 columns: 2+1+1, then 2+2. */
  & li:nth-child(1),
  & li:nth-child(4),
  & li:nth-child(5) { grid-column: span 2; }
  & .profile-link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-3);
    block-size: 100%;
    min-block-size: var(--size-11);
    padding: var(--size-4);
    font-weight: var(--font-weight-6);
  }
  & li:nth-child(4n + 1) .profile-link { --bento-base: var(--tblr-green); }
  & li:nth-child(4n + 2) .profile-link { --bento-base: var(--tblr-teal); }
  & li:nth-child(4n + 3) .profile-link { --bento-base: var(--tblr-lime); }
  & li:nth-child(4n + 4) .profile-link { --bento-base: var(--tblr-yellow); }
  & .profile-link-text {
    flex: none;
    inline-size: 100%;
  }
  & .profile-link-text small { color: var(--tblr-secondary); }
  & .profile-link-arrow {
    position: absolute;
    inset-block-start: var(--size-3);
    inset-inline-end: var(--size-3);
  }
  & .profile-link-arrow,
  & .profile-link:hover .profile-link-arrow { color: var(--tblr-border-color); }
}
/* Projects: 3 columns, alternating wide tiles: [2][1] / [1][2]. */
.projects[data-variant^="bento"] {
  & .projects-title {
    color: var(--tblr-body-color);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-7);
    letter-spacing: normal;
    text-transform: none;
  }
  & .projects-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--size-3);
  }
  & .projects-item {
    min-block-size: var(--size-12);

    &:nth-child(4n + 1),
    &:nth-child(4n + 4) { grid-column: span 2; }
    &:nth-child(4n + 1) { --bento-base: var(--tblr-lime); }
    &:nth-child(4n + 2) { --bento-base: var(--tblr-green); }
    &:nth-child(4n + 3) { --bento-base: var(--tblr-yellow); }
    &:nth-child(4n + 4) { --bento-base: var(--tblr-teal); }
  }
  & .projects-item-name { font-size: var(--font-size-4); }
  & .projects-item-blurb { color: var(--tblr-body-color); }
  & .projects-item-host { font-weight: var(--font-weight-6); }
}

/* Phones: 2 columns for the profile, 1 for projects. */
@media (max-width: 40rem) {
  .profile[data-variant^="bento"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    /* Too narrow for photo and intro side by side: the photo becomes a
       wide banner tile, the intro a full-width tile under it. */
    & .profile-avatar {
      grid-column: span 2;
      aspect-ratio: 2 / 1;
      object-position: 50% 30%;
    }
    & .profile-intro { grid-column: span 2; }
    & .profile-name { font-size: var(--font-size-5); }
    & li:nth-child(n) { grid-column: span 1; }
    & li:nth-child(1) { grid-column: span 2; }
  }
  .projects[data-variant^="bento"] {
    & .projects-grid { grid-template-columns: minmax(0, 1fr); }
    & .projects-item:nth-child(n) { grid-column: auto; }
  }
}