/* ── Shared section header utilities ── */
.section-eyebrow {
  font-family: var(--theme-font-family);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--theme-mocha-deep);
  margin-bottom: 12px;
  display: block;
}

.section-heading {
  font-family: var(--theme-font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--theme-text);
  margin-bottom: 16px;
}

.section-heading .hl { color: var(--theme-primary); }

.section-sub {
  font-family: var(--theme-font-family);
  font-size: 15px;
  color: var(--theme-text-muted);
  margin-bottom: 0;
}

/* ── Section ── */
.occ-section { background: var(--theme-bg); }

/* ── Fix title position after PHP renderer moves [data-cs-title] into .t1-cs-header ──
   Renderer inserts .t1-cs-header right before the grid — use flex order to restore stacking. ── */
.occ-section .container {
  display: flex;
  flex-direction: column;
}

.occ-section .container .section-eyebrow  { order: 1; }
.occ-section .container .t1-cs-header     { order: 2; }
.occ-section .container .section-sub      { order: 3; }
.occ-section .container .t1-cs-scroll-area,
.occ-section .container .occ-grid,
.occ-section .container .occ-empty        { order: 4; }

.occ-section .section-eyebrow,
.occ-section .t1-cs-header,
.occ-section .section-sub {
  text-align: center;
}

.occ-section .t1-cs-header {
  display: block;
  margin: 0;
}

/* Renderer adds .t1-cs-title — keep same look as .section-heading */
.occ-section .section-heading,
.occ-section .t1-cs-title {
  font-family: var(--theme-font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--theme-text);
  margin: 0 0 16px;
}

/* ── Hide renderer-injected scroll arrows (grid layout) ── */
.occ-section .t1-cs-arrow,
.occ-section .t1-cs-arrows { display: none !important; }

.occ-section[data-cs-arrow-style="none"] .t1-cs-arrow,
.occ-section[data-cs-arrow-style="none"] .t1-cs-arrows { display: none !important; }

/* ── Scroll wrapper overrides for grid ── */
.occ-section .t1-cs-scroll-area {
  margin-top: 52px;
}

.occ-section .t1-cs-viewport {
  overflow: visible;
  padding: 0;
}

/* ── Grid ── */
.occ-grid,
.occ-section [data-cs-items-body],
.occ-section .t1-cs-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  overflow: visible;
  scroll-snap-type: none;
}

/* ── Card ── */
.occ-card {
  background: #ffffff;
  border: 1px solid rgba(74, 58, 48, 0.14);
  border-radius: 16px;
  padding: 30px 16px 27px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--theme-text);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

.occ-card:hover {
  transform: translateY(-5px);
  box-shadow: rgba(74, 58, 48, 0.45) 0px 18px 40px -24px !important;
  border-color: #b98d77 !important;
}

/* ── Icon circle ── */
.occ-card__circle {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fff9f2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: background 0.3s var(--ease);
  border: 1px solid #f7e9e4;
  color: #6f4f3a;
}

.occ-card:hover .occ-card__circle {
  background: #fcf3f0;
  border-color: #b98d77;
  color: #6f4f3a;
}

.occ-card__img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
}

/* ── Name ── */
.occ-card__name {
  font-family: var(--theme-font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--theme-text);
  text-align: center;
  line-height: 1.08;
}

/* ── Empty state ── */
.occ-empty {
  padding: 60px 24px;
  text-align: center;
}

.occ-empty__text {
  font-family: var(--theme-font-family);
  font-size: 15px;
  color: var(--theme-text-muted);
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .occ-grid,
  .occ-section [data-cs-items-body],
  .occ-section .t1-cs-track { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .occ-grid,
  .occ-section [data-cs-items-body],
  .occ-section .t1-cs-track { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .occ-card { padding: 22px 12px 18px; }
  .occ-card__circle { width: 84px; height: 84px; }
  .occ-card__img { width: 48px; height: 48px; }
}