/* ------------------------------------------------------------------
   Product information section — ONE component.

   Two properties vary independently in the Figma file, and the file uses
   all four combinations, so they are separate classes here:

     side         .psec--media-left | .psec--media-right
                  which column the copy sits in (836px or 60px)
     arrangement  .psec--hero | .psec--tall
                  a 696x406 lead photo with two tiles beneath it, or a
                  316x617 tall photo beside two stacked 361x299 cells

   Example: Sensors section 2 (Figma 180:4694) is media-right + hero,
   section 4 (180:4899) is media-right + tall.

   Everything that differs per band — the exact y of the check list, the
   title width, where the protocol row starts — is passed in as a custom
   property by build/build.py, straight out of the Figma node, so no band
   is approximated by a shared model.

   Source frames are 1512x741 on #ECF1F5.
   ------------------------------------------------------------------ */

.psec {
  --psec-chip-y:   89px;
  --psec-title-y:  148px;
  --psec-title-w:  584px;
  --psec-list-y:   278px;
  --psec-proto-y:  650.8px;
  --psec-proto-x:  2px;
  --psec-media-x:  60px;

  /* Figma's frames are 1512 wide and say nothing about a wider window. The
     band's background stays full bleed, but its 1512 column is centred in it,
     which is what the Homepage already does with its own bands. Without this
     the absolutely placed content stayed pinned at x=60 and the section read
     as shoved to the left on any monitor wider than the design width. */
  --psec-origin: max(0px, (100% - 1512px) / 2);

  position: relative;
  height: 741px;
  background: var(--page);
  overflow: hidden;
}

.psec--media-left  { --psec-copy-x: 836px; }
.psec--media-right { --psec-copy-x: 60px; }

/* ---------------------------------------------------------- copy column */
.psec__copy {
  position: absolute;
  left: calc(var(--psec-origin) + var(--psec-copy-x));
  top: 0;
  height: 100%;
}

/* pill label — Figma "span": h37, radius 999, #4594D1, Inter 700 17/13 */
.psec__chip {
  position: absolute;
  top: var(--psec-chip-y);
  left: var(--psec-chip-x, 0px);
  height: 37px;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--white);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 13px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* award badge — position and size both come from the Figma node, because a
   band can carry more than one and they are not the same shape: Sensors
   section 2 has PC Mag's 112x56 banner next to BobVila's 83x83 seal. */
.psec__award {
  position: absolute;
  top: var(--psec-award-y, 79px);
  left: var(--psec-award-x, 227px);
  width: var(--psec-award-w, 112px);
  height: var(--psec-award-h, 56px);
}

/* An image Figma lays on top of a photo slot rather than inside it: the
   Motion Sensor cut-out over its blue plate. The slot is the containing
   block, and the offsets are per-cent of it, so the pair stay together once
   the fixed 361x299 box becomes a grid cell below the design width.

   The slot is also a query container, because the cut-out's drop shadow is
   written in cqw for the same reason: a shadow in pixels would keep its
   design-width size while the artwork under it halved on a phone. A browser
   without container units drops the filter and draws the cut-out flat, which
   is what it looked like before the shadow was carried across at all. */
.psec__media > *:has(.psec__overlay),
.psec__media > *:has(.ucbadge) { container-type: inline-size; }
.psec__overlay { position: absolute; border-radius: 0; }

/* Masked vector artwork over a photo -- the waves radiating from the Motion
   Sensor. A Figma mask cannot be rebuilt in CSS, so the group is exported as
   one SVG and placed in per-cent of the photo, like the cut-outs. */
.psec__decal { position: absolute; z-index: 2; pointer-events: none; }

/* --------------------------------------------------------- notification pill
   The component is .ucbadge in home.css, which every page already loads: Figma
   draws the Motion Sensor's badge from the identical "Frame 3731" the homepage
   use-case cards use, same two gradients, same 3.475 white stroke, same
   per-line type sizes. Nothing about it is redefined here. What is added is
   the two things a product photo needs and a fixed-size homepage card does
   not: a position that holds as the tile resizes, and a size that does.

   Figma writes every measurement in pixels and never redraws the pill smaller
   -- where it puts this component on a 390 frame at all it stays 204x45 -- but
   it does so over a 344-wide photo, and the Sensors collage gives it 167 at
   the same width. So each metric is an em of one driver font-size, and build.py
   sets that driver to min(<Figma px>, <the same length as a per-cent of the
   slot>): Figma's own size at the design width, a true miniature below it, and
   never larger than drawn. One value scales the whole pill, so the pill cannot
   drift out of proportion with itself. */
.ucbadge--fit {
  font-size: var(--badge-fs);
  width: auto;
  z-index: 3;
}
.ucbadge--fit .ucbadge__icon img { width: 100%; height: 100%; }

/* one line, Figma group "Notification": squarer corners, a thin dark rule
   inside the edge instead of the white halo, and larger regular text */
.ucbadge--note {
  height: 2.9318em;
  border-radius: 0.3448em;
  padding: 0 1.0734em;
  gap: 0.7183em;
  background: linear-gradient(90deg, #3ea8ff 0%, #0070e7 100%);
  box-shadow: inset 0 0 0 0.069em #1929ba;
}
.ucbadge--note .ucbadge__icon { width: 1.6205em; height: 1.3106em; }
.ucbadge--note .ucbadge__l1 {
  font-weight: 400;
  font-size: 1em;
  line-height: 1.0348em;
  letter-spacing: 0.05em;
}

/* two lines, Figma frame "Frame 3731": the homepage pill, restated in em so
   the driver above can shrink it. The px values it mirrors are in home.css. */
.ucbadge--chip {
  height: 3.7003em;
  border-radius: 0.632em;
  padding: 0.1915em 0.1915em 0.1915em 0.6703em;
  gap: 1.2334em;
  box-shadow: 0 0 0 0.2857em rgba(255, 255, 255, 0.3);
}
.ucbadge--chip .ucbadge__icon { width: 2.6246em; height: 2.6246em; }
.ucbadge--chip .ucbadge__l1 { font-size: 1em;      line-height: 1.35em; letter-spacing: -0.01151em; }
.ucbadge--chip .ucbadge__l2 { font-size: 0.9474em; line-height: 1.35em; }

.psec__title {
  position: absolute;
  top: var(--psec-title-y);
  left: 0;
  width: var(--psec-title-w);
  font-weight: 700;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  color: var(--ink);
}

/* check list — Figma "Frame 2601": 428 wide, 12px gaps, 18px icons, 10px gap */
.psec__list {
  position: absolute;
  top: var(--psec-list-y);
  left: 0;
  width: 428px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.psec__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: var(--copy);
  line-height: var(--copy-lh);
  color: var(--body);
}
.psec__list img { width: 18px; height: 18px; flex: 0 0 auto; }

/* protocol row — icon groups ~48.6 wide, labels 9.897px #5C6168 */
.psec__protocols {
  position: absolute;
  top: var(--psec-proto-y);
  left: var(--psec-proto-x);
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.proto { width: 48.612px; text-align: center; }
.proto__icon { height: 32.626px; display: grid; place-items: end center; }
.proto__icon img { height: auto; width: auto; margin: 0 auto; }
.proto__name {
  margin-top: 8.2px;
  font-weight: 500;
  font-size: 9.897px;
  line-height: 13.519px;
  color: var(--proto);
}

/* ---------------------------------------------------------- media */
.psec__media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.psec__media > * { position: absolute; border-radius: 30px; }

/* hero arrangement: 696x406 at (media-x, 62), two tiles at y=488 */
.psec--hero .psec__videowrap {
  left: calc(var(--psec-origin) + var(--psec-media-x));
  top: 62px;
  width: 696px;
  height: 406px;
}
.psec--hero .psec__media-main--a { position: absolute; inset: 0; border-radius: 30px; }
.psec--hero .psec__media-a1 {
  left: calc(var(--psec-origin) + var(--psec-media-x));
  top: 488px;
  width: 343px;
  height: 191px;
}
.psec--hero .psec__media-a2 {
  left: calc(var(--psec-origin) + var(--psec-media-x) + 363px);
  top: 488px;
  width: 333px;
  height: 191px;
}

/* tall arrangement: 316x617 at (media-x, 62), 361x299 pair 334px to its right */
.psec--tall .psec__media-main--b {
  left: calc(var(--psec-origin) + var(--psec-media-x));
  top: 62px;
  width: 316px;
  height: 617px;
}
.psec--tall .psec__media-b1 {
  left: calc(var(--psec-origin) + var(--psec-media-x) + 334px);
  top: 62px;
  width: 361px;
  height: 299px;
}
.psec--tall .psec__media-b2 {
  left: calc(var(--psec-origin) + var(--psec-media-x) + 334px);
  top: 380px;
  width: 361px;
  height: 299px;
}

/* ---------------------------------------------------------- video facade
   Figma "_Button core": 167x48, always 265px in and 186px down from the
   lead photo's own corner, whichever side that photo is on.
   Nothing is fetched from YouTube until this button is pressed.        */
.psec__watch {
  position: absolute;
  left: 265px;
  top: 186px;
  height: 48px;
  padding: 12px 20px 12px 7px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: filter 0.18s ease, scale 0.18s ease;
}
.psec__watch:hover, .psec__watch:focus-visible { filter: brightness(1.07); scale: 1.02; }
.psec__watch img { width: 35px; height: 35px; }

/* ================================================================
   Responsive: below the design width the band leaves its fixed 741px
   canvas and becomes a normal two-column, then stacked, block.
   ================================================================ */
@media (max-width: 1511px) {
  .psec {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 62px var(--gutter);
  }
  .psec__copy, .psec__media, .psec__media > *, .psec__chip, .psec__title,
  .psec__list, .psec__protocols, .psec__award, .psec__videowrap {
    position: static;
    inset: auto;
    left: auto;
    top: auto;
  }
  .psec__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    min-width: 0;
  }
  .psec__title, .psec__list { width: 100%; }
  .psec__media { display: grid; gap: 18px; width: 100%; min-width: 0; }
  /* matches the specificity of the .psec--hero / .psec--tall rules above, so
     the fixed design-width sizes are actually dropped here */
  .psec--hero .psec__media > *,
  .psec--tall .psec__media > * { width: 100%; height: auto; min-width: 0; }
  /* a slot carrying an overlay has to stay the overlay's containing block
     after the rule above turns the media children static */
  .psec__media > *:has(.psec__overlay),
  .psec__media > *:has(.ucbadge) { position: relative; }

  /* the copy always reads first once the bands stack side by side */
  .psec--media-left .psec__copy  { order: 2; }
  .psec--media-left .psec__media { order: 1; }

  .psec--hero .psec__media {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'main main' 'a1 a2';
  }
  .psec--hero .psec__videowrap {
    grid-area: main;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 696 / 406;
  }
  .psec--hero .psec__media-main--a { position: absolute; inset: 0; }
  .psec--hero .psec__watch { position: absolute; left: 38%; top: 46%; }
  .psec--hero .psec__media-a1 { grid-area: a1; left: auto; top: auto; aspect-ratio: 343 / 191; }
  .psec--hero .psec__media-a2 { grid-area: a2; left: auto; top: auto; aspect-ratio: 333 / 191; }

  .psec--tall .psec__media {
    grid-template-columns: 316fr 361fr;
    grid-template-areas: 'main b1' 'main b2';
  }
  .psec--tall .psec__media-main--b { grid-area: main; left: auto; top: auto; width: 100%; height: 100%; min-height: 320px; }
  .psec--tall .psec__media-b1 { grid-area: b1; left: auto; top: auto; aspect-ratio: 361 / 299; }
  .psec--tall .psec__media-b2 { grid-area: b2; left: auto; top: auto; aspect-ratio: 361 / 299; }

  .psec__awardwrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  /* Each seal keeps the shape Figma drew it at. This rule used to hard-code
     112x56 -- PC Mag's banner -- for every award, which was invisible while
     that was the only one; BobVila's 83x83 disc then arrived and was stretched
     into a 2:1 box at every width below 1512, +29px wide and -27px short, with
     the disc shrunk to fit the height and 56px of empty space after it. */
  .psec__award {
    width: var(--psec-award-w, 112px);
    height: var(--psec-award-h, 56px);
    flex: 0 0 auto;
  }
}

@media (max-width: 860px) {
  .psec { grid-template-columns: 1fr; gap: 28px; padding: 48px var(--gutter); }
  /* Figma's mobile frames put the photos above the copy in every band,
     whichever side they were on at the design width. */
  .psec__media { order: 1; }
  .psec__copy  { order: 2; gap: 18px; }
  .psec__protocols { gap: 18px; flex-wrap: wrap; }
  .psec--hero .psec__watch { left: 50%; top: 50%; translate: -50% -50%; }
}

/* ----------------------------------------------------------------
   Phone. Numbers taken from the 390px Figma frames -- Smart Plugs
   mobile (144:2678) and Sensors mobile (46:5402). The media blocks
   keep the same proportions as the desktop ones (369:215.2 is the
   same ratio as 696:406, and 167.6:191.5 the same as 316:361), so
   only the type scale, the corner radius and the gutters change.
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .psec {
    gap: 43px;                       /* photos to chip */
    padding: 0 11px 44px;            /* Figma image gutter */
  }
  .psec__media { gap: 11px; }
  .psec__media > * { border-radius: 15.905px; }
  .psec__copy {
    gap: 17px;                       /* chip to title, title to list */
    padding-inline: 7px;             /* text gutter is 18px, images 11px */
  }
  .psec__title { font-size: 28px; line-height: 34px; }
  .psec__list { gap: 12px; }
  .psec__list li { font-size: 15px; line-height: 25.5px; align-items: flex-start; }
  .psec__list img { margin-top: 3.75px; }
  /* 18px, not the 28px the 390 frames use between four chips: the widest row
     on the site is five (Relays section 2, once Z-Wave had a glyph), and five
     48.612px chips with 28px between them want 355.1px against the 354px the
     phone column actually offers. Losing by one pixel dropped Z-Wave onto a
     line of its own. At 18px the five need 315.1px, which still holds on a
     360px phone. */
  .psec__protocols { margin-top: 6px; gap: 18px; }
  .psec--hero .psec__watch {
    /* Figma centres it on the lead photo: (110 + 167/2) of 390 */
    left: 50%;
    top: 50%;
    translate: -50% -50%;
  }
}

/* a protocol whose glyph has not been exported yet: holds the space so the
   caption still lines up with its neighbours, and stays invisible rather
   than drawing a broken image (see protocols() in build.py) */
.proto__missing { display: block; }