/* pw-home — new sections of the home page (Figma "Polywall Main Page", 2026-09).
   Built on the site's existing values, not on the mockup's pixels:
   - container = Tilda grid (1160 / 940 / 600 / 460);
   - section title = zero-block H2: Roboto 700 50/1.15 uppercase #141414 (40 at ≤959, 30 at ≤639)
     + red divider 50×2 #e62e45;
   - lead = 18/1.55 #757575 (16 at ≤639);
   - block title = feed title t-name_md: 24/1.35 700 uppercase;
   - card title = 20/1.2 700 uppercase; body = 18/1.55 #757575;
   - button = 16/1 700 uppercase, height 55, radius 5, #e62e45;
   - section padding = 120 (75 at ≤480), grey background #f2f3f5. */

.pw-home {
  padding: 120px 0;
  background: #ffffff;
  font-family: 'Roboto', Arial, sans-serif;
  color: #141414;
}
.pw-home--grey { background: #f2f3f5; }
.pw-home--pb60 { padding-bottom: 60px; }
/* white section right after another white one: the previous section's bottom padding is enough
   (otherwise 120 + 120 = 240px of empty space, e.g. "Why Polywall" → "Build a Control Room…") */
.pw-home--pt0 { padding-top: 0 !important; }
.pw-home *, .pw-home *::before, .pw-home *::after { box-sizing: border-box; }

.pw-home__wrap { width: 1160px; margin: 0 auto; }

.pw-home__title {
  margin: 0;
  font-size: 50px;
  line-height: 1.15;
  font-weight: 700;
  text-transform: uppercase;
  color: #141414;
}
.pw-home__divider {
  width: 50px;
  height: 2px;
  margin-top: 20px;
  background: #e62e45;
}
.pw-home__lead {
  margin: 30px 0 0;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  color: #757575;
}
.pw-home__h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: uppercase;
  color: #141414;
}

/* list with red square markers */
.pw-home__list { margin: 20px 0 0; padding: 0; list-style: none; }
.pw-home__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 15px;
  font-size: 18px;
  line-height: 1.55;
  color: #757575;
}
.pw-home__list li:last-child { margin-bottom: 0; }
.pw-home__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: #e62e45;
}
.pw-home__list strong,
.pw-home__list b { display: block; font-weight: 700; color: #141414; }
.pw-home__list a { color: #141414; text-decoration: none; }
.pw-home__list a:hover { color: #e62e45; }

.pw-home__actions { margin-top: 60px; text-align: center; }
.pw-home__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 55px;
  padding: 0 30px;
  border: 2px solid #e62e45;
  border-radius: 5px;
  background: #e62e45;
  color: #ffffff;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.pw-home__btn:hover { background: #ffffff; color: #e62e45; }

/* ---------- From video wall software to control room layer ---------- */
.pw-shift__diagram {
  display: grid;
  grid-template-columns: 250px 1fr 280px;
  align-items: center;
  margin-top: 100px;
}
/* more air between the horizontal diagram and the button (lower items hang below the line) */
.pw-shift__diagram + .pw-home__actions { margin-top: 100px; }
.pw-shift__legacy {
  padding: 20px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background: #f7f7f7;
}
.pw-shift__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-bottom: 20px;
}
.pw-shift__tiles i { display: block; height: 24px; background: #e6e6e6; }
.pw-shift__legacy-title,
.pw-shift__layer-title {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
  text-transform: uppercase;
  color: #141414;
}
.pw-shift__legacy-sub,
.pw-shift__layer-sub {
  font-size: 12px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9a9a9a;
}

.pw-shift__track { position: relative; height: 420px; }
.pw-shift__track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 8px;
  top: 50%;
  height: 1px;
  background: #c8c8c8;
}
.pw-shift__track::after {
  content: '';
  position: absolute;
  right: 0;
  top: calc(50% - 5px);
  border-left: 8px solid #e62e45;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.pw-shift__label {
  position: absolute;
  left: 32%;
  top: calc(50% + 16px);
  font-size: 12px;
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #141414;
  white-space: nowrap;
}
.pw-shift__item { position: absolute; width: 190px; }
.pw-shift__item::before { /* stem */
  content: '';
  position: absolute;
  left: 45px;
  width: 1px;
  height: 70px;
  background: #c8c8c8;
}
.pw-shift__item::after { /* point on the line */
  content: '';
  position: absolute;
  left: 41px;
  width: 9px;
  height: 9px;
  background: #e62e45;
}
.pw-shift__item--up { bottom: calc(50% + 70px); }
.pw-shift__item--up::before { top: 100%; }
.pw-shift__item--up::after { top: calc(100% + 66px); }
.pw-shift__item--down { top: calc(50% + 70px); }
.pw-shift__item--down::before { bottom: 100%; }
.pw-shift__item--down::after { bottom: calc(100% + 66px); }
.pw-shift__item--p1 { left: calc(11% - 45px); }
.pw-shift__item--p2 { left: calc(29% - 45px); }
.pw-shift__item--p3 { left: calc(58% - 45px); }
.pw-shift__item--p4 { left: calc(82% - 45px); width: 155px; }

.pw-shift__num {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
  color: #e62e45;
}
.pw-shift__item-title {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
  text-transform: uppercase;
  color: #141414;
}
.pw-shift__item-text {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #757575;
}

.pw-shift__layer {
  padding: 25px 20px;
  border-top: 3px solid #e62e45;
  border-radius: 0 0 5px 5px;
  background: #141414;
}
/* API: by its own text, not stretched to the column width (as in the mockup) */
.pw-shift__tags li:last-child { justify-self: start; }
.pw-shift__layer-title { font-size: 18px; line-height: 1.2; color: #ffffff; }
.pw-shift__layer-sub { margin-top: 8px; font-weight: 700; color: #e62e45; }
/* two columns, as in the mockup (Applications | Workstations, Users & roles | Remote access, …) */
.pw-shift__tags {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 6px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.pw-shift__tags li {
  padding: 5px 6px;
  border: 1px solid #5a5a5a;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #d8d8d8;
}

/* ---------- One software layer: capability cards ---------- */
.pw-caps__note {
  position: relative;
  margin: 30px 0 0;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.55;
  color: #141414;
}
.pw-caps__note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: #e62e45;
}
.pw-caps__note b { font-weight: 700; }
.pw-caps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.pw-caps__card {
  padding: 30px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background: #ffffff;
}
.pw-caps__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(230, 46, 69, 0.5);
}
.pw-caps__head svg { display: block; width: 40px; height: 40px; }
.pw-caps__num { font-size: 14px; line-height: 1.55; color: #9a9a9a; }
.pw-caps__title {
  margin: 25px 0 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  color: #141414;
}
.pw-caps__text { margin: 15px 0 0; font-size: 18px; line-height: 1.55; color: #757575; }

/* ---------- Why companies choose Polywall: rows "image | title + description | list" ---------- */
.pw-why2 { margin-top: 60px; }
.pw-why2__row {
  display: grid;
  grid-template-columns: 300px 1fr 1.25fr;
  gap: 50px;
  align-items: center;
  padding: 30px 0;
}
.pw-why2__row:first-child { padding-top: 0; }
.pw-why2__row:last-child { padding-bottom: 0; }
.pw-why2__row + .pw-why2__row { border-top: 1px solid #e1e1e1; }
.pw-why2__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 628 / 392;
  object-fit: cover;
  border-radius: 5px;
}
.pw-why2__descr { margin: 15px 0 0; font-size: 18px; line-height: 1.55; color: #757575; }
.pw-why2 .pw-home__list { margin: 0; }

/* ---------- Industries ---------- */
.pw-ind__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
}
.pw-ind__tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 5px;
  text-decoration: none;
}
.pw-ind__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pw-ind__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 10px 20px;
  border-radius: 5px;
  background: #141414;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}
a.pw-ind__tile:hover .pw-ind__caption { background: #e62e45; }

/* ---------- Be confident: partners + support ---------- */
.pw-conf__partners {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  align-items: center;
  margin-top: 60px;
  padding: 50px;
  border-radius: 5px;
  background: #ffffff;
}
.pw-conf__map { display: block; width: 100%; height: auto; }
.pw-conf__support-title { margin-top: 60px; }
.pw-conf__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.pw-conf__card { padding: 40px 30px; border-radius: 5px; background: #ffffff; }
.pw-conf__icon { display: block; width: auto; height: 50px; margin-bottom: 25px; }
.pw-conf__card-title { margin: 0; font-size: 18px; line-height: 1.55; font-weight: 700; color: #141414; }
.pw-conf__card-text { margin: 10px 0 0; font-size: 18px; line-height: 1.55; color: #757575; }

/* ---------- Existing blocks, adjusted to the mockup ---------- */
/* Solutions carousel (clone of the solution-page block): its zero-block element is pinned at
   left:-100px with a fixed width, so below 1200px the whole slider drifts left of centre (on the
   phone the card visibly hugs the left edge). Full width → the slider centres itself. */
@media screen and (max-width: 1199px) {
  #rec2182555079 .tn-elem[data-elem-id="1775227698413"] {
    left: 0 !important;
    width: 100% !important;
  }
}

/* "More projects" only: the free-trial button is not in the new version */
#rec510808370 .tn-elem[data-elem-id="1475078681086"] { display: none !important; }
#rec510808370 .tn-elem[data-elem-id="1475077923649"] { left: calc(50% - 105px) !important; width: 210px !important; }

/* Latest news: category tabs over the static feed (logic — pw-home.js) */
#rec874874620 .t-feed__parts-switch-wrapper { margin: 0 0 40px; padding: 0; }
#rec874874620 .t-feed__parts-switch-btn {
  margin: 0 10px 10px 0;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
#rec874874620 .t-feed__parts-switch-btn a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #e62e45;
  border-radius: 5px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  text-transform: uppercase;
  color: #e62e45;
  text-decoration: none;
}
#rec874874620 .t-feed__parts-switch-btn.t-active a { background: #e62e45; color: #ffffff; opacity: 1; }
#rec874874620 .js-feed-post.pw-feed-hidden { display: none !important; }
/* The heading "Latest Control Room Articles and Industry Trends" is much longer than the old "Blog":
   two lines at ≥960, three below (measured: 116 / 138 / 105 px) — give the zero block room and move the divider under it. */
#rec570069264 .t396__artboard,
#rec570069264 .t396__filter,
#rec570069264 .t396__carrier { height: 135px !important; }
#rec570069264 .tn-elem[data-elem-id="1629202737267"] { top: 133px !important; }
@media screen and (max-width: 959px) {
  #rec570069264 .t396__artboard,
  #rec570069264 .t396__filter,
  #rec570069264 .t396__carrier { height: 160px !important; }
  #rec570069264 .tn-elem[data-elem-id="1629202737267"] { top: 156px !important; }
}
@media screen and (max-width: 639px) {
  #rec570069264 .t396__artboard,
  #rec570069264 .t396__filter,
  #rec570069264 .t396__carrier { height: 127px !important; }
  #rec570069264 .tn-elem[data-elem-id="1629202737267"] { top: 122px !important; }
}
@media screen and (max-width: 479px) {
  #rec570069264 .t396__artboard,
  #rec570069264 .t396__filter,
  #rec570069264 .t396__carrier { height: 127px !important; }
  #rec570069264 .tn-elem[data-elem-id="1629202737267"] { top: 122px !important; }
}
/* before JS: show only the first 3 posts */
#rec874874620:not(.pw-feed-js) .js-feed-post:nth-child(n+4) { display: none; }

/* ---------- Breakpoints (Tilda grid) ---------- */
@media screen and (max-width: 1199px) {
  .pw-home__wrap { width: 940px; }
  .pw-caps__grid { grid-template-columns: repeat(2, 1fr); }
  .pw-why2__row { grid-template-columns: 240px 1fr 1.2fr; gap: 30px; }

  /* diagram goes vertical, as in the mockup's mobile frame */
  .pw-shift__diagram { display: block; margin-top: 60px; padding-top: 0; }
  .pw-shift__diagram + .pw-home__actions { margin-top: 60px; }
  .pw-shift__legacy { max-width: 460px; }
  .pw-shift__track {
    height: auto;
    margin-left: 20px;
    padding: 20px 0 40px 30px;
    border-left: 1px solid #c8c8c8;
  }
  .pw-shift__track::before { display: none; }
  .pw-shift__track::after { right: auto; left: -5px; top: auto; bottom: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #e62e45; border-bottom: 0; }
  .pw-shift__label { position: static; margin-bottom: 20px; white-space: normal; color: #9a9a9a; }
  .pw-shift__item,
  .pw-shift__item--p4 { position: relative; left: auto; top: auto; bottom: auto; width: auto; max-width: 460px; margin-bottom: 30px; }
  .pw-shift__item:last-child { margin-bottom: 0; }
  .pw-shift__item::before { display: none; }
  .pw-shift__item::after { left: -35px; top: 6px; bottom: auto; }
  .pw-shift__layer { max-width: 460px; }
}

@media screen and (max-width: 959px) {
  .pw-home__wrap { width: 600px; }
  .pw-home__title { font-size: 40px; }
  .pw-why2__row { grid-template-columns: 1fr; gap: 20px; }
  .pw-ind__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pw-conf__partners { grid-template-columns: 1fr; padding: 40px 30px; }
  .pw-conf__grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 639px) {
  .pw-home__wrap { width: 460px; }
  .pw-home__title { font-size: 30px; }
  .pw-home__lead,
  .pw-home__list li,
  .pw-caps__note,
  .pw-caps__text,
  .pw-conf__card-text { font-size: 16px; }
  .pw-caps__grid,
  .pw-ind__grid { grid-template-columns: 1fr; }
  .pw-ind__caption { font-size: 18px; }
}

@media screen and (max-width: 479px) {
  .pw-home { padding: 75px 0; }
  .pw-home--pb60 { padding-bottom: 45px; }
  .pw-home__wrap { width: auto; margin: 0 20px; }
  .pw-home__actions { margin-top: 45px; }
  .pw-conf__partners { padding: 30px 20px; }
  .pw-caps__card,
  .pw-conf__card { padding: 30px 20px; }
}