/* ═══════════════════════════════════════════════════════
   KUPOLLA — Inner Pages CSS Part 2
   Technologies, Models catalog
   kupolla-pages-2.css
════════════════════════════════════════════════════════ */

.kp-seg { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-xl); padding: 2rem 1.5rem; transition: all var(--tr); }
.kp-seg:hover { background: rgba(255,255,255,.1); border-color: rgba(5,31,67,.3); transform: translateY(-3px); }
.kp-seg__icon { width: 44px; height: 44px; color: rgba(255,255,255,.85); margin-bottom: 1.25rem; }
.kp-seg__icon svg { width: 100%; height: 100%; }
.kp-seg__title { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: 1.25rem; color: var(--c-white); margin-bottom: .625rem; }
.kp-seg__desc { font-size: .875rem; color: rgba(255,255,255,.55); line-height: 1.65; }

/* ══════════════════════════════════════
   MATERIALS PAGE
══════════════════════════════════════ */
.kp-tech-intro {
  padding-top: clamp(2.75rem, 6.5vw, 4.75rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.kp-tech-intro__inner { max-width: 46rem; }
.kp-tech-intro__lead {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.75;
  color: var(--c-muted);
  margin: 0;
}

.kp-tech-shell { background: var(--c-warm); }
.kp-tech-shell__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.kp-tech-shell__viz {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .875rem;
}
.kp-tech-shell__photo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
}
.kp-tech-shell__note {
  margin: 0;
  font-size: .8125rem;
  color: var(--c-muted);
  text-align: center;
  max-width: 22rem;
  line-height: 1.5;
}
.kp-tech-shell__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.kp-tech-shell__legend li {
  min-width: 0;
}
.kp-tech-shell__legend strong {
  display: block;
  font-size: .9375rem;
  color: var(--c-dark);
  margin-bottom: .15rem;
}
.kp-tech-shell__legend span {
  display: block;
  font-size: .8125rem;
  color: var(--c-muted);
  line-height: 1.5;
}

.kp-tech-materials { background: var(--c-white); }
.kp-tech-mats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.kp-tech-mat { overflow: hidden; border: 1px solid var(--c-border); transition: border-color var(--tr), box-shadow var(--tr); }
.kp-tech-mat:hover { border-color: var(--c-dark); box-shadow: var(--sh-md); }
.kp-tech-mat--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
}
.kp-tech-mat__img { height: 200px; overflow: hidden; position: relative; background: #202020; }
.kp-tech-mat--featured .kp-tech-mat__img { height: auto; min-height: 240px; }
.kp-tech-mat__img--acp  { background: linear-gradient(140deg, #1a1a1a, #404040); }
.kp-tech-mat__img--clt  { background: linear-gradient(140deg, #0a3a30, #123f52); }
.kp-tech-mat__img--glass { background: linear-gradient(140deg, #202020, #404040); }
.kp-tech-mat__img--steel { background: linear-gradient(140deg, #00311e, #051f43 150%); }
.kp-tech-mat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.kp-tech-mat:hover .kp-tech-mat__img img { transform: scale(1.05); }
.kp-tech-mat__body { padding: 1.5rem; }
.kp-tech-mat__tag {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: .5rem;
}
.kp-tech-mat__title { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: 1.25rem; color: var(--c-dark); margin-bottom: .5rem; }
.kp-tech-mat__desc { font-size: .875rem; color: var(--c-muted); line-height: 1.65; margin: 0; }

.kp-tech-geo__img-wrap { overflow: hidden; line-height: 0; }
.kp-tech-geo__img { width: 100%; height: auto; display: block; object-fit: cover; }

.kp-tech-energy { background: var(--c-warm); }
.kp-tech-energy__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.kp-tech-energy__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kp-energy-m { background: var(--c-white); border: 1px solid var(--c-border); padding: 1.5rem; }
.kp-energy-m__val { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: 2.25rem; font-weight: 300; color: var(--c-forest); line-height: 1; margin-bottom: .375rem; }
.kp-energy-m__label { font-size: .8125rem; color: var(--c-muted); line-height: 1.45; }

.kp-tech-certs { background: var(--c-white); }
.kp-certs { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.kp-cert { background: var(--c-warm); border: 1px solid var(--c-border); padding: 1.75rem 2rem; text-align: center; min-width: 180px; flex: 1; max-width: 240px; }
.kp-cert__name { font-size: .875rem; font-weight: 500; color: var(--c-dark); margin-bottom: .35rem; }
.kp-cert__desc { font-size: .75rem; color: var(--c-muted); line-height: 1.5; }

/* ══════════════════════════════════════
   MODELS CATALOG PAGE
══════════════════════════════════════ */
.kp-catalog { background: var(--c-warm); }

/* Filters — static models.html (.kp-catalog-filters) + Django template (.kp-catalog__filters) */
.kp-catalog-filters,
.kp-catalog__filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--c-border);
  position: relative;
  z-index: 2;
}

.kp-catalog-filters {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  margin-bottom: 2rem;
}

.kp-filter-group,
.kp-filters__group {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.kp-filter-group__label,
.kp-filters__label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  flex-shrink: 0;
  min-width: 5.5rem;
}

.kp-filters__btns {
  display: flex;
  gap: .375rem;
  flex-wrap: wrap;
  align-items: center;
}

.kp-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .375rem .875rem;
  font-size: .8125rem;
  font-family: inherit;
  line-height: 1;
  color: var(--c-muted);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-white);
  cursor: pointer;
  min-height: 36px;
  text-decoration: none;
  appearance: none;
  transition: border-color var(--tr-f), color var(--tr-f), background var(--tr-f);
  -webkit-tap-highlight-color: transparent;
}
.kp-filter-btn:hover { border-color: var(--c-forest); color: var(--c-forest); }
.kp-filter-btn.active { background: var(--c-forest); color: var(--c-white); border-color: var(--c-forest); }

.kp-catalog__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--c-muted);
}
.kp-catalog__empty p { margin-bottom: 1.25rem; font-size: 1rem; }

.kp-catalog-sort { margin-left: auto; }
.kp-catalog-sort select { padding: .375rem .875rem; font-size: .8125rem; color: var(--c-text); border: 1.5px solid var(--c-border); border-radius: var(--r-full); background: var(--c-white); cursor: pointer; min-height: 36px; font-family: var(--f-sans); outline: none; -webkit-appearance: none; }

.kp-catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  position: relative;
  z-index: 1;
  margin-top: .25rem;
}

/* Головна: Compact/Grand менші, Prime більший. Акцент — бейдж, без рамки */
.kp-catalog__grid--home {
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.32fr) minmax(0, .84fr);
  gap: clamp(.875rem, 2vw, 1.5rem);
  align-items: start;
}
.kp-catalog__grid--home .kp-mcard {
  min-width: 0;
  height: auto;
  transition: box-shadow var(--tr), border-color var(--tr);
}
.kp-catalog__grid--home .kp-mcard__img img {
  object-fit: cover;
  object-position: center;
}
.kp-catalog__grid--home .kp-mcard__meta {
  align-items: flex-start;
}
.kp-catalog__grid--home .kp-mcard__name {
  min-width: 0;
}
.kp-catalog__grid--home .kp-mcard__area {
  flex-shrink: 0;
  white-space: nowrap;
}
.kp-catalog__grid--home .kp-catalog-card__actions .kp-btn {
  flex: 1 1 100%;
  width: 100%;
}
.kp-catalog__grid--home .kp-mcard:not(.kp-mcard--feat) .kp-mcard__img {
  height: clamp(196px, 22vw, 268px);
}
.kp-catalog__grid--home .kp-mcard:not(.kp-mcard--feat) .kp-mcard__body {
  padding: 1.05rem 1.1rem 1.2rem;
}
.kp-catalog__grid--home .kp-mcard:not(.kp-mcard--feat) .kp-mcard__name {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
}
.kp-catalog__grid--home .kp-mcard:not(.kp-mcard--feat) .kp-mcard__price {
  font-size: 1rem;
}
.kp-catalog__grid--home .kp-mcard--feat {
  position: relative;
  z-index: 2;
  border-color: var(--c-border);
  box-shadow: var(--sh-md);
}
.kp-catalog__grid--home .kp-mcard--feat .kp-mcard__img {
  height: clamp(260px, 32vw, 400px);
}
.kp-catalog__grid--home .kp-mcard--feat .kp-mcard__name {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}
.kp-catalog__grid--home > .kp-mcard.kp-reveal.kp-mcard--feat,
.kp-catalog__grid--home > .kp-mcard.kp-reveal.kp-mcard--feat.vis {
  transform: none;
}

.kp-catalog__grid .kp-mcard {
  height: 100%;
}

.kp-catalog__grid .kp-mcard__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.kp-catalog__grid .kp-mcard__foot {
  margin-top: .5rem;
  padding-top: 0;
  border-top: 0;
}

.kp-catalog-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1rem;
}
.kp-catalog-card__actions .kp-btn {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}

/* ── VIDEO REVIEW (home, під модельним рядом) ── */
.kp-video-review { background: var(--c-stone-bg); }
.kp-video-review__grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(10rem, 1fr) minmax(0, 280px);
  gap: clamp(1rem, 3vw, 2.5rem);
  justify-content: center;
  align-items: center;
}
.kp-video-review__mid {
  margin: 0;
  max-width: 16rem;
  justify-self: center;
  text-align: center;
  font-family: var(--f-serif);
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--c-text);
}
.kp-video-review__item {
  margin: 0;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.kp-video-review__item--primary {
  box-shadow: var(--sh-md);
  border-color: rgba(0,49,30,.25);
}
.kp-video-review__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: min(72vh, 560px);
  object-fit: cover;
  background: var(--c-graphite);
  vertical-align: top;
}
.kp-video-review__cap {
  padding: .75rem 1rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: center;
}

.kp-mcard__img--xl {
  background: linear-gradient(155deg, #000000, #00311e 50%, #4a4a4a);
}

.kp-catalog__grid > .kp-mcard.kp-reveal,
.kp-catalog__grid > .kp-catalog-card.kp-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.kp-catalog-card.is-filtered-out,
.kp-catalog-card[hidden] {
  display: none;
}

.kp-catalog__empty[hidden] {
  display: none;
}

/* Reveal animation offset — keep cards below filters on iOS Safari */
.kp-catalog__grid > .kp-mcard.kp-reveal.vis,
.kp-catalog__grid > .kp-catalog-card.kp-reveal.vis {
  transform: translateY(0);
}
.kp-catalog__cta { background: var(--c-forest); border-radius: var(--r-xl); padding: 3rem 2.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.kp-catalog__cta-title { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: 1.875rem; color: var(--c-white); font-weight: 300; }
.kp-catalog__cta-desc { font-size: .9375rem; color: rgba(255,255,255,.6); max-width: 420px; line-height: 1.65; }