/* Collection formatting v1 — scoped to Collection; outer Prozon has no frame. */
.pz-collection{width:100%;min-width:0;box-sizing:border-box;container-type:inline-size;background:var(--color-prozon-bg,transparent);border:0}
.pz-collection__header{margin-bottom:1rem}
.pz-collection__header h2{margin:.25rem 0}
.pz-collection__grid{display:grid;grid-template-columns:repeat(var(--collection-columns,3),minmax(0,1fr));gap:var(--collection-gap,1rem);align-items:stretch}
.pz-collection__card{min-width:0;box-sizing:border-box;display:flex;flex-direction:column;padding:var(--collection-card-padding,1rem);border:1px solid var(--color-card-border,currentColor);border-radius:var(--radius-card,8px);background:var(--color-card-bg,transparent);color:var(--color-text,inherit);overflow:hidden}
.pz-collection[data-card-shadow="1"] .pz-collection__card:not([data-card-style="transparent"]){box-shadow:0 4px 14px rgba(0,0,0,.16)}
.pz-collection__panel{min-width:0;flex:1;display:flex;flex-direction:column;gap:.65rem}
.pz-collection__media{min-width:0}
.pz-collection__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;max-width:100%}
.pz-collection__copy{min-width:0;overflow-wrap:anywhere;white-space:normal}
.pz-collection__copy h3{margin:0 0 .4rem;font:inherit;font-weight:700;font-size:1.15em}
.pz-collection__copy p{margin:.3rem 0;line-height:1.5}
.pz-collection__copy a{display:inline-block;margin-top:.5rem;color:inherit;text-decoration:underline}
.pz-collection__card[data-text-align="center"] .pz-collection__copy{text-align:center}
.pz-collection__card[data-text-align="right"] .pz-collection__copy{text-align:right}
.pz-collection__card[data-image-placement="bottom"] .pz-collection__media{order:2}
.pz-collection__card[data-image-placement="left"] .pz-collection__panel,.pz-collection__card[data-image-placement="right"] .pz-collection__panel{flex-direction:row;align-items:center}
.pz-collection__card[data-image-placement="right"] .pz-collection__media{order:2}
.pz-collection__card[data-image-placement="left"] .pz-collection__media,.pz-collection__card[data-image-placement="right"] .pz-collection__media{flex:0 0 42%;max-width:42%}
.pz-collection__card[data-image-placement="left"] .pz-collection__copy,.pz-collection__card[data-image-placement="right"] .pz-collection__copy{flex:1}
.pz-collection__card[data-card-style="double"]{padding:var(--collection-card-padding,1rem)}
.pz-collection__card[data-card-style="double"] .pz-collection__panel{padding:var(--collection-card-padding,1rem);background:var(--color-panel-bg,var(--color-card-bg,transparent));color:var(--color-text,inherit);border-radius:var(--radius-card,8px)}

@container (max-width:720px){.pz-collection__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:480px){.pz-collection__grid{grid-template-columns:minmax(0,1fr)}}
@container (max-width:360px){.pz-collection__card[data-image-placement="left"] .pz-collection__panel,.pz-collection__card[data-image-placement="right"] .pz-collection__panel{flex-direction:column}.pz-collection__card[data-image-placement="left"] .pz-collection__media,.pz-collection__card[data-image-placement="right"] .pz-collection__media{max-width:100%;width:100%}}

/* Transparency is a local Collection setting; all actual colors come from sitewide tokens. */
.pz-collection[data-collection-transparent="1"]{background:transparent}
.pz-collection__header h2{color:var(--color-title,inherit)}
.pz-collection__header p{color:var(--color-eyebrow,inherit)}


/* Collection framed-card layout: all three cards occupy equal grid columns.
   Colors and rounding remain controlled by the sitewide controllers. */
.pz-collection__grid{grid-template-columns:repeat(var(--collection-columns,3),minmax(0,1fr));align-items:stretch}
.pz-collection__card,
.pz-collection__card[data-card-style="transparent"]{
  width:100%;height:100%;min-width:0;align-self:stretch;
  padding:clamp(7px,1.2cqi,12px);
  border:1px solid var(--color-card-border,currentColor);
  border-radius:var(--radius-card,8px);
  background:var(--color-page-bg,transparent);
  box-shadow:var(--shadow-card,0 2px 7px #0002);
  overflow:hidden;
}
.pz-collection__card .pz-collection__panel{
  flex:1;min-height:100%;padding:clamp(10px,1.5cqi,20px);
  border-radius:var(--radius-card,8px);
  background:var(--color-panel-bg,var(--color-card-bg,transparent));
  color:var(--color-text,inherit);
  display:flex;flex-direction:column;align-items:stretch;
}
.pz-collection__card[data-card-style="single"]{background:var(--color-card-bg,transparent);color:var(--color-text,inherit)}
.pz-collection__card[data-card-style="single"] .pz-collection__panel{padding:0;background:transparent;border-radius:0}
.pz-collection__card .pz-collection__copy{min-width:0;text-align:inherit}
.pz-collection__card .pz-collection__copy h3{
  font-family:var(--font-title,inherit);font-size:var(--size-subtitle,1.2rem);
  font-weight:700;line-height:1.25;margin:0 0 .35rem;
}
.pz-collection__card .pz-collection__subheader{
  font-family:var(--font-body,inherit);font-size:var(--size-body,1rem);
  font-weight:400;line-height:1.4;margin:0;
}
.pz-collection__card .pz-collection__media img{width:100%;max-width:100%;object-fit:contain}
.pz-collection__card[data-text-align="center"] .pz-collection__copy{text-align:center}
.pz-collection__card[data-text-align="right"] .pz-collection__copy{text-align:right}
@container (max-width:720px){.pz-collection__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:480px){.pz-collection__grid{grid-template-columns:minmax(0,1fr)}}

/*
 * Collection card palette parity with Photo Gallery.
 * Photo Gallery outer frame uses --color-prozon-bg and its main card uses
 * --color-card-bg. Reuse those exact sitewide tokens for EVERY Collection card.
 * No per-card hex values or independent color controls.
 */
.pz-collection .pz-collection__card,
.pz-collection .pz-collection__card[data-card-style="single"],
.pz-collection .pz-collection__card[data-card-style="double"],
.pz-collection .pz-collection__card[data-card-style="transparent"] {
  background: var(--color-prozon-bg, transparent);
  border: 1px solid var(--color-card-border, currentColor);
  border-radius: var(--radius-card, 8px);
  color: var(--color-text, inherit);
  padding: clamp(7px, 1.2cqi, 12px);
  box-shadow: var(--shadow-card, none);
}
.pz-collection .pz-collection__card .pz-collection__panel,
.pz-collection .pz-collection__card[data-card-style="single"] .pz-collection__panel,
.pz-collection .pz-collection__card[data-card-style="double"] .pz-collection__panel,
.pz-collection .pz-collection__card[data-card-style="transparent"] .pz-collection__panel {
  background: var(--color-card-bg, transparent);
  color: var(--color-text, inherit);
  border-radius: var(--radius-card, 8px);
  padding: var(--collection-card-padding, 1rem);
  min-height: 100%;
}
.pz-collection .pz-collection__card .pz-collection__copy h3 {
  color: var(--color-title, inherit);
}
.pz-collection .pz-collection__card .pz-collection__subheader {
  color: var(--color-text, inherit);
}
.pz-collection .pz-collection__card .pz-collection__copy a {
  color: var(--color-link, inherit);
}

/* Optional Collection subtitle uses sitewide typography and colors. */
.pz-collection__subtitle{margin:.35rem 0 0;color:var(--color-subtitle,var(--color-text,inherit));font-family:var(--font-subtitle,var(--font-body,inherit));font-size:var(--size-subtitle,1.2rem);line-height:1.4}

/* Mobile: keep desktop layout unchanged, stack Collection cards on phones.
   Container queries use the Collection's actual available width, including
   narrower editor/published Prozon placements. Placed last to override
   earlier desktop grid declarations. */
@container (max-width: 600px) {
  .pz-collection__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pz-collection__card {
    min-width: 0;
    max-width: 100%;
    height: auto;
  }
  .pz-collection__card .pz-collection__panel {
    min-width: 0;
  }
  .pz-collection__media img {
    max-width: 100%;
    height: auto;
  }
}
/* Fallback for browsers without CSS container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 600px) {
    .pz-collection .pz-collection__grid { grid-template-columns: minmax(0, 1fr); }
  }
}

/* Responsive Collection: reduce the center gutter as the available width shrinks.
   Keep the existing desktop gap unchanged above 1100px. */
@container (max-width: 1100px) {
  .pz-collection__grid {
    column-gap: min(var(--collection-gap, 1rem), clamp(0.5rem, 2cqi, 1rem));
  }
}
/* Switch to a single full-width card before two-column text gets too tall.
   This must follow the older 480/600/720px rules. */
@container (max-width: 750px) {
  .pz-collection__grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .pz-collection__card { min-width: 0; max-width: 100%; height: auto; }
  .pz-collection__card .pz-collection__panel { min-width: 0; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 750px) {
    .pz-collection .pz-collection__grid { grid-template-columns: minmax(0, 1fr); }
  }
}

/* Keep row and column gutters equal at every Collection width.
   Override the earlier column-only responsive calculation. */
.pz-collection .pz-collection__grid {
  gap: var(--collection-gap, 1rem);
}
@container (max-width: 1100px) {
  .pz-collection .pz-collection__grid {
    gap: min(var(--collection-gap, 1rem), clamp(0.5rem, 2cqi, 1rem));
  }
}
@container (max-width: 750px) {
  .pz-collection .pz-collection__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}