/* Landing-page system for full-bleed, marketing-style project pages
   (layouts/page/<name>.html). Shared by every such page; the per-page skin
   (colours, one-off components) lives in its own file, e.g. projects/vidimus.css.

   Convention: the page wrapper carries two classes -- the generic `lp`, which
   everything here is scoped under so it can't touch the projects index or any
   other page, plus a page modifier `lp--<name>` that the skin file targets.
   A page opts in by listing both stylesheets in its front matter (see
   _partials/head.html); landing.css is listed first so a skin's overrides win
   at equal specificity.

   The reusable .phone and .wordmark classes live in styles.css, since the home
   page uses them too. */

.lp {
  --lp-border: #e0e0e6;
}

.lp .lp-wrap {
  width: var(--width);
  margin: 0 auto;
}

/* Bands: full-bleed background, content centred by .lp-wrap. The horizontal
   gutters come from --width, so no horizontal padding here. Only the hero cell
   clips (see below); the bands stay visible so the phones' negative peek
   margins can pull neighbouring content up without being cut off. */
.lp .lp-band {
  padding: clamp(2.4rem, 5vw, 3.8rem) 0;
  overflow: visible;
}

.lp .lp-band--tint {
  background-image: var(--gradient-light);
}

.lp .lp-band--dark {
  background-image: var(--gradient-dark);
  background-size: var(--bg-dark-size);
  color: #fff;
}

.lp .lp-band--dark h1,
.lp .lp-band--dark h2 { color: #fff; }
.lp .lp-band--dark p { color: rgba(255, 255, 255, 0.9); }
.lp .lp-band--dark a { color: #fff; }

/* The hero ends on a hard line where the phone is clipped, so fade it out.
   `position: relative` is load-bearing: it makes the ::after's `width: 100%`
   resolve against the band instead of the initial containing block. */
.lp .lp-band:has(.lp-hero) {
  padding-bottom: 0;
  position: relative;

  &::after {
    content: "";
    height: 1rem;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    position: absolute;
    margin-top: -1rem;
  }
}

/* Hero */
.lp .lp-hero {
  align-items: center;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);

  & > div {
    padding-bottom: clamp(2.4rem, 5vw, 3.8rem);
  }

  /* Clip window: the phone is out of flow, so this cell contributes no height
     of its own -- the row height comes from the text column, and whatever of
     the phone sticks out below is cut. */
  div:has(.phone) {
    align-self: stretch;
    overflow: hidden;
    position: relative;
  }

  .phone {
    --phone-w: min(100%, 30rem);

    left: 0;
    position: absolute;
    top: 0;
  }
}

.lp div:has(.lp-logo) {
  text-align: center;
}

.lp .lp-logo {
  width: clamp(8rem, 30vw, 24rem);
  margin-bottom: 0.5rem;
  filter: drop-shadow(0px 0px 8rem rgba(255, 255, 255, 0.75));
}

.lp .lp-title {
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1;
  margin: 0;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}

.lp .lp-tagline {
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  margin: 0.3rem 0 0.9rem;
}

.lp .lp-shot .phone {
  --phone-w: 20rem;
}

/* Points: a short list where each item leads with its claim. */
.lp .lp-points {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
}

.lp .lp-points li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.9rem;
  font-weight: 325;
}

.lp .lp-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: var(--primary-color);
}

.lp .lp-points strong {
  color: var(--primary-color);
}

/* Feature rows. --left places the phone on the left (text on the right);
   the default places it on the right. */
.lp .lp-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.lp .lp-feature--left .lp-txt { order: 2; }
.lp .lp-feature--left .lp-shot { order: 1; }

.lp .lp-feature h2 {
  margin-top: 0;
  text-align: left;
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.lp .lp-center {
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin: 0 0 1.6rem;
}

/* Features grid */
.lp .lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.lp .lp-card {
  border: 1px solid var(--lp-border);
  border-radius: 0.7rem;
  padding: 1.2rem 1.2rem 1.3rem;
}

/* Brand-tinted circle behind the card icon. color-mix keeps the tint tracking
   --primary-color, so a skin that changes the accent gets a matching tint for
   free. */
.lp .lp-ico {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  margin-bottom: 0.8rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
}

.lp .lp-card h3 {
  margin: 0 0 0.3rem;
  text-align: left;
  font-size: 1.15rem;
  font-weight: 500;
}

.lp .lp-card p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 325;
}

/* Credit row: phone on the side, text beside it. */
.lp .lp-credit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: 50rem;
  margin: 0 auto;
}

.lp .lp-credit h2 {
  margin-top: 0;
  text-align: left;
}

.lp .lp-credit .phone {
  --phone-w: 20rem;
}

@media (max-width: 720px) {
  .lp .lp-hero,
  .lp .lp-feature,
  .lp .lp-credit {
    grid-template-columns: 1fr;
  }

  .lp {
    .lp-hero {
      align-items: center;

      .lp-title,
      .lp-tagline,
      .lp-tagline + p {
        text-align: center;
      }

      .lp-logo {
        filter: drop-shadow(0px 0px 5rem rgba(255, 255, 255, 1));
      }
    }
  }

  /* Stacked on mobile a full device is too tall, so phones are cropped with the
     --phone-cut-* peek vars rather than by resizing their box, which would
     rescale the frame background away from the screenshot inside it. A skin can
     tune the per-shot cuts (see the vidimus skin for how). */
  .lp .lp-hero {
    & > div {
      padding-bottom: 0;
    }

    div:has(.phone) {
      padding-bottom: 18rem;
    }

    .phone {
      --phone-w: min(80vw, 30rem);
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .lp .lp-shot .phone,
  .lp .lp-credit .phone {
    --phone-w: min(70vw, 15rem);
    --phone-cut-bottom: 12rem;
  }

  .lp .lp-band:has(.phone:last-child) {
    padding-bottom: 0;
  }

  /* Cards are centred on mobile: the icon is a fixed-size grid box, so it needs
     auto inline margins rather than text-align. */
  .lp .lp-ico {
    margin-inline: auto;
  }

  .lp .lp-card {
    text-align: center;
  }

  .lp .lp-card h3 {
    text-align: center;
  }

  .lp .lp-feature--left .lp-txt,
  .lp .lp-feature--left .lp-shot {
    order: 0;
  }
}