/**
 * Chamathka Cab Service - the areas-covered section.
 * Snippet: "CCS Areas Styles" | group: Areas Section | type: css | run_at: wp_head
 * CCS_AREAS_CSS_MARKER
 */

/* --- The photo mosaic ----------------------------------------------------- */
.ccs-areas__mosaic {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--wp--preset--spacing--70);
}

/* From 900px the four tiles become a mosaic: the first runs the full height
   down the left, and the two wide ones fill the remaining row. */
@media (min-width: 900px) {
  .ccs-areas__mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 210px 150px;
  }

  .ccs-areas__tile:first-child {
    grid-row: span 2;
  }

  .ccs-areas__tile:nth-child(2),
  .ccs-areas__tile:nth-child(4) {
    grid-column: span 2;
  }
}

.ccs-areas__tile {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--wp--custom--radius-md);
  background-color: var(--wp--preset--color--surface-muted);
}

.ccs-areas__tile img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  transition: transform var(--wp--custom--duration-slow) var(--wp--custom--ease-out);
}

.ccs-areas__tile:hover img {
  transform: scale(1.06);
}

.ccs-areas__tile figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--custom--scrim-card);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-semibold);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .ccs-areas__tile img {
    transition: none;
  }

  .ccs-areas__tile:hover img {
    transform: none;
  }
}

/* --- The two columns underneath ------------------------------------------- */
.ccs-areas__columns {
  display: grid;
  gap: var(--wp--preset--spacing--60) var(--wp--custom--grid-gap);
}

@media (min-width: 900px) {
  .ccs-areas__columns {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
}

.ccs-areas__columns-title {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight-bold);
  letter-spacing: var(--wp--custom--tracking-tight);
  line-height: var(--wp--custom--leading-heading);
  color: var(--wp--preset--color--contrast);
}

.ccs-areas__group + .ccs-areas__group {
  margin-top: var(--wp--preset--spacing--50);
}

.ccs-areas__group-title {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight-bold);
  letter-spacing: var(--wp--custom--tracking-wider);
  text-transform: uppercase;
  color: var(--wp--preset--color--subtle);
}

/* The chips are a list, so the browser announces how many areas there are. */
.ccs-areas__chips {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccs-areas__note {
  display: flex;
  gap: var(--wp--preset--spacing--20);
  align-items: flex-start;
  margin: var(--wp--preset--spacing--50) 0 0;
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  border: var(--wp--custom--border-hairline) dashed var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius-md);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-relaxed);
}

.ccs-areas__note .ccs-icon {
  margin-top: 3px;
  flex: none;
  color: var(--wp--preset--color--accent);
}