/* =========================================================
   UTECH Generic Page Template V1
   Minimal static/content page on frozen Home V4 design system.
   ========================================================= */

.generic-page{
  background:var(--bg);
  color:var(--text);
}

/* Compact internal hero */
.generic-page-hero{
  padding:calc(var(--header-h) + 54px) 0 54px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}

.generic-page-hero__inner{
  padding-inline-start:clamp(34px,5vw,92px);
  padding-inline-end:clamp(34px,5vw,92px);
}

.generic-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:var(--muted);
  font-size:10.6px;
}

.generic-breadcrumb a{
  color:var(--muted);
  transition:color .2s ease;
}

.generic-breadcrumb a:hover{
  color:var(--blue);
}

.generic-page-hero__copy{
  max-width:900px;
}

.generic-page-hero__copy h1{
  margin:0 0 8px;
  color:var(--text);
  font-size:clamp(34px,4vw,52px);
  line-height:1.55;
  font-weight:700;
  letter-spacing:-.35px;
}

.generic-page-hero__copy p{
  max-width:780px;
  margin:0;
  color:var(--muted);
  font-size:12.8px;
  line-height:2.05;
}

/* Content */
.generic-page-content{
  padding-top:58px;
  padding-bottom:86px;
}

.generic-prose{
  width:100%;
  max-width:1180px;
  margin:0 auto;
}

.generic-prose h2{
  margin:0 0 18px;
  color:var(--text);
  font-size:clamp(25px,2.7vw,36px);
  line-height:1.75;
  font-weight:700;
}

.generic-prose h3{
  margin:34px 0 9px;
  color:var(--text);
  font-size:18px;
  line-height:1.9;
  font-weight:700;
}

.generic-prose p,
.generic-prose li{
  color:var(--muted);
  font-size:13px;
  line-height:2.2;
}

.generic-prose p{
  margin:0 0 14px;
}

.generic-prose ul,
.generic-prose ol{
  margin:14px 0 20px;
  padding-right:22px;
}

.generic-prose li{
  margin-bottom:5px;
}

.generic-prose a{
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:3px;
}

.generic-prose blockquote{
  margin:28px 0;
  padding:18px 20px;
  border-right:3px solid var(--blue);
  background:var(--surface);
  color:var(--muted);
  font-size:12.8px;
  line-height:2.1;
}

@media(max-width:760px){
  .generic-page-hero{
    padding:calc(var(--header-h) + 34px) 0 40px;
  }

  .generic-page-hero__inner{
    padding-inline-start:20px;
    padding-inline-end:20px;
  }

  .generic-page-hero__copy h1{
    font-size:31px;
  }

  .generic-page-hero__copy p{
    font-size:12.2px;
  }

  .generic-page-content{
    padding-top:40px;
    padding-bottom:64px;
  }

  .generic-prose h2{
    font-size:25px;
  }

  .generic-prose h3{
    margin-top:28px;
    font-size:17px;
  }

  .generic-prose p,
  .generic-prose li{
    font-size:12.5px;
    line-height:2.15;
  }
}


/* Featured image */
.generic-featured{
  padding-top:42px;
}

.generic-featured__frame{
  margin:0;
  width:100%;
  height:clamp(250px,30vw,400px);
  overflow:hidden;
  border-radius:17px;
  background:var(--surface-2);
  box-shadow:var(--shadow);
}

.generic-featured__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.generic-page-content{
  padding-top:50px;
}

html[data-theme="dark"] .generic-featured__frame{
  box-shadow:none;
}

@media(max-width:760px){
  .generic-featured{
    padding-top:28px;
  }

  .generic-featured__frame{
    height:210px;
    border-radius:14px;
  }

  .generic-page-content{
    padding-top:34px;
  }
}