/* Gyraffe — Application Wall page styles (layered on styles.css + about.css + product.css) */

/* Hero accent: Figma renders the "Wall" span in orange, not the default green. */
.page-hero__title span { color: var(--green); }

/* ===================== Intro ===================== */
.aw-intro { background: #fff; }
.aw-intro__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-block: 4rem;
}
@media (min-width: 900px) {
  .aw-intro__inner {
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    padding-block: 6rem;
  }
}
.aw-intro__media {
  aspect-ratio: 762 / 662;
  border-radius: 12px;
  overflow: hidden;
}
.aw-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.aw-intro__media:hover img { transform: scale(1.04); }

.aw-intro__body h2 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 4.0625rem);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 1.75rem;
}
.aw-intro__body p {
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  line-height: 1.62;
  color: rgba(0, 0, 0, .82);
}
.aw-intro__body p + p { margin-top: 1.1rem; }
.aw-intro__body .btn { margin-top: 2rem; }

/* ===================== Wall Application Types ===================== */
.aw-types { background: var(--surface-gray); }
.aw-types .container { padding-block: 5rem; }
@media (min-width: 1024px) { .aw-types .container { padding-block: 7rem; } }

.aw-types__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 680px) { .aw-types__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .aw-types__grid { grid-template-columns: repeat(3, 1fr); } }

.aw-type {
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease);
}
.aw-type:hover { transform: translateY(-6px); }
.aw-type__media {
  aspect-ratio: 575 / 386;
  border-radius: 12px;
  overflow: hidden;
  background: #ddd;
}
.aw-type__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.aw-type:hover .aw-type__media img { transform: scale(1.06); }

.aw-type__body { padding-top: 1.4rem; }
.aw-type__body h3 {
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.875rem);
  font-weight: 500;
  margin-bottom: .85rem;
}
.aw-type__body p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, .76);
}

.aw-type__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.1rem;
}
.aw-tag {
  display: inline-block;
  padding: .4rem .9rem;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: 5px;
  font-size: .875rem;
  color: rgba(0, 0, 0, .75);
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.aw-type:hover .aw-tag { border-color: var(--green); }

/* ===================== How It's Done (vertical step tabs) ===================== */
.aw-process { background: #fff; }
.aw-process .container { padding-block: 5rem; }
@media (min-width: 1024px) { .aw-process .container { padding-block: 7rem; } }

.aw-process__intro {
  max-width: 64rem;
  margin: -1.25rem auto 3rem;
  text-align: center;
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  line-height: 1.62;
  color: rgba(0, 0, 0, .78);
}

.aw-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
@media (min-width: 920px) {
  .aw-steps { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Step rail — overrides the default centered .tabs */
.aw-steps__tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  justify-content: flex-start;
  order: 2;
}
@media (min-width: 920px) {
  .aw-steps__tabs {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }
}
.aw-steps__tabs .tab {
  border-radius: 6px;
  text-align: left;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  border: 0;
  padding: 1rem 1.4rem;
}
.aw-steps__tabs .tab.is-active {
  background: var(--orange);
  color: #fff;
}
.aw-steps__tabs .tab:hover:not(.is-active) {
  background: #f6f6f6;
  border: 0;
}
/* On wide screens the rail sits to the right with vertical (rotated) labels */
@media (min-width: 920px) {
  .aw-steps__tabs .tab {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    padding: 1.4rem .9rem;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.aw-steps__panels { order: 1; min-width: 0; }
.aw-steps__panels .tab-panel {
  background: #f1f1f1;
  border-left: 8px solid var(--orange);
  border-radius: 4px;
  padding: 2.5rem;
  height: 100%;
  box-sizing: border-box;
}
.aw-steps__panels .tab-panel h3 {
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.625rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}
.aw-steps__panels .tab-panel > p {
  font-size: 1.0625rem;
  line-height: 1.66;
  color: rgba(0, 0, 0, .82);
}
.aw-steps__tip {
  margin-top: 1.75rem;
  background: #ffefde;
  border-left: 6px solid var(--orange);
  padding: .85rem 1.1rem;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, .82);
  border-radius: 0 4px 4px 0;
}

/* ===================== Technical Reference ===================== */
.aw-tech { background: var(--surface-gray); }
.aw-tech .container { padding-block: 5rem; }
@media (min-width: 1024px) { .aw-tech .container { padding-block: 7rem; } }

.aw-tech__intro {
  max-width: 68rem;
  margin: -1.25rem auto 2.5rem;
  text-align: center;
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, .78);
}

/* CSS-only toggle (System Specifications / Equipment & Tools) — kept off the
   shared .tabs JS so it cannot clash with the "How It's Done" tab group. */
.aw-toggle__input { position: absolute; opacity: 0; pointer-events: none; }
.aw-toggle__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto 2.5rem;
}
.aw-toggle__tab {
  min-width: 200px;
  text-align: center;
  padding: .95rem 1.75rem;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: 6px;
  background: #fff;
  color: var(--black);
  font-size: 1rem;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.aw-toggle__tab:hover { border-color: var(--black); }
#aw-tech-specs:checked ~ .aw-toggle__tabs label[for="aw-tech-specs"],
#aw-tech-equipment:checked ~ .aw-toggle__tabs label[for="aw-tech-equipment"] {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}
.aw-toggle__panel { display: none; animation: tab-fade .35s ease; }
#aw-tech-specs:checked ~ .aw-toggle__panel--specs,
#aw-tech-equipment:checked ~ .aw-toggle__panel--equipment { display: block; }

.aw-table {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.aw-table__head,
.aw-table__row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1rem;
}
.aw-table__head {
  background: var(--black);
  color: #fff;
  padding: 1.1rem 1.75rem;
  font-size: 1.05rem;
}
.aw-table__row {
  padding: 1rem 1.75rem;
  border-top: 1px solid rgba(0, 0, 0, .1);
  font-size: 1.0625rem;
  color: rgba(0, 0, 0, .82);
}
.aw-table__row span:first-child { color: rgba(0, 0, 0, .6); }
.aw-table__row:nth-child(even) { background: #fafafa; }

@media (max-width: 560px) {
  .aw-table__head,
  .aw-table__row {
    grid-template-columns: 1fr;
    gap: .25rem;
    padding-inline: 1.25rem;
  }
}