/* =============================================================================

   14-clients.css — Client app section (#clients): pitch, features, preview

   Grid columns and mobile photo crop are in layout.css; desktop image at 1200px+.

   ============================================================================= */



/* ---------- Default — section shell ---------- */



.clients {

  background-color: var(--color-panel);

}



.clients__bg {

  background-color: var(--color-primary);

}



/* ---------- Default — text column ---------- */



.clients__data {

  min-width: 0;

}



.clients__subtitle {

  margin: 0 0 0.75rem;

  font-size: var(--text-small);

  font-weight: var(--weight-semibold);

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--color-accent-warm);

}



.clients .section__title,

.clients__description {

  color: var(--color-white);

}



.clients__description {

  margin: 0 0 1.5rem;

  color: hsla(0, 0%, 100%, 0.9);

  overflow-wrap: break-word;

}



/* Feature list with check icons */

.clients__list {

  display: grid;

  gap: 0.65rem;

  margin: 0 0 1.5rem;

  padding: 0;

  list-style: none;

  color: hsla(0, 0%, 100%, 0.92);

}



.clients__list li {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.clients__list i {

  flex-shrink: 0;

  color: var(--color-accent-warm);

  font-size: 1.15rem;

}



/* “Coming soon” status row */

.clients__status {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.75rem;

  margin: 0;

  font-size: var(--text-small);

  color: hsla(0, 0%, 100%, 0.8);

}



/* Badge pill — compact tier colours in 3-button.css */

.clients__badge {

  border-radius: 4rem;

  background-color: var(--color-cta-bg);

  color: var(--color-primary-dark);

}



/* ---------- Default — app preview ---------- */



.clients__media {

  min-width: 0;

  margin: 0;

}



.clients__media .section-photo {

  border-radius: 1rem;

}



/* ---------- Responsive — max-width 1199px ---------- */



@media (max-width: 1199px) {

  /* Preview above copy on stacked layouts */

  .clients__media {

    order: -1;

    width: 100%;

  }

}



/* ---------- Responsive — 1200px up ---------- */



@media (min-width: 1200px) {

  .clients__container {

    position: relative;

    --clients-col-gap: 2.5rem;

  }



  .clients__data {

    grid-column: 2;

    position: relative;

    z-index: 1;

    text-align: left;

  }



  .clients__data .section__title,

  .clients__description {

    text-align: left;

  }



  /* Absolute column — width from calc only (not width: 100%) */

  .clients__media {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    width: calc((100% - var(--clients-col-gap)) / 2);

    max-width: calc((100% - var(--clients-col-gap)) / 2);

    order: unset;

    margin: 0;

    overflow: hidden;

    border-radius: 1rem;

  }



  .clients__media .section-photo {

    display: block;

    width: 100%;

    height: 100%;

    max-width: none;

    min-height: 0;

    margin-inline: 0;

    aspect-ratio: unset;

    object-fit: cover;

    object-position: center top;

  }

}



/* ---------- Responsive — 1248px up ---------- */



@media (min-width: 1248px) {

  .clients__container {

    --clients-col-gap: 5rem;

  }

}