/* Ported from MOCKUP lines 185-253 plus the .xb-bento / .xb-tile rules (lines 24-31, 77-79) */

.xcw-features__eyebrow {
  display: block;
  font-family: var(--xcw-heading-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--xcw-blue);
  margin-bottom: 14px;
  text-align: center;
}

.xcw-features__heading {
  font-size: clamp(26px, 3.4vw, 40px);
  margin: 0 0 12px;
  text-align: center;
}

.xcw-features__intro {
  text-align: center;
  color: var(--xcw-muted);
  font-size: 17px;
  margin: 0 auto 44px;
  max-width: 52ch;
}

/* ── Bento grid ──────────────────────────────────────────────────────────── */

.xcw-features__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .xcw-features__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1020px) {
  .xcw-features__grid--bento {
    grid-template-columns: 1.12fr 1fr 1fr;
    grid-template-areas:
      "feat one three"
      "feat four four";
  }
  .xcw-features__grid--bento .xcw-features__card--1 { grid-area: one; }
  .xcw-features__grid--bento .xcw-features__card--2 { grid-area: feat; }
  .xcw-features__grid--bento .xcw-features__card--3 { grid-area: three; }
  .xcw-features__grid--bento .xcw-features__card--4 { grid-area: four; }
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.xcw-features__card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: 0 14px 30px -18px rgba(11, 58, 73, .24), 0 1px 3px rgba(20, 41, 47, .05);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s;
}

.xcw-features__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 48px -22px rgba(11, 58, 73, .34), 0 3px 8px rgba(20, 41, 47, .07);
}

.xcw-features__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--xcw-sky);
  transition: background .22s;
}

.xcw-features__card:hover .xcw-features__bar { background: var(--xcw-deep); }

.xcw-features__icon {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--xcw-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 18px -8px rgba(17, 78, 98, .65);
}

.xcw-features__icon svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
}

.xcw-features__card h3 {
  font-size: 19px;
  line-height: 1.28;
  letter-spacing: -.01em;
  margin: 0 0 10px;
  text-wrap: balance;
}

.xcw-features__card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--xcw-muted);
  margin: 0;
  max-width: 42ch;
}

/* ── Appointment preview card (featured tile only) ───────────────────────── */

.xcw-features__preview {
  margin-top: auto;
  padding-top: 28px;
}

.xcw-features__preview-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 12px 26px -16px rgba(11, 58, 73, .4);
}

.xcw-features__preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.xcw-features__preview-label {
  font-family: var(--xcw-heading-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8C9BA1;
}

.xcw-features__preview-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E4F4EA;
  color: #1C7A47;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 5px 10px;
  border-radius: 999px;
}

.xcw-features__preview-status svg {
  width: 12px;
  height: 12px;
  stroke: #1C7A47;
}

.xcw-features__preview-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.xcw-features__preview-date {
  flex: none;
  width: 46px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E1EAEE;
  text-align: center;
}

.xcw-features__preview-day {
  background: var(--xcw-deep);
  color: #fff;
  font-family: var(--xcw-heading-font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 0;
}

.xcw-features__preview-num {
  font-family: var(--xcw-heading-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--xcw-text);
  padding: 4px 0 5px;
}

.xcw-features__preview-text { min-width: 0; }

.xcw-features__preview-title {
  font-family: var(--xcw-heading-font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--xcw-text);
  margin-bottom: 3px;
}

.xcw-features__preview-meta {
  font-size: 12.5px;
  color: var(--xcw-grey);
}

.xcw-features__preview-bars {
  display: flex;
  gap: 6px;
  margin-top: 16px;
}

.xcw-features__preview-bars span {
  flex: 1;
  height: 5px;
  border-radius: 99px;
}

.xcw-features__preview-bars span:nth-child(1) { background: var(--xcw-deep); }
.xcw-features__preview-bars span:nth-child(2) { background: var(--xcw-sky); }
.xcw-features__preview-bars span:nth-child(3) { background: #BEDCE7; }
.xcw-features__preview-bars span:nth-child(4) { background: #E1EAEE; }

/* ── Featured tile ───────────────────────────────────────────────────────── */
/* Driven by the per-row "Featured Card" switcher, not by repeater position, so
   reordering or deleting cards keeps the treatment on the right tile. The
   mockup styles this tile inline, so it applies at every width; only the grid
   placement further down is breakpoint- and card-count-dependent. */

.xcw-features__card--featured {
  background: linear-gradient(165deg, #F2F8FB 0%, #E9F3F8 100%);
  border-radius: 20px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 40px -20px rgba(11, 58, 73, .3), 0 1px 3px rgba(20, 41, 47, .05);
}

.xcw-features__card--featured .xcw-features__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin-bottom: 22px;
}

.xcw-features__card--featured .xcw-features__icon svg {
  width: 28px;
  height: 28px;
}

.xcw-features__card--featured h3 {
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 12px;
}

.xcw-features__card--featured p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--xcw-body);
  max-width: 44ch;
}

@media (min-width: 1020px) {
  /* Fourth tile spans two columns and lays the icon beside the text. */
  .xcw-features__grid--bento .xcw-features__card--4 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 28px;
    align-items: flex-start;
  }

  .xcw-features__grid--bento .xcw-features__card--4 .xcw-features__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  /* Pinned explicitly: with a blank icon there is no column-1 item, and
     auto-placement would otherwise drop the heading into column 1. */
  .xcw-features__grid--bento .xcw-features__card--4 h3 { grid-column: 2; grid-row: 1; }
  .xcw-features__grid--bento .xcw-features__card--4 p  { grid-column: 2; grid-row: 2; }

  .xcw-features__grid--bento .xcw-features__card--4 p { max-width: 52ch; }
}