/**
 * @file
 * Video Ecosystem diagram (p_video_ecosystem).
 *
 * Reuses the legacy `.digital-e-s` / `.tool` layout + petal shape from
 * digital-ecosystem.css. This file only generalises the per-petal glow
 * colour: the legacy file keys it off term-id `data-color` rules, whereas
 * here each petal carries an inline `--petal-color` (set by
 * bootstrap_subtheme_preprocess_paragraph__p_video_ecosystem).
 *
 * Selector specificity (0,5,1) intentionally beats the legacy base rule
 * `.views-field-dia_users.views-field-custom-ecosystem-animation-field
 *  .field-content .tool::after` (0,4,1) so it wins regardless of CSS load
 * order. Wedge + curved-label colours are applied by js/video-ecosystem.js
 * from data-arc-color / data-arc-text-color.
 */

.ve-dia.views-field-dia_users.views-field-custom-ecosystem-animation-field .field-content .tool::after {
  background: linear-gradient(to top, rgba(220, 217, 240, 0) 0%, var(--petal-color, rgb(100, 236, 185)) 60%);
  opacity: 0.6;
  /* Exact Figma petal silhouette, flipped vertically (y → 136−y) and
     uniformly scaled ×1.125 (1:0.5 → 72×153 box) so logos and petals read
     "a notch larger" than the native Figma 64×136 — keeping all
     proportions identical, just bigger.
     Source: rendered "Ellipse 64" SVG behind each Brand petal (Figma node
     19075:23492). .tool is sized to match so the path drops in 1:1.
     Shape, top to bottom:
       y=0–42    rounded "bulb" head (widest at y≈42: x=0.13 → x=71.24)
       y=42–126  long, near-straight sides gently tapering inward
       y=126–153 oval foot rounding to a near-point at (35.67, 153) */
  clip-path: path('M 71.24 41.59 C 72.91 19.49 56.78 0.02 35.15 0 C 13.53 -0.02 -1.51 19.41 0.12 41.51 L 9.74 125.73 C 10.90 141.38 20.36 152.98 35.67 153 C 50.98 153.02 61.39 141.44 62.58 125.79 L 71.24 41.59 Z');
}

/* The video diagram is a single ring — no tab panes — so the petal field is
   always visible (the legacy `.tab-pane` opacity gating doesn't apply). */
.ve-dia .field-content {
  opacity: 1;
}

/* Petal shadow must hug the petal silhouette, not the .tool box. The legacy
   base rule (digital-ecosystem.css:536) casts box-shadow on .tool, but the
   petal shape is only a clip-path on ::after — so on these upsized 72×153
   petals the rectangular box's corners leak past the silhouette as dark
   angular notches at each petal head. Swap box-shadow → filter: drop-shadow,
   which is generated from the element's painted alpha (the clipped glow +
   logo) and therefore follows the petal outline. Scoped to .ve-dia so the
   legacy diagram keeps its box-shadow. Specificity (0,5,0) beats the base
   (0,3,0). */
.ve-dia.views-field-dia_users.views-field-custom-ecosystem-animation-field .field-content .tool {
  box-shadow: none;
  filter: drop-shadow(1px 1px 12px rgba(17, 18, 27, 0.95));
}

/* Scale the wheel (petals + wedges + curved labels) down 10% so it doesn't
   crowd the column edges. Center hub text lives outside .ve-dia and keeps
   its size. transform-origin:center keeps the ring centered on the hub. */
.ve-dia {
  transform: scale(0.9);
  transform-origin: center center;
}

/* Bigger petals than the legacy user-side diagram, to match Figma
   (node 18981-78733): ~63×135 petals with a 64px logo vs the legacy 30×99.
   Scoped to .ve-dia so the legacy diagram keeps its size. The logo follows
   automatically via its `width: calc(100% + 4px)` rule. Specificity (0,5,1)
   beats the legacy base rule (0,4,1). */
.ve-dia.views-field-dia_users.views-field-custom-ecosystem-animation-field .field-content .tool {
  /* Native Figma petal box scaled ×1.125 so logos + petals read a notch
     larger than the source while keeping every Figma proportion. The
     legacy logo rule width:calc(100% + 4px) auto-scales the logo to
     76×76 (was 68×68). */
  width: 72px;
  height: 153px;
  /* Reserve a safe writing column inside the petal body. The 92px logo
     (top:-15px) reaches y≈77; the rounded tip starts at y≈126. Padding
     of 80/28 keeps text fully inside the wide central body, so long
     names ("Amediateka", "Smotreshka", "Beeline TV") stop overflowing
     the narrow inner tip. justify-content:center then balances the text
     in that column instead of pinning it to one edge (legacy
     space-between pushed shorter labels to the tip end). */
  padding-top: 80px;
  padding-bottom: 28px;
  justify-content: center;
}

/* Platform label inside each petal. Legacy rule (digital-ecosystem.css)
   sets 7px on the .tool itself, which is too small for the upsized
   72×153 video-ecosystem petal — bump to 10px and shift to the muted
   white the Figma design uses for these labels. Scoped to .ve-dia so
   the legacy ecosystem diagram keeps its 7px sizing. */
.ve-dia.views-field-dia_users.views-field-custom-ecosystem-animation-field .field-content .tool__name {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.1;
}

/* Bigger logo for the upsized video-ecosystem petal. Legacy rule in
   digital-ecosystem.css emits 76×76 (calc(100% + 4px), top:-5px) tuned
   to the original 30×99 user-side petal — keeps that diagram unchanged.
   Here we want a 92×92 logo perched higher on the wider 72×153 petal so
   it visibly caps the rounded bulb. Specificity (0,5,2) beats the
   legacy single-class .tool__logo rule (0,1,0). */
.ve-dia.views-field-dia_users.views-field-custom-ecosystem-animation-field .field-content .tool .tool__logo {
  top: -15px;
  left: -5px;
  width: calc(100% + 10px);
}

/* Center-hub default (idle) text matches the petal hover state so the hub
   doesn't jump in size on hover. Sizes are the Figma scale (node 18981:78775,
   normalised so the Body-L title = 20px): title 20px / description 8px /
   "created by" 10px — same as .digital-e-s__tool-name (20px) +
   .digital-e-s__tool-descr (8px). Keyed off field-name classes (not
   nth-child): the three fields render as separate wrappers, each holding a
   single <p>, so every <p> is nth-child(1) and nth-child can't tell them
   apart. The block chain prefix beats the legacy 8px rule in
   digital-ecosystem.css:348 (0,6,4) without !important. */
.p-video-ecosystem .digital-e-s__placeholder {
  font-size: var(--BodyL);
}
.p-video-ecosystem.block-views-blockrussia-s-digital-ecosystem-block-1 .views-row .row > div:nth-child(2) > div > div:nth-child(1) .field--name-field-tekst-vnutri-diagrammy p {
  font-size: 8px;
  line-height: 10px;
}
.p-video-ecosystem.block-views-blockrussia-s-digital-ecosystem-block-1 .views-row .row > div:nth-child(2) > div > div:nth-child(1) .field--name-field-podpis-created-by p {
  font-size: 10px;
}

/* Mobile: the hub title ("Rutube") sits flush against the edge while the
   description/attribution paragraphs inherit a left indent from default
   `<p>` margins. Pad the whole placeholder so every line (title + body)
   shares the same 16px left/right gutter. */
@media (max-width: 767px) {
  .p-video-ecosystem .digital-e-s__placeholder {
    padding-inline: 16px;
  }

  /* Mobile accordion bars — tint each category's bar with its desktop
     wedge color. The PHP preprocess emits `--mtools-color` on .mtools__wr
     per category (purple/green/gold from _bootstrap_subtheme_video_
     ecosystem_colors). color-mix dilutes the petal hex to keep the legacy
     soft fade while saturating enough that purple / green / gold read as
     distinct against the dark section bg. */
  /* Specificity must beat the legacy alternating-color rules in
     responsive-main.css:2236–2240
     (`.views-field-dia_users .mtools__wr:nth-of-type(2n+1) .mtools__items`
     = (0,4,0) — 3 classes + 1 pseudo-class). My selector chains .ve-dia
     onto the same element as .views-field-dia_users for (0,5,0) so we win
     regardless of source order. Without this, every bar inherits the
     legacy green/purple 2n stripe pattern. */
  .p-video-ecosystem .views-field-dia_users.ve-dia .mtools__wr .mtools__items {
    background: linear-gradient(
      270deg,
      color-mix(in srgb, var(--mtools-color, #8271E1) 0%, transparent) -0.01%,
      color-mix(in srgb, var(--mtools-color, #8271E1) 85%, transparent) 99.99%
    );
  }
}