/* Materials — mockup: 5-col top + metals (copy|photo) + values, one viewport */
html:has(.page-materials) {
  overflow: hidden;
}

.page-materials.page-shell {
  overflow: hidden;
}

.page-shell .fq-main.mat-screen {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  background: var(--insp-bg);
}

.mat-rule {
  border: none;
  border-top: 1px solid rgba(42, 40, 36, 0.18);
  margin: clamp(8px, 1.2vh, 12px) 0;
  flex-shrink: 0;
}

/* Top: intro | product | specs | texture | why+apps */
.mat-top {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns:
    minmax(160px, 1fr)
    minmax(150px, 0.95fr)
    minmax(210px, 1.3fr)
    minmax(140px, 0.9fr)
    minmax(160px, 1fr);
  border-bottom: 1px solid rgba(42, 40, 36, 0.16);
}

.mat-intro,
.mat-spec,
.mat-texture,
.mat-why {
  padding: clamp(12px, 1.8vh, 22px) clamp(12px, 1.3vw, 18px);
  border-right: 1px solid rgba(42, 40, 36, 0.16);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mat-why {
  border-right: none;
  justify-content: flex-start;
  gap: 0;
}

.mat-why h3 {
  margin: 0 0 clamp(6px, 0.9vh, 10px);
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mat-why > ul:not(.mat-apps) {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.mat-why > ul:not(.mat-apps) li {
  padding: clamp(2px, 0.35vh, 4px) 0;
  font-size: clamp(0.58rem, 1.05vh, 0.7rem);
  line-height: 1.3;
  color: var(--insp-ink);
}

.mat-why > ul:not(.mat-apps) li::before {
  content: "– ";
}

.mat-why .mat-rule {
  margin: clamp(10px, 1.4vh, 14px) 0;
}

.mat-apps {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(8px, 1.2vh, 12px);
}

.mat-apps li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: clamp(0.58rem, 1.05vh, 0.7rem);
  font-weight: 500;
}

.mat-apps__icon {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.mat-apps__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mat-intro {
  justify-content: flex-start;
}

.mat-back {
  display: inline-block;
  margin: 0;
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--insp-muted);
  text-decoration: none;
}

.mat-back:hover { color: var(--insp-ink); }

/* Title + pillars sit in the vertical middle of the column (BACK stays top) */
.mat-intro h1 {
  margin: auto 0 clamp(6px, 0.8vh, 10px);
  flex-shrink: 0;
  font-family: var(--insp-serif);
  font-size: clamp(1.65rem, 3.6vh, 2.45rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.95;
}

.mat-intro__lead {
  margin: 0 0 clamp(14px, 2vh, 20px);
  flex-shrink: 0;
  font-size: clamp(0.62rem, 1.1vh, 0.74rem);
  line-height: 1.45;
  color: var(--insp-muted);
}

.mat-pillars {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 18px);
}

.mat-pillars li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.mat-pillars__icon {
  width: clamp(20px, 2.4vh, 26px);
  height: clamp(20px, 2.4vh, 26px);
  color: var(--insp-ink);
  opacity: 0.88;
}

.mat-pillars__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mat-pillars h3 {
  margin: 0 0 3px;
  font-size: clamp(9px, 1.05vh, 10px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mat-pillars p {
  margin: 0;
  font-size: clamp(10px, 1.05vh, 11px);
  line-height: 1.35;
  color: var(--insp-muted);
}

.mat-product {
  margin: 0;
  background: #e4dfd6;
  overflow: hidden;
  border-right: 1px solid rgba(42, 40, 36, 0.16);
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mat-product img {
  width: auto;
  height: 92%;
  max-width: 100%;
  object-fit: contain;
}

.mat-spec__label {
  margin: 0 0 4px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--insp-muted);
}

.mat-spec h2 {
  margin: 0 0 clamp(6px, 1vh, 10px);
  flex-shrink: 0;
  font-size: clamp(0.95rem, 2.1vh, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.mat-spec__lead {
  margin: 0 0 clamp(8px, 1.2vh, 12px);
  flex-shrink: 0;
  font-size: clamp(0.6rem, 1.05vh, 0.72rem);
  line-height: 1.4;
  color: var(--insp-muted);
}

.mat-spec h3 {
  margin: 0 0 6px;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.55rem, 1vh, 0.68rem);
  flex: 1;
  min-height: 0;
}

.mat-table th,
.mat-table td {
  padding: clamp(3px, 0.55vh, 6px) 0;
  border-bottom: 1px solid rgba(42, 40, 36, 0.15);
  text-align: left;
  vertical-align: top;
  line-height: 1.25;
}

.mat-table tr:first-child th,
.mat-table tr:first-child td {
  border-top: 1px solid rgba(42, 40, 36, 0.15);
}

.mat-table th {
  width: 42%;
  color: var(--insp-muted);
  font-weight: 500;
  padding-right: 8px;
}

.mat-table td {
  font-weight: 500;
  color: var(--insp-ink);
  text-align: right;
}

/* Texture: square plate corner + caption */
.mat-texture {
  gap: clamp(8px, 1.2vh, 12px);
}

.mat-texture__photo {
  margin: 0;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1;
  max-height: min(52%, 260px);
  overflow: hidden;
  background: #d6d0c6;
}

.mat-texture__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.mat-texture > p {
  margin: 0;
  flex-shrink: 0;
  font-size: clamp(0.58rem, 1.05vh, 0.7rem);
  line-height: 1.4;
  color: var(--insp-muted);
}

/* Premium metals — copy | square photo, tags full width */
.mat-metals {
  min-height: 0;
  overflow: hidden;
  padding: clamp(14px, 2.2vh, 24px) clamp(18px, 2.4vw, 36px) clamp(10px, 1.4vh, 16px);
  border-bottom: 1px solid rgba(42, 40, 36, 0.16);
  display: flex;
  flex-direction: column;
}

.mat-metals > h2 {
  margin: 0 0 clamp(12px, 1.8vh, 20px);
  flex-shrink: 0;
  text-align: center;
  font-size: clamp(0.75rem, 1.4vh, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mat-metals__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3.2vw, 44px);
}

.mat-metal {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(96px, 0.95fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "copy photo"
    "tags tags";
  column-gap: clamp(12px, 1.4vw, 20px);
  row-gap: clamp(8px, 1.2vh, 12px);
  align-items: start;
  overflow: hidden;
}

.mat-metal__copy {
  grid-area: copy;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.mat-metal__label {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--insp-muted);
}

.mat-metal h3 {
  margin: 0 0 clamp(6px, 1vh, 10px);
  font-size: clamp(0.82rem, 1.55vh, 1.1rem);
  font-weight: 700;
  line-height: 1.15;
}

.mat-metal__copy > p:last-child {
  margin: 0;
  font-size: clamp(0.58rem, 1.05vh, 0.72rem);
  line-height: 1.4;
  color: var(--insp-muted);
}

.mat-metal__photo {
  grid-area: photo;
  margin: 0;
  width: 100%;
  aspect-ratio: 1;
  max-height: min(100%, 160px);
  justify-self: end;
  overflow: hidden;
  background: #d6d0c6;
}

.mat-metal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.mat-tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-content: flex-start;
}

.mat-tags span {
  display: inline-block;
  padding: 5px 10px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(42, 40, 36, 0.72);
  border: 1px solid transparent;
  border-radius: 2px;
}

.mat-metal--al .mat-tags span {
  background: rgba(168, 164, 156, 0.28);
  border-color: rgba(138, 133, 124, 0.28);
}

.mat-metal--br .mat-tags span {
  background: rgba(212, 176, 106, 0.28);
  border-color: rgba(184, 146, 72, 0.32);
}

.mat-metal--cu .mat-tags span {
  background: rgba(196, 122, 85, 0.26);
  border-color: rgba(164, 92, 60, 0.3);
}

.mat-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: clamp(10px, 1.6vh, 16px) clamp(12px, 1.8vw, 24px) clamp(12px, 1.8vh, 18px);
}

.mat-values article {
  padding: 0 clamp(10px, 1.4vw, 18px);
  border-right: 1px solid rgba(42, 40, 36, 0.14);
  min-width: 0;
}

.mat-values article:last-child { border-right: none; }

.mat-values__icon {
  display: block;
  width: clamp(24px, 3vh, 32px);
  height: clamp(24px, 3vh, 32px);
  margin-bottom: 7px;
  color: var(--insp-ink);
  opacity: 0.88;
}

.mat-values__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mat-values h3 {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mat-values p {
  margin: 0;
  font-size: clamp(0.55rem, 1vh, 0.68rem);
  line-height: 1.4;
  color: var(--insp-muted);
}

@media (max-width: 1100px) {
  .page-shell .fq-main.mat-screen {
    overflow-y: auto;
    display: block;
    height: auto;
    max-height: 100%;
  }

  .mat-top {
    grid-template-columns: 1fr 1fr;
  }

  .mat-intro,
  .mat-product,
  .mat-spec,
  .mat-texture,
  .mat-why {
    border-right: none;
    border-bottom: 1px solid rgba(42, 40, 36, 0.16);
    overflow: visible;
  }

  .mat-product { min-height: 280px; }

  .mat-metal {
    grid-template-columns: 1fr 140px;
  }

  .mat-metal__photo {
    max-height: none;
  }
}

@media (max-width: 780px) {
  .mat-top,
  .mat-metals__grid,
  .mat-values {
    grid-template-columns: 1fr;
  }

  .mat-metal {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "photo"
      "tags";
  }

  .mat-metal__photo {
    max-width: 220px;
    justify-self: start;
  }

  .mat-values article {
    border-right: none;
    border-bottom: 1px solid rgba(42, 40, 36, 0.14);
    padding: 14px 0;
  }

  .mat-values article:last-child { border-bottom: none; }
}