/* ==========================================================================
   Cards block
   Text or image cards in 2/3 columns, optional grey background.
   Block-specific rules only – shared classes (.section, .container,
   .section-head, .panel, .link, typography) live in the base (site.css)
   and are assumed here.
   ========================================================================== */

/* Text card grid (3 columns) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card__link {
  margin: 16px 0 0;
}

/* Cards block with grey background: lift cards in white */
.section.panel .card.panel { background: var(--bg); }

/* Text card pair (2 columns) */
.card-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Image card grid (3 columns) */
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.media-card { background: #fff !important; }

.media-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.media-card__empty {
  background: var(--panel);
  aspect-ratio: 4/3;
}

.media-card__caption {
  margin-top: 0;
  padding: 0 20px;
  font-size: 1.125rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .card-grid { grid-template-columns: 1fr }
  .card-pair { grid-template-columns: 1fr }
  .media-grid { grid-template-columns: 1fr }
}


/* ==========================================================================
   Accordion block
   Expandable title/text pairs (<details>/<summary>).
   ========================================================================== */

.accordion {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.accordion__item {
  background: var(--panel);
  padding: 0
}

.accordion__summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.125rem;
}

.accordion__summary::-webkit-details-marker { display: none }

.accordion__content {
  padding: 0 20px 18px 20px;
  color: var(--muted)
}

.accordion__icon { font-weight: 700 }

/* Plus icon: rotates to × when opened */
.accordion__icon::before{
  content:"+";
  display:inline-block;
  width:1.2em;
  text-align:center;
  font-weight:700;
  line-height:1;
  transition: transform .28s ease;
}

.accordion__item[open] .accordion__icon::before{
  transform: rotate(45deg);
}

/* Smooth expand/collapse: modern browsers animate the details content box
   (::details-content with interpolate-size); older browsers open instantly as before. */
.accordion__item { interpolate-size: allow-keywords; }

.accordion__item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size .28s ease, content-visibility .28s allow-discrete;
}

.accordion__item[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .accordion__item::details-content,
  .accordion__icon::before { transition: none; }
}


/* ==========================================================================
   Image mosaic block
   Image grid (3 columns) with fixed 5:4 aspect ratio.
   ========================================================================== */

.mosaic {
  margin-top: 32px;
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mosaic__item{
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--panel);
  margin: 0;
}

.mosaic__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mosaic__empty {
  height: 520px;
  background: var(--panel)
}

@media (max-width: 900px){
  .mosaic { grid-template-columns: 1fr; padding: 0 16px }
}


/* ==========================================================================
   Team block
   Person cards with image, name badge and tags.
   Uses the base's shared .reveal system; only the team-specific stagger
   and reduced-motion rule live here.
   ========================================================================== */

.team__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}

.team,
.team .container,
.team .team__grid{
  overflow: visible !important;
}

.team .team__card,
.team .team__media{
  overflow: visible !important;
}

.team .team__media{
  position: relative;
  aspect-ratio: 5 / 4;
}

.team .team__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team__card:hover{
  transform: translateY(-2px);
}

.team .team__label,
.team .team__name{
  position:absolute;
  left: 18px;
  bottom: 0;
  transform: translateY(50%);
  z-index: 3;
  display:inline-block;
  background: var(--accent);
  color: var(--ink);
  padding: 10px 12px;
  font-family:"Space Grotesk", system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size: 1.25rem;
  line-height:1;
  white-space:nowrap;
}

.team__empty{
  width:100%;
  height:100%;
}

.team .team__body{
  padding: 14px 0 0 18px;
}

.team__text{ margin: 0; }

.team__tags{
  margin: 10px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.team__tag{
  display: inline-block;
  padding: 8px 10px;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--detail-fs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1;
}

.page-title + .team { padding-top: 24px; }

/* Stagger delay per position (CSP: no style-src 'unsafe-inline').
   nth-child(1) keeps the 0ms default from var(--d, 0ms). */
.js .team__grid > .reveal:nth-child(2){ --d: 60ms; }
.js .team__grid > .reveal:nth-child(3){ --d: 120ms; }
.js .team__grid > .reveal:nth-child(4){ --d: 180ms; }
.js .team__grid > .reveal:nth-child(5){ --d: 240ms; }
.js .team__grid > .reveal:nth-child(n+6){ --d: 280ms; }

@media (max-width: 900px){
  .team__grid{ grid-template-columns: 1fr; }
}

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


/* ==========================================================================
   Image-text block
   Three variants: feature-split (text + image side by side),
   offer (image with overlapping card row) and split-list (list + image).
   ========================================================================== */

/* Variant: Feature Split */
.feature-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  align-items: start;
}

.feature-split__tiles {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.media img {
  width: 100%;
  height: auto;
  display: block;
}

.media--empty {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variant: Offer Showcase */
.offer {
  padding-top: 24px;
}

.offer__media img {
  width: 100%;
  height: auto;
  display: block;
}

.offer__media-empty {
  width: 100%;
  height: 380px;
  background: var(--panel);
}

.offer__content {
  margin-top: -56px;
}

.offer__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.offer-card__meta {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: var(--detail-fs);
}

.offer__actions {
  margin-top: 18px;
  display: flex;
  gap: 18px;
  align-items: center;
}

/* Variant: Split List */
.split-list{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:24px;
  align-items: stretch;
}

.split-list__media{
  height: 100%;
  background: var(--panel);
  overflow:hidden;
}

.split-list__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.split-list__empty{
  height:100%;
  background:var(--panel);
}

.split-list__list {
  display: flex;
  flex-direction: column;
  gap: 16px
}

@media (max-width: 900px){
  .feature-split { grid-template-columns: 1fr }
  .offer__cards { grid-template-columns: 1fr }
  .offer__content { margin-top: 16px }
  .split-list{ grid-template-columns: 1fr; }
  .split-list__media,
  .split-list__empty{ height: 360px; }
}