/* ==========================================================================
   Lilo Socials — About page

   Stripped back to reuse the site's shared component vocabulary (the same
   .about-grid / .about-image / .section-head used on the homepage) rather
   than a bespoke "editorial" system — the About page should read as an
   extension of the homepage, not a different site.
   ========================================================================== */

/* ---------------------------------- Say hello ---------------------------------- */
.about-teaser--simple {
  position: relative;
  padding-block: var(--section-pad-y);
}

.about-teaser--simple h1 {
  font-size: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);
}

.about-teaser--simple h1 em {
  font-style: italic;
}

/* plain yellow text, not the shared .accent-sun highlight-marker treatment
   (its background block read as too heavy here) */
.about-teaser--simple h1 .accent-sun {
  font-style: italic;
  color: var(--brand-sand);
  background: none;
}

.about-copy {
  max-width: 52ch;
}

.about-copy .text-lead {
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.about-copy .text-lead + .text-lead {
  margin-top: var(--space-3);
}

/* Reference calls for one plain, uncropped-feeling photo — no rounded
   corners, no fixed small max-width — filling its column the way the rest
   of the homepage's photography doesn't (that's the homepage's look, this
   is deliberately plainer per the reference). Portrait ratio to match the
   photo being shot for this slot. */
.about-image--plain {
  max-width: none;
  box-shadow: none;
  aspect-ratio: 4 / 5;
}

/* Two-up variant: same plain/uncropped box, split into the same two team
   photos used on the homepage's Meet the Team section instead of one —
   overflow:hidden on .about-image clips both to the shared rounded rect,
   so the gap between them reads as a deliberate seam, not a missing image. */
.about-image--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* ---------------------------------- View Our Work carousel ---------------------------------- */
.work-carousel-section {
  position: relative;
  background: var(--bg-dark);
  padding-block: var(--section-pad-y);
  overflow: hidden;
}

.work-carousel-section .section-head h2,
.work-carousel-section .section-head .eyebrow {
  color: var(--text-inverse);
}

/* purple loses contrast on this dark navy background — sand is the same
   swap the homepage's own dark-photo hero already makes for .accent, and
   another place to lean into yellow more */
.work-carousel-section .accent {
  color: var(--brand-sand);
}

.work-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.work-carousel-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: max(var(--container-pad-x), calc((100vw - var(--container-max)) / 2 + var(--container-pad-x)));
  /* hide the native scrollbar — the arrow buttons are the intended control,
     dragging/swiping still works, it just isn't visually a scrollbar */
  scrollbar-width: none;
}

.work-carousel-track::-webkit-scrollbar {
  display: none;
}

.work-carousel-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(42vw, 300px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.work-carousel-card picture,
.work-carousel-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s var(--ease-premium);
}

.work-carousel-card:hover img {
  transform: scale(1.04);
}

.carousel-arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--cream-soft);
  color: var(--brand-ink);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-soft), transform var(--duration-fast) var(--ease-soft);
}

.carousel-arrow:hover {
  background: var(--brand-sand);
  transform: scale(1.05);
}

@media (max-width: 720px) {
  .carousel-arrow {
    display: none;
  }
  .work-carousel-track {
    padding-inline: var(--container-pad-x);
  }
  .work-carousel-card {
    width: min(60vw, 260px);
  }
}