/* ==========================================================================
   Tropic Home - начална страница (B2.1)
   Източник: makets/final/assets/maket.css, редове 267-275, 277-293, 296-297,
   299-309, 359-372 - копирани 1:1 (разпределението е в tropichome/README.md).
   .hero__btns (276, 294-295) е в base.css - ползва го и 404.
   Забранените свойства тук са само там, където ги има макетът: височина на
   хиро снимката (<img>), position:absolute за чипа върху снимката в колажа,
   width 45% на малката снимка в колажа (снимка, не текст).
   ========================================================================== */

/* ---------- Хиро на началната (4.2.1) ---------- */
.hero { color: #fff; background: var(--c-primary-deep); }
.hero .stackcell__img { height: min(88vh, 760px); }
.hero .stackcell__shade { background: linear-gradient(180deg, rgba(15, 30, 36, .35) 0%, rgba(15, 30, 36, .75) 100%); }
.hero .stackcell__body { display: grid; grid-template-rows: 1fr auto; padding-top: 72px; }
.hero__content { align-self: center; padding-block: 32px; }
.hero__content .grid-12 > div { grid-column: 1 / span 8; display: grid; gap: 22px; justify-items: start; }
.hero h1 { font-size: var(--t-display); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .85); }
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin-bottom: 32px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
}
.fact { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 16px; line-height: 1.4; }
.fact svg { width: 26px; height: 26px; flex: none; color: var(--c-accent); }
@media (max-width: 1023px) {
  .hero__content .grid-12 > div { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hero .stackcell__img { height: 560px; }
  .hero .stackcell__body { padding-top: 40px; }
  .facts { grid-template-columns: 1fr; padding: 16px 18px; margin-bottom: 20px; }
}

/* ---------- Featured (4.2.2) ---------- */
.featured-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.feat-card { color: #fff; text-decoration: none; border-radius: var(--r-card); }
.feat-card .stackcell__img { aspect-ratio: 4 / 5; border-radius: var(--r-card); transition: transform 400ms ease; }
.feat-card .stackcell__shade { border-radius: var(--r-card); background: linear-gradient(180deg, rgba(15, 30, 36, 0) 35%, rgba(15, 30, 36, .82) 100%); }
.feat-card .stackcell__body { align-self: end; display: grid; gap: 10px; justify-items: start; padding: 24px; }
.feat-card h3 { color: #fff; }
.feat-card p { color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.5; }
.feat-card:hover { color: #fff; }
.feat-card:hover .stackcell__shade { background: linear-gradient(180deg, rgba(15, 30, 36, .05) 30%, rgba(15, 30, 36, .88) 100%); }
@media (max-width: 1023px) { .featured-grid { grid-template-columns: 1fr; } .feat-card .stackcell__img { aspect-ratio: 4 / 3; } }

/* ---------- За нас на началната (4.2.6) ---------- */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(var(--gap) * 2.5); align-items: center; }
.about__text { display: grid; gap: 18px; justify-items: start; }
.about__text .lead-strong { font-family: var(--f-head); font-weight: 700; font-size: var(--t-h4); line-height: 1.45; color: var(--c-text); }
.about__text p:not(.lead-strong) { color: var(--c-muted); }
.collage { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr 40px; }
.collage__big { grid-area: 1 / 2 / 2 / 3; position: relative; }
.collage__big img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; border-radius: var(--r-card); }
.collage__big .chip { position: absolute; top: 16px; right: 16px; background: #fff; }
.collage__small { grid-area: 1 / 1 / 3 / 3; align-self: end; justify-self: start; width: 45%; z-index: 1; }
.collage__small img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-img); border: 6px solid #fff; box-shadow: var(--shadow-hover); }
@media (max-width: 1023px) {
  .about { grid-template-columns: minmax(0, 1fr); }
}