/* /test/css/index.css */

.page-index .home{
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 16px 44px;
}

/* HERO */
.hero{
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 18px;
  align-items: center;
}

.hero-card{
  border-radius: 18px;
  padding: 16px;
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(0,0,0,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.hero-photo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.hero-title{ margin: 0 0 6px; }
.hero-subtitle{ margin: 0 0 12px; opacity: .82; }
.hero-about{ margin: 0; line-height: 1.55; max-width: 62ch; }

/* SEPARATORS */
.sep{
  border: 0;
  border-top: 1px solid rgba(0,0,0,.12);
  margin: 14px 0;
}

.mini-sep{
  border: 0;
  border-top: 1px solid rgba(0,0,0,.10);
  margin: 10px 0;
}

/* CARDS */
.card{
  border-radius: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
}

.block-title{ margin: 0 0 10px; }

/* SECTION LIST (no blue, no links) */
.section-list{ display: grid; }
.section-title{ font-weight: 650; letter-spacing: .2px; }
.section-text{ opacity: .82; line-height: 1.45; margin-top: 4px; }

/* NEWS (make identical to section list rows) */
.news{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}

.news li{
  /* remove "card-like" look */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;

  /* match section-link layout */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}

/* left column content wrapper */
.news-text{
  display: block;
  line-height: 1.45;
}

/* date as a "title" line */
.news-date{
  display: block;
  font-weight: 650;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
  opacity: 1;
}

/* message as "section-text" */
.news-msg{
  display: block;
  opacity: .82;
  line-height: 1.45;
  margin-top: 4px;
}

/* separators between items (use existing .mini-sep in HTML) */
@media (max-width: 920px){
  .hero{ grid-template-columns: 1fr; }
}

/* SECTION LINKS WITH ARROW */
.section-link{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.section-main{
  display: block;
}

.section-arrow{
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  color: rgba(0,0,0,.55);
  padding: 6px 8px;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}

.section-arrow:hover{
  color: rgba(0,0,0,.85);
  background: rgba(0,0,0,.04);
  transform: translateX(2px);
}

/* ---------- Micro polish (append) ---------- */

/* Slightly calmer overall rhythm */
.page-index .home{
  padding-top: 18px;
}

/* HERO typography polish */
.page-index .hero-title{
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: .2px;
}

.page-index .hero-subtitle{
  font-size: 15px;
  letter-spacing: .3px;
  text-transform: none;
  margin-bottom: 14px;
}

.page-index .hero-about{
  font-size: 15px;
  line-height: 1.6;
  max-width: 68ch;
  margin-top: 0;
}

/* Make paragraphs breathe a bit */
.page-index .hero-text .hero-about + .hero-about{
  margin-top: 10px;
}

/* Photo: slightly softer edges (more premium) */
.page-index .hero-photo img{
  border-radius: 16px;
}

/* Separators: thinner/softer (premium, less “UI-ish”) */
.page-index .sep{
  border-top-color: rgba(0,0,0,.10);
  margin: 16px 0;
}

.page-index .mini-sep{
  border-top-color: rgba(0,0,0,.08);
  margin: 12px 0;
}

/* Section rows: align arrow better, keep row compact */
.page-index .section-link{
  align-items: start;
}

.page-index .section-title{
  font-size: 16px;
}

.page-index .section-text{
  font-size: 14.5px;
  line-height: 1.55;
}

/* Arrow: “dark small icon”, no blue, no underline */
.page-index .section-arrow{
  color: rgba(0,0,0,.55);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
  padding: 6px 8px;
  border: 1px solid transparent;
  background: transparent;
}

.page-index .section-arrow:visited{
  color: rgba(0,0,0,.55);
}

.page-index .section-arrow:hover{
  color: rgba(0,0,0,.85);
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.06);
  transform: translateX(2px);
}

/* News: identical rhythm to sections */
.page-index .news li{
  gap: 14px;
}

.page-index .news-date{
  font-size: 16px;
}

.page-index .news-msg{
  font-size: 14.5px;
  line-height: 1.55;
}

/* Mobile: better stacking + spacing */
@media (max-width: 920px){
  .page-index .hero-card{
    padding: 14px;
  }

  .page-index .hero{
    gap: 14px;
  }

  .page-index .hero-about{
    max-width: 100%;
  }

  .page-index .section-arrow{
    padding: 6px 6px;
  }
}

/* ===== Watch link (News) ===== */
.proj-watch{
  font-size:.9em;
  color:#888;
  text-decoration:none;
  display:inline-block;
  transition:color .15s ease, transform .15s ease;
}

.proj-watch:hover{
  color:#000;
  transform:scale(1.05);
}