/*
 * Product modules — the 4 quixPIPELINES/LAKE/LAB/APPS rows in the product page's
 * light (#DADADA) zone, one components/ProductModule.astro each.
 *
 * Each row spans the tram lines: a 4px black accent bar sits ON the left line
 * (the same bar as /about/'s .values cells), the text column is inset from it,
 * and the framed media fills the right ~58% up to just inside the right line.
 * Section padding uses --rail-edge, which resolves against the full-width
 * section, so the bar lands exactly on the line at every width.
 */
.pmods {
  padding: 100px var(--rail-edge) 0;   /* below the ┌──┐ bracket-rule in product.astro */
  color: var(--black);
}

.pmods__heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--black);
  text-align: center;
  margin: 0 auto 100px;
  max-width: 820px;
}

.pmods__list {
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.pmod {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: start;
  padding-right: 24px;
}

.pmod::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 14px;
  width: 4px;
  background: var(--black);
}

/* Text column: name, then the copy directly under it, then the button — stacked
   from the top, so every row lines up the same way whether or not it has a button. */
.pmod__text {
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
  padding: 0 32px 0 28px;
}
.pmod__cta { margin-top: 6px; }

.pmod__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--black);
  margin-bottom: 14px;
}

.pmod__name {
  font-family: var(--font-pixel);   /* Geist Pixel (square) */
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  color: var(--black);
  margin: 0;
}

.pmod__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.53;
  color: #1A1A1A;
  max-width: 400px;
  margin: 0;
}

.pmod__cta { align-self: flex-start; }

/* Optional bullet list under the description: orange squares, as elsewhere */
.pmod__bullets {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  max-width: 400px;
}
.pmod__bullets li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: #1A1A1A;
}
.pmod__bullets li + li { margin-top: 8px; }
.pmod__bullets li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; background: var(--orange);
}

/* Optional bold line above the description */
.pmod__lede {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: var(--black);
  max-width: 340px;
  margin: 0 0 10px;
}

/* Media frame — fixed size: dark hairline with orange squares on the corners. */
.pmod__frame {
  position: relative;
  margin-top: 28px;
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(0, 0, 0, 0.7);
}

/* The media holder: fills the frame. */
.pmod__box {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pmod__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Custom media (ProductModule given children, e.g. a UI mock, instead of a
   video/img): the frame drops its fixed 3:2 and takes the content's height. */
.pmod--slot .pmod__frame { aspect-ratio: auto; }
.pmod--slot .pmod__box { position: relative; inset: auto; }

/* Media column: the frame, then (for video) the control bar under it. */
.pmod__media-col { min-width: 0; }

/* Video control bar (js/video-controls.js): play/pause, restart, a draggable playhead,
   elapsed / total time and a "Paused" state — under the frame, never over the video.
   The playhead's filled part is the --p custom property (0–100%), set by the script. */
.pmod__frame--video { cursor: pointer; }
.pmod__ctl {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; height: 22px;
  font: 400 10px/1 var(--font-mono); letter-spacing: 0.06em; color: rgba(0, 0, 0, 0.5);
}
.pmod__ctl-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; color: rgba(0, 0, 0, 0.5);
  border: 0; cursor: pointer; transition: color 0.15s;
}
.pmod__ctl-btn:hover, .pmod__ctl-btn:focus-visible { color: var(--orange-dark); outline: none; }
.pmod__ctl-btn:focus-visible { box-shadow: 0 0 0 1px var(--orange); }
.pmod__ctl-icon { width: 10px; height: 10px; fill: currentColor; }
.pmod__ctl-icon--play { display: none; }
.pmod__ctl.is-paused .pmod__ctl-icon--pause { display: none; }
.pmod__ctl.is-paused .pmod__ctl-icon--play { display: block; }
.pmod__ctl-seek {
  --p: 0%;
  flex: 1; min-width: 60px; height: 14px; margin: 0 4px; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.pmod__ctl-seek::-webkit-slider-runnable-track {
  height: 2px; background: linear-gradient(var(--orange), var(--orange)) 0 0 / var(--p) 100% no-repeat, rgba(0, 0, 0, 0.14);
}
.pmod__ctl-seek::-moz-range-track { height: 2px; background: rgba(0, 0, 0, 0.14); }
.pmod__ctl-seek::-moz-range-progress { height: 2px; background: var(--orange); }
/* the handle only shows when you go for it: hover, focus or drag */
.pmod__ctl-seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 8px; height: 8px; margin-top: -3px; background: var(--orange); border: 0; border-radius: 0;
  opacity: 0; transition: opacity 0.15s;
}
.pmod__ctl-seek::-moz-range-thumb { width: 8px; height: 8px; background: var(--orange); border: 0; border-radius: 0; opacity: 0; transition: opacity 0.15s; }
.pmod__ctl-seek:hover::-webkit-slider-thumb, .pmod__ctl-seek:focus-visible::-webkit-slider-thumb, .pmod__ctl-seek:active::-webkit-slider-thumb { opacity: 1; }
.pmod__ctl-seek:hover::-moz-range-thumb, .pmod__ctl-seek:focus-visible::-moz-range-thumb, .pmod__ctl-seek:active::-moz-range-thumb { opacity: 1; }
.pmod__ctl-seek:focus-visible { outline: none; }
.pmod__ctl-time { flex: none; font-variant-numeric: tabular-nums; }
.pmod__ctl-state { flex: none; color: var(--orange-dark); text-transform: uppercase; letter-spacing: 0.12em; }
.pmod__ctl-state:empty { display: none; }

.pmod__corner {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--orange);
  z-index: 1;
}
.pmod__corner--tl { top: -4px;    left: -4px;  }
.pmod__corner--tr { top: -4px;    right: -4px; }
.pmod__corner--bl { bottom: -4px; left: -4px;  }
.pmod__corner--br { bottom: -4px; right: -4px; }

/* Tablet & phones: one column — title, copy, the visual (+ its control bar), then the button (so the
   button closes the row rather than sitting between the copy and the visual). The text
   column's box is dissolved (display: contents) so its children can be reordered around
   the frame; the bar runs the full stacked row. */
@media (max-width: 980px) {
  .pmods { padding-top: 72px; }
  .pmods__heading { font-size: 40px; margin-bottom: 64px; }
  .pmods__list { gap: 80px; }
  .pmod { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding-right: 0; }
  .pmod::before { bottom: 0; }
  .pmod__text { display: contents; }
  .pmod__head, .pmod__copy, .pmod__cta { margin-left: 24px; }
  .pmod__media-col { order: 1; margin: 8px 0 0 24px; }
  .pmod__frame { margin-top: 0; }
  .pmod__cta { order: 2; margin-top: 8px; align-self: flex-start; }
}

@media (max-width: 620px) {
  .pmods__heading { font-size: 32px; }
  .pmod__name { font-size: 34px; }
}