/* CCS_WHY_CSS_MARKER
   Chamathka Cab Service — why customers choose us.
   Snippet: "CCS Why Styles" | group: Why Section | type: css | run_at: wp_head

   A text column of reasons and a pull quote, beside a tall photo. The second,
   smaller photo overlaps the first, but only from 1080px up — below that it
   would sit on top of the text. */

/* --- The picture side ---------------------------------------------------- */
.ccs-why__media {
  position: relative;
}

.ccs-why__media-main {
  border-radius: var(--wp--custom--card-radius);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow-lg);
}

.ccs-why__media-main img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.ccs-why__media-inset {
  display: none;
}

@media (min-width: 1080px) {
  .ccs-why__media-inset {
    display: block;
    position: absolute;
    right: calc(var(--wp--preset--spacing--70) * -1);
    bottom: calc(var(--wp--preset--spacing--60) * -1);
    width: 46%;
    border: 6px solid var(--wp--preset--color--base);
    border-radius: var(--wp--custom--card-radius);
    overflow: hidden;
    box-shadow: var(--wp--custom--shadow-xl);
  }

  .ccs-why__media-inset img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

/* --- The reasons --------------------------------------------------------- */
.ccs-why__reasons {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  margin-block: var(--wp--preset--spacing--60);
}

@media (min-width: 560px) {
  .ccs-why__reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ccs-reason {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  align-content: start;
}

.ccs-reason__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--md);
  font-weight: var(--wp--custom--weight-semibold);
  letter-spacing: var(--wp--custom--tracking-tight);
  color: var(--wp--preset--color--contrast);
}

.ccs-reason__text {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--muted);
}

/* --- The pull quote ------------------------------------------------------ */
.ccs-why__quote {
  margin: 0;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50)
    var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
  border-left: var(--wp--custom--border-thick) solid var(--wp--preset--color--accent);
  background-color: var(--wp--preset--color--surface-muted);
  border-radius: 0 var(--wp--custom--radius-md) var(--wp--custom--radius-md) 0;
}

.ccs-why__quote p {
  margin: 0;
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight-medium);
  letter-spacing: var(--wp--custom--tracking-tight);
  color: var(--wp--preset--color--contrast);
}