/* ==========================================================================
   Media and text — five fixed compositions.

   Column placement is set here, not exposed to the editor. Editors choose a
   composition; they cannot assemble one. That is the difference between an
   art-directed system and a page builder.
   ========================================================================== */

.ccg-mediatext--sunken  { background: var(--surface-sunken); }
.ccg-mediatext--tinted  { background: var(--surface-tint); }
.ccg-mediatext--inverse { background: var(--surface-inverse); }

.ccg-mediatext__canvas { row-gap: var(--space-6); }

.ccg-mediatext__copy { align-self: center; }
.ccg-mediatext__heading { margin-block-end: var(--space-4); }
.ccg-mediatext__prose { color: var(--ink-muted); }
.ccg-mediatext__copy .ccg-index { margin-block-end: var(--space-4); }

.ccg-mediatext__media {
  margin: 0;
  overflow: hidden;
  background: var(--tint-brand-08);
}

.ccg-mediatext--inverse .ccg-mediatext__media,
.ccg-mediatext__canvas--overlay .ccg-mediatext__media,
.ccg-mediatext__canvas--panel .ccg-mediatext__media,
.ccg-mediatext__canvas--panel_reverse .ccg-mediatext__media {
  background: var(--surface-inverse);
}

.ccg-mediatext__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, center);
  display: block;
}

/* --- 1. Editorial --------------------------------------------------------
   Text holds the grid, image escapes the right edge. The asymmetry is the
   point: nothing about this composition is centered or mirrored. */
.ccg-mediatext__canvas--editorial .ccg-mediatext__copy {
  grid-row: 1;
  grid-column: col-start 1 / span 5;
}
.ccg-mediatext__canvas--editorial .ccg-mediatext__media {
  grid-row: 1;
  grid-column: col-start 7 / full-end;
  min-height: 26rem;
}

/* --- 2. Editorial reversed ---------------------------------------------- */
.ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__media {
  grid-row: 1;
  grid-column: full-start / col-start 7;
  min-height: 26rem;
}
.ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__copy {
  grid-row: 1;
  grid-column: col-start 8 / span 5;
}

/* --- 3. Offset -----------------------------------------------------------
   Quieter. Asymmetry from indentation rather than bleed, so a page can use
   this between two loud sections without competing. */
.ccg-mediatext__canvas--offset .ccg-mediatext__copy {
  grid-row: 1;
  grid-column: col-start 2 / span 5;
}
.ccg-mediatext__canvas--offset .ccg-mediatext__media {
  grid-row: 1;
  grid-column: col-start 8 / span 5;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
}

/* --- 4. Balanced ---------------------------------------------------------
   The restrained option. Kept deliberately — a page of nothing but expressive
   compositions is as monotonous as a page of nothing but centered columns. */
.ccg-mediatext__canvas--balanced .ccg-mediatext__copy {
  grid-row: 1;
  grid-column: col-start 1 / span 6;
}
.ccg-mediatext__canvas--balanced .ccg-mediatext__media {
  grid-row: 1;
  grid-column: col-start 8 / span 5;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
}

/* --- 5. Diagonal ---------------------------------------------------------
   Full-height photo bleeds to the right edge. Its single clipped edge makes
   one straight diagonal against the inverse surface; all copy stays on navy. */
.ccg-mediatext__canvas--diagonal { row-gap: 0; }

.ccg-mediatext:has(.ccg-mediatext__canvas--diagonal) {
  padding-block: 0;
}

.ccg-mediatext__canvas--diagonal .ccg-mediatext__media {
  grid-row: 1;
  grid-column: col-start 7 / full-end;
  min-height: clamp(30rem, 38vw, 42rem);
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 0;
}

.ccg-mediatext__canvas--diagonal .ccg-mediatext__copy {
  grid-row: 1;
  grid-column: col-start 1 / span 6;
  align-self: center;
  padding-block: var(--section-space);
  padding-inline-end: var(--space-7);
}

.ccg-mediatext__canvas--diagonal .ccg-mediatext__points {
  counter-reset: ccg-product-index;
  gap: 0;
  margin-block-start: var(--space-5);
}

.ccg-mediatext__canvas--diagonal .ccg-mediatext__points li {
  counter-increment: ccg-product-index;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-block-start: 1px solid var(--surface-on-dark);
}

.ccg-mediatext__canvas--diagonal .ccg-mediatext__points li::before {
  content: counter(ccg-product-index, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* --- 5b. Diagonal reversed ----------------------------------------------
   The same frame, flipped: image enters from the left, text sits on the right.
   Paired with Diagonal on the neighboring Home feature, both stories share
   one inverse field while their photo cuts move in opposite directions. */
.ccg-mediatext__canvas--diagonal_reverse { row-gap: 0; }
.ccg-mediatext:has(.ccg-mediatext__canvas--diagonal_reverse) { padding-block: 0; }
.ccg-mediatext__canvas--diagonal_reverse .ccg-mediatext__media {
  grid-row: 1;
  grid-column: full-start / col-start 7;
  min-height: clamp(30rem, 38vw, 42rem);
  clip-path: polygon(0 0, 84% 0, 100% 100%, 0 100%);
  border-radius: 0;
}
.ccg-mediatext__canvas--diagonal_reverse .ccg-mediatext__copy {
  grid-row: 1;
  grid-column: col-start 8 / span 5;
  align-self: center;
  padding-block: var(--section-space);
  padding-inline-start: var(--space-7);
}
.ccg-mediatext__canvas--diagonal_reverse .ccg-mediatext__points {
  counter-reset: ccg-product-index;
  gap: 0;
  margin-block-start: var(--space-5);
}
.ccg-mediatext__canvas--diagonal_reverse .ccg-mediatext__points li {
  counter-increment: ccg-product-index;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-block-start: 1px solid var(--surface-on-dark);
}
.ccg-mediatext__canvas--diagonal_reverse .ccg-mediatext__points li::before {
  content: counter(ccg-product-index, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
  .ccg-mediatext__canvas--diagonal_reverse .ccg-mediatext__media { clip-path: none; }
  .ccg-mediatext__canvas--diagonal_reverse .ccg-mediatext__copy {
    padding-block: 0;
    padding-inline-start: 0;
  }
  .ccg-mediatext:has(.ccg-mediatext__canvas--diagonal_reverse) {
    padding-block: var(--section-tight);
  }
}

/* --- 6. Overlay ----------------------------------------------------------
   Immersive. Image is the canvas, text sits on it behind a scrim. */
.ccg-mediatext__canvas--overlay { row-gap: 0; }

.ccg-mediatext__canvas--overlay .ccg-mediatext__media {
  grid-row: 1;
  grid-column: full-start / full-end;
  width: 100%;
  min-height: 34rem;
  position: relative;
}
.ccg-mediatext__canvas--overlay .ccg-mediatext__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--scrim), var(--scrim-soft) 62%, transparent);
}
.ccg-mediatext__canvas--overlay .ccg-mediatext__copy {
  grid-row: 1;
  grid-column: col-start 1 / span 6;
  z-index: 1;
  padding-block: var(--overlay-pad, var(--section-space));
}

/* Overlay with no image would render an empty scrim, so give it the brand
   gradient instead of nothing. */
.ccg-mediatext__canvas--overlay:not(:has(.ccg-mediatext__media)) {
  background: linear-gradient(135deg, var(--brand-strong), var(--brand) 70%);
}

/* --- 7. Panel ------------------------------------------------------------
   Same idea as Overlay — image is the whole canvas — but the copy floats
   on it as a bounded card instead of sitting on a full-height scrim. Card
   sits left by default; the reversed variant puts it on the right. */
.ccg-mediatext__canvas--panel,
.ccg-mediatext__canvas--panel_reverse { row-gap: 0; }

.ccg-mediatext__canvas--panel .ccg-mediatext__media,
.ccg-mediatext__canvas--panel_reverse .ccg-mediatext__media {
  grid-row: 1;
  grid-column: full-start / full-end;
  width: 100%;
  /* A floor for a short card, not a fixed height — the card's own margin
     (below) is what actually sets the image height for real content. */
  min-height: 26rem;
}

.ccg-mediatext__canvas--panel .ccg-mediatext__copy,
.ccg-mediatext__canvas--panel_reverse .ccg-mediatext__copy {
  grid-row: 1;
  align-self: center;
  z-index: 1;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-3);
  /* Clearance from the top and bottom of the photo. Same mechanism as
     Overlay's --overlay-pad, driven by the same rhythm field, below. */
  margin-block: var(--panel-pad, var(--section-space));
}

/* Card width — three fixed options. Left variant grows from the left edge;
   right variant grows from the right edge, so the card stays flush to
   whichever edge it's floating toward as it widens. */
.ccg-mediatext__canvas--panel .ccg-panel-card--width-narrow   { grid-column: col-start 1 / span 4; }
.ccg-mediatext__canvas--panel .ccg-panel-card--width-standard { grid-column: col-start 1 / span 5; }
.ccg-mediatext__canvas--panel .ccg-panel-card--width-wide     { grid-column: col-start 1 / span 6; }

.ccg-mediatext__canvas--panel_reverse .ccg-panel-card--width-narrow   { grid-column: col-start 9 / span 4; }
.ccg-mediatext__canvas--panel_reverse .ccg-panel-card--width-standard { grid-column: col-start 8 / span 5; }
.ccg-mediatext__canvas--panel_reverse .ccg-panel-card--width-wide     { grid-column: col-start 7 / span 6; }

/* Card fill — same Plain/Sunken/Tinted/Dark vocabulary as Card grid and
   CTA band, so a "dark" card here matches a "dark" card everywhere else. */
.ccg-panel-card--plain  { background: var(--surface); }
.ccg-panel-card--sunken { background: var(--surface-sunken); }
.ccg-panel-card--tinted { background: var(--surface-tint); }
.ccg-panel-card--dark   { background: var(--surface-inverse); }

/* Panel with no image falls back to the brand gradient, same as Overlay. */
.ccg-mediatext__canvas--panel:not(:has(.ccg-mediatext__media)),
.ccg-mediatext__canvas--panel_reverse:not(:has(.ccg-mediatext__media)) {
  background: linear-gradient(135deg, var(--brand-strong), var(--brand) 70%);
}

/* Panel bleeds edge to edge like Overlay, so it gets the same outer-padding
   treatment — see the "Overlay rhythm" note below for why this is zeroed
   here and restored at mobile widths. */
.ccg-mediatext:has(.ccg-mediatext__canvas--panel),
.ccg-mediatext:has(.ccg-mediatext__canvas--panel_reverse) {
  padding-block: 0;
}

/* --- Panel vertical spacing ------------------------------------------------
   Same rhythm field, same four choices, same reasoning as Overlay's
   --overlay-pad: the image is full-bleed, so there's no "outside the
   canvas" for breathing room to live. Here it sets the card's own
   margin-block instead of the image's padding, since the card — not the
   full image height — is what needs clearance from the frame. */
.ccg-rhythm--tight .ccg-mediatext__canvas--panel .ccg-mediatext__copy,
.ccg-rhythm--tight .ccg-mediatext__canvas--panel_reverse .ccg-mediatext__copy {
  --panel-pad: var(--section-tight);
}
.ccg-rhythm--base .ccg-mediatext__canvas--panel .ccg-mediatext__copy,
.ccg-rhythm--base .ccg-mediatext__canvas--panel_reverse .ccg-mediatext__copy {
  --panel-pad: var(--section-space);
}
.ccg-rhythm--loose .ccg-mediatext__canvas--panel .ccg-mediatext__copy,
.ccg-rhythm--loose .ccg-mediatext__canvas--panel_reverse .ccg-mediatext__copy {
  --panel-pad: var(--section-loose);
}
.ccg-rhythm--vast .ccg-mediatext__canvas--panel .ccg-mediatext__copy,
.ccg-rhythm--vast .ccg-mediatext__canvas--panel_reverse .ccg-mediatext__copy {
  --panel-pad: var(--section-vast);
}

/* --- No image ------------------------------------------------------------
   Every composition falls back to a single readable measure rather than
   leaving the copy stranded in a half-width column. */
.ccg-mediatext__canvas:not(:has(.ccg-mediatext__media)) .ccg-mediatext__copy {
  grid-column: col-start 1 / span 7;
}
.ccg-mediatext__canvas--offset:not(:has(.ccg-mediatext__media)) .ccg-mediatext__copy {
  grid-column: col-start 2 / span 7;
}

/* --- Bullets -------------------------------------------------------------
   Checkmark drawn in CSS so it inherits the accent token and needs no icon. */
.ccg-mediatext__points {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.ccg-mediatext__points li {
  position: relative;
  margin: 0;
  padding-inline-start: var(--space-6);
}
.ccg-mediatext__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  width: 0.5rem;
  height: 0.85rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

/* --- Collapse ------------------------------------------------------------
   Asymmetry needs width. Below this it becomes noise, so every composition
   returns to a single column with a contained image. */
@media (max-width: 1023px) {
  .ccg-mediatext__canvas .ccg-mediatext__copy,
  .ccg-mediatext__canvas .ccg-mediatext__media {
    grid-column: content;
    grid-row: auto;
  }
  .ccg-mediatext__canvas .ccg-mediatext__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-card);
    order: -1;
  }
  .ccg-mediatext__canvas--overlay .ccg-mediatext__media { order: 0; }
  .ccg-mediatext__canvas--overlay .ccg-mediatext__copy { padding-block: 0; }
  .ccg-mediatext__canvas--overlay .ccg-mediatext__media::after { display: none; }
  .ccg-mediatext__canvas--overlay { row-gap: var(--space-6); }

  /* Panel: card drops below the now-contained image and no longer needs
     to float, so it just becomes a normal card in the flow. Width and
     rhythm-driven margin were both about floating clearance, which no
     longer applies once the card is a stacked block. */
  .ccg-mediatext__canvas--panel .ccg-mediatext__copy,
  .ccg-mediatext__canvas--panel_reverse .ccg-mediatext__copy {
    align-self: start;
    margin-block: 0;
  }
  .ccg-mediatext:has(.ccg-mediatext__canvas--panel),
  .ccg-mediatext:has(.ccg-mediatext__canvas--panel_reverse) {
    padding-block: var(--section-tight);
  }

  .ccg-mediatext__canvas--diagonal .ccg-mediatext__media {
    clip-path: none;
  }
  .ccg-mediatext__canvas--diagonal .ccg-mediatext__copy {
    padding-block: 0;
    padding-inline-end: 0;
  }
  .ccg-mediatext:has(.ccg-mediatext__canvas--diagonal) {
    padding-block: var(--section-tight);
  }
}

/* Overlay always sits on a dark section. The scrim is removed at mobile
   widths, so without this the inverted text would be white on white. */
.ccg-mediatext:has(.ccg-mediatext__canvas--overlay) {
  background: var(--surface-inverse);
}

/* --- Overlay rhythm ------------------------------------------------------
   Every other composition puts its vertical space outside the canvas, where
   it reads as breathing room around the content. Overlay cannot: the image is
   the full width of the section and sits in the same row as the copy, so outer
   padding renders as a band of --surface-inverse above and below the
   photograph rather than as space around it.

   So overlay zeroes the outer padding and spends the same rhythm on the inside
   of the copy column instead, which is also what determines the height of the
   image. Same field, same four choices, and now the choice does what its label
   promises. */
.ccg-mediatext:has(.ccg-mediatext__canvas--overlay) { padding-block: 0; }

.ccg-rhythm--tight .ccg-mediatext__canvas--overlay .ccg-mediatext__copy { --overlay-pad: var(--section-tight); }
.ccg-rhythm--base  .ccg-mediatext__canvas--overlay .ccg-mediatext__copy { --overlay-pad: var(--section-space); }
.ccg-rhythm--loose .ccg-mediatext__canvas--overlay .ccg-mediatext__copy { --overlay-pad: var(--section-loose); }
.ccg-rhythm--vast  .ccg-mediatext__canvas--overlay .ccg-mediatext__copy { --overlay-pad: var(--section-vast); }

/* The image no longer needs a floor of its own — the copy padding sets the
   height. Kept as a minimum so a short heading still yields a usable image. */
.ccg-mediatext__canvas--overlay .ccg-mediatext__media { min-height: 26rem; }

/* Below the collapse point the image stacks above the copy and the scrim is
   gone, so the copy needs its own padding again — but a loose or vast setting
   chosen for a wide screen is far too much on a phone. Declared after the
   rhythm rules above, which are more specific than the collapse block and
   would otherwise reintroduce desktop padding at mobile widths. */
@media (max-width: 1023px) {
  .ccg-rhythm--tight .ccg-mediatext__canvas--overlay .ccg-mediatext__copy,
  .ccg-rhythm--base  .ccg-mediatext__canvas--overlay .ccg-mediatext__copy,
  .ccg-rhythm--loose .ccg-mediatext__canvas--overlay .ccg-mediatext__copy,
  .ccg-rhythm--vast  .ccg-mediatext__canvas--overlay .ccg-mediatext__copy {
    --overlay-pad: 0;
  }
  .ccg-mediatext:has(.ccg-mediatext__canvas--overlay) {
    padding-block: var(--section-tight);
  }
}

/* Same reasoning as .ccg-btn-row in components.css: an unpopulated points
   repeater emits an empty <ul> carrying its own top margin. */
.ccg-mediatext__points:not(:has(li)) { display: none; }
/* Home manufacturing chapter — keep both story images contained and measured.
   The theme compositions set the frame; this rule prevents portrait source
   dimensions from expanding either story or overflowing the mobile grid. */
#home-manufacturing .ccg-mediatext__media,
#home-components .ccg-mediatext__media {
  min-height: 0;
}

#home-manufacturing .ccg-mediatext__media img,
#home-components .ccg-mediatext__media img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  #home-manufacturing .ccg-mediatext__media {
    min-height: clamp(28rem, 34vw, 36rem);
  }
  #home-components .ccg-mediatext__media {
    aspect-ratio: 16 / 10;
    align-self: center;
  }
}


/* Home story pair — matching type scale and restrained scroll-linked image
   drift make the opposite diagonals read as one continuous chapter. */
#home-manufacturing .ccg-mediatext__heading,
#home-components .ccg-mediatext__heading {
  max-width: 14ch;
  font-size: var(--step-3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

@keyframes ccg-home-media-drift {
  from { transform: scale(1.06) translateY(-2%); }
  to   { transform: scale(1.06) translateY(2%); }
}

@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    #home-manufacturing .ccg-mediatext__media img,
    #home-components .ccg-mediatext__media img {
      animation: ccg-home-media-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* The existing reversed editorial option supplies the mirrored grid for the
   Home pair. Shape only this saved Home instance as the opposite diagonal. */
#home-components { padding-block: 0; }
#home-components .ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__media {
  min-height: clamp(30rem, 38vw, 42rem);
  clip-path: polygon(0 0, 84% 0, 100% 100%, 0 100%);
  border-radius: 0;
}
#home-components .ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__copy {
  padding-block: var(--section-space);
  padding-inline-start: var(--space-7);
}
#home-components .ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__points {
  counter-reset: ccg-product-index;
  gap: 0;
  margin-block-start: var(--space-5);
}
#home-components .ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__points li {
  counter-increment: ccg-product-index;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
  border-block-start: 1px solid var(--surface-on-dark);
}
#home-components .ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__points li::before {
  content: counter(ccg-product-index, decimal-leading-zero);
  position: static;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1023px) {
  #home-components { padding-block: var(--section-tight); }
  #home-components .ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__media { clip-path: none; }
  #home-components .ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__copy {
    padding-block: 0;
    padding-inline-start: 0;
  }
}

/* Keep both Home story images at one shared desktop scale. The portrait source
   files should crop into this frame instead of determining the section height. */
@media (min-width: 1024px) {
  #home-manufacturing .ccg-mediatext__media,
  #home-components .ccg-mediatext__media {
    height: clamp(24rem, 30vw, 32rem);
    min-height: 0;
    align-self: center;
  }
}

@media (min-width: 1024px) {
  #home-components .ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__media {
    height: clamp(24rem, 30vw, 32rem);
    min-height: 0;
  }
}

/* Home story pair: reduce the desktop copy bands and align both image frames
   with their story opening so the longer second feature does not feel detached. */
@media (min-width: 1024px) {
  #home-manufacturing .ccg-mediatext__copy,
  #home-components .ccg-mediatext__copy {
    padding-block: var(--section-tight);
  }
  #home-manufacturing .ccg-mediatext__media,
  #home-components .ccg-mediatext__media {
    align-self: start;
    margin-block-start: var(--section-tight);
  }
}

/* The reversed Home composition has a more specific copy rule; keep its
   desktop rhythm matched to the first manufacturing story. */
@media (min-width: 1024px) {
  #home-components .ccg-mediatext__canvas--editorial_reverse .ccg-mediatext__copy {
    padding-block: var(--section-tight);
  }
}


/* Overlay imagery fills the full Home story canvas; the shared Home image rhythm
   should not offset or shorten this background composition. */
@media (min-width: 1024px) {
  #home-components .ccg-mediatext__canvas--overlay .ccg-mediatext__media {
    height: auto;
    min-height: 34rem;
    align-self: stretch;
    margin-block: 0;
  }
}