/* K Group Capital Partners — Stanza / native-block layer.
   main.css is the flat-file stylesheet, verbatim. This file maps the
   flat-file structures onto the native block DOM:
   - composer blocks wrap their InnerBlocks in an extra div → display:contents
     (so descendant selectors only, never child combinators);
   - editorial / statement / contact sections are FLAT (heading + paragraphs,
     no wrapper divs) — spacing that the flat-file put on wrappers moves to
     margins here;
   - stanza/media renders a <figure> that carries the section class, with a
     bare <img>/<video> inside;
   - team and news cards are the stanza/post-template items (<a> on the front
     end, a <div> preview in the editor — hence the :not() on the wrapper rule). */

/* ---------- Composer wrappers ---------- */

[class*="wp-block-stanza-composer-"] > div:first-child {
  display: contents;
}

/* ---------- stanza/media figures ---------- */

figure.wp-block-stanza-media {
  margin: 0;
  width: 100%;
  overflow: hidden;
}

figure.wp-block-stanza-media > img,
figure.wp-block-stanza-media > video,
figure.wp-block-stanza-media > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aspect ratios the plugin doesn't ship (from stanza.json options) */
figure.has-1920-800-aspect-ratio   { aspect-ratio: 1920 / 800; }
figure.has-1920-992-aspect-ratio   { aspect-ratio: 1920 / 992; }
figure.has-1920-804-aspect-ratio   { aspect-ratio: 1920 / 804; }
figure.has-1912-984-aspect-ratio   { aspect-ratio: 1912 / 984; }
figure.has-1912-796-aspect-ratio   { aspect-ratio: 1912 / 796; }
figure.has-1500-1300-aspect-ratio  { aspect-ratio: 1500 / 1300; }
figure.has-1598-400-aspect-ratio   { aspect-ratio: 1598 / 400; }
figure.has-4-5-aspect-ratio        { aspect-ratio: 4 / 5; }
figure.has-2400-450-aspect-ratio   { aspect-ratio: 2400 / 450; }

.tint-media {
  position: relative;
}

/* ---------- Hero: figure.hero__media fills the pinned section ---------- */

.hero figure.hero__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: auto;
}

.hero--page figure.hero__media {
  top: var(--header-h);
}

/* Landing hero: the "Scroll" cue is chrome, drawn by CSS */
.hero--landing::after {
  content: "Scroll";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--gutter);
  padding-bottom: 50px;
  text-align: center;
  color: var(--bg);
  font-family: var(--font-classic);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: url("../site/scroll-cue.svg") center bottom / 25px 40px no-repeat;
  pointer-events: none;
}

/* ---------- Editorial: flat heading + paragraphs ---------- */

.editorial {
  row-gap: 0;
}

.editorial .wp-block-heading {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-s);
  text-align: center;
  font-family: var(--font-fit);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1;
}

.editorial p {
  grid-column: 4 / span 6;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.25;
  text-align: justify;
}

.editorial p.editorial__lead {
  font-size: var(--fs-lead);
  line-height: 1.143;
  margin-bottom: 60px;
}

.editorial p:not(.editorial__lead) + p {
  margin-top: 1.25em;
}

/* ---------- Statement ---------- */

.statement p {
  margin: 0;
}

/* ---------- Full-width media ---------- */

.full-media figure.wp-block-stanza-media.has-unset-aspect-ratio,
.full-media figure.wp-block-stanza-media:not([class*="-aspect-ratio"]) {
  aspect-ratio: 1920 / 800;
}

/* ---------- Media on the grid ---------- */

.media-center figure.wp-block-stanza-media,
.media-center .anim {
  grid-column: 4 / span 6;
}

.media-center figure.wp-block-stanza-media.has-unset-aspect-ratio,
.media-center .anim {
  aspect-ratio: 1500 / 1300;
}

.media-center--wide figure.wp-block-stanza-media,
.media-center--wide .anim {
  grid-column: 2 / span 10;
}

.media-center--wide figure.wp-block-stanza-media.has-unset-aspect-ratio,
.media-center--wide .anim {
  aspect-ratio: 1598 / 400;
}

.media-center .anim {
  height: auto;
}

/* ---------- Banner ---------- */

.banner figure.banner__media,
.banner figure.wp-block-stanza-media {
  height: 100%;
}

.banner .anim {
  width: 100%;
  height: 100%;
}

/* ---------- Load more (core/button) ---------- */

.load-more .wp-block-buttons,
.load-more .wp-block-button {
  margin: 0;
}

.load-more .wp-block-button__link {
  border: 1px solid var(--ink);
  border-radius: 90px;
  padding: 20px 60px;
  background: none;
  color: var(--ink);
  font-family: var(--font-classic);
  font-size: var(--fs-date);
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* ---------- Contact details: flat heading + paragraph pairs ---------- */

.contact-info {
  gap: 0;
}

.contact-info .wp-block-heading {
  margin: 0 0 20px;
  font-family: var(--font-classic);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.contact-info p {
  margin: 0 0 40px;
  font-size: var(--fs-title);
  line-height: 1.1667;
}

.contact-info p:last-child {
  margin-bottom: 0;
}

/* ---------- Collections: stanza/archive + post-template ---------- */

.team-grid .wp-block-stanza-archive,
.team-grid .wp-block-stanza-archive > div:not(.block-editor-block-preview__live-content),
.team-grid .wp-block-stanza-archive__inner,
.news-grid .wp-block-stanza-archive,
.news-grid .wp-block-stanza-archive > div:not(.block-editor-block-preview__live-content),
.news-grid .wp-block-stanza-archive__inner {
  display: contents;
}

/* Team card = the post-template item (an <a> wrapping the whole card; photo-less
   members fall back to the placeholder art) */
.team-grid .wp-block-stanza-post {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 795 / 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--gutter);
  color: var(--white);
  background: var(--ink) url("../site/team-placeholder.svg") center / cover no-repeat;
}

.team-grid .wp-block-stanza-post:nth-of-type(odd) { grid-column: 3 / span 4; }
.team-grid .wp-block-stanza-post:nth-of-type(even) { grid-column: 7 / span 4; }

.team-grid .wp-block-stanza-post p {
  margin: 0;
}

.team-grid figure.team-card__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  aspect-ratio: auto;
}

.team-grid figure.team-card__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(31, 0, 35, 0) 53%, rgba(31, 0, 35, 0.75) 100%);
}

.team-grid figure.team-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--slate);
  mix-blend-mode: color;
}

.team-grid .team-card__name,
.team-grid .team-card__name a {
  margin: 0;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-fit);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.143;
}

/* News card = the post-template item (an <a> wrapping the whole card) carrying its item's classes (news-card news-card--size
   news-bg-* news-text-* [news-shade]) via the post-template's htmlAttrs. */
.news-grid .wp-block-stanza-post p {
  margin: 0;
}

.news-grid .news-card__title,
.news-grid .news-card__title a {
  margin: 0;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-fit);
  font-weight: 400;
}

.news-grid .news-card__title a {
  display: block;
}

.news-grid .news-visual {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.news-grid .news-visual--logo {
  inset: auto;
  left: 26%;
  top: 31.5%;
  width: 47.5%;
}

.news-grid .news-visual--logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ---------- Article body (single-news.php uses the_content) ---------- */

.article__body p {
  margin: 0;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .editorial .wp-block-heading,
  .editorial p,
  .media-center figure.wp-block-stanza-media,
  .media-center .anim,
  .media-center--wide figure.wp-block-stanza-media,
  .media-center--wide .anim,
  .team-grid .wp-block-stanza-post:nth-of-type(odd),
  .team-grid .wp-block-stanza-post:nth-of-type(even) {
    grid-column: 1 / -1;
  }
}
