/*
  The content inside the window: the welcome banner, the titled panels
  (Clients, Projects) and the client logo grid.
*/

.body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
  .body {
    grid-template-columns: 1fr;
  }
}

.content {
  display: grid;
  gap: 20px;
  min-width: 0;
  padding: 22px;
}

.welcome {
  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(255, 255, 255, 0.55) 0 4%,
      transparent 20%
    ),
    radial-gradient(
      ellipse 70% 60% at 100% 120%,
      rgba(143, 220, 74, 0.9),
      transparent 60%
    ),
    linear-gradient(115deg, #0a8fd0, #1fb5e0 55%, #3cc79a);
  border-radius: 20px;
  box-shadow:
    0 8px 24px rgba(0, 90, 140, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.welcome::before {
  background: linear-gradient(
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.05)
  );
  border-radius: 20px 20px 60% 60%/20px 20px 30px 30px;
  content: '';
  height: 50%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.welcome .in {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 26px;
  position: relative;
}

@media (max-width: 480px) {
  .welcome .in {
    grid-template-columns: 1fr;
  }
}

.avatar {
  background: radial-gradient(
    circle at 35% 26%,
    #fff 0 10%,
    #c8f59a 30%,
    var(--leaf) 65%,
    var(--leaf-dk)
  );
  border-radius: 50%;
  box-shadow:
    0 4px 14px rgba(0, 60, 0, 0.35),
    inset 0 -6px 10px rgba(0, 60, 0, 0.2),
    0 0 0 3px rgba(255, 255, 255, 0.7);
  color: #fff;
  display: grid;
  font: 600 28px var(--ui);
  height: 80px;
  place-items: center;
  text-shadow: 0 1px 2px rgba(0, 60, 0, 0.5);
  width: 80px;
}

.welcome h1 {
  font: 300 clamp(30px, 5.5vw, 46px)/1.05 var(--ui);
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0, 50, 90, 0.35);
  text-wrap: balance;
}

.welcome .role {
  font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 600;
  margin-top: 6px;
}

.welcome .loc {
  font-size: 13px;
  margin-top: 4px;
  opacity: 0.9;
}

.panel {
  background: linear-gradient(
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.55)
  );
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0, 80, 120, 0.1);
  /* The title pill hangs half its height above the panel. It is positioned, so
     it takes no space of its own - this margin keeps it from colliding with
     whatever sits above. A <legend> reserved this room by itself. */
  margin: 17px 0 0;
  min-width: 0;
  /* Clears the half of the pill that hangs inside the panel. */
  padding: 30px 18px 18px;
  position: relative;
}

/*
  The panel title is a glossy pill overlapping the panel's top edge.

  This was a <legend> in a <fieldset>, which sits on the border by itself. A
  <section> with an <h2> is the honest markup - these panels are not form groups
  - but a heading is an ordinary block, so the position has to be recreated.

  It is positioned rather than pulled up with a negative margin: as a grid item's
  child, a large negative margin stops moving it past a point, which made the
  offset impossible to dial in. Taking it out of flow gives an exact result, and
  the panel's top padding reserves the space it would have occupied.
*/
.panel > h2 {
  background: linear-gradient(#5fd0f5, var(--aqua) 50%, #0b93c8 51%, #28b2e0);
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 90, 140, 0.3);
  color: #fff;
  font: 600 18px var(--ui);
  left: 18px;
  margin: 0;
  padding: 5px 18px;
  position: absolute;
  text-shadow: 0 1px 1px rgba(0, 60, 100, 0.4);
  /* Half the pill's 34px height, plus the 1px border, so it straddles the
     panel's top edge the way the old <legend> did. */
  top: -18px;
}

p {
  margin: 0 0 0.6em;
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

.cols {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
  .cols {
    grid-template-columns: 1fr;
  }
}

.stack {
  align-content: start;
  display: grid;
  gap: 20px;
  min-width: 0;
}

.panel.clients {
  background: #fff;
}

.logos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.logo {
  background: none;
  border: 0;
  box-shadow: none;
  display: grid;
  height: 56px;
  padding: 8px 10px;
  place-items: center;
}

.logo img {
  max-height: 32px;
  max-width: 100%;
  object-fit: contain;
}