/* Home page: first screen (light, 50/50), looks, by task, consultation (the one deep block), sets, ratings, catalog tiles.
 * Owner of this file: the home page only. Tokens and base components are in the parent theme (css/ecomake.css);
 * category, search and looks stay in ecomake.catalog.css; the consultation list (.hc__*) base is in ecomake.quiz.css.
 * Rhythm of the page background: paper (hero), ivory (looks), sand (by task), deep (consultation), ivory (sets), sand (ratings), ivory (catalog). */

/* ---------- section rhythm and length: tighter than the site default (120 px) ---------- */
.s-home-wrapper .section { padding-block: 48px; }
@media (min-width: 1024px) { .s-home-wrapper .section { padding-block: 64px; } }
/* the footer brings its own top margin */
.s-home-wrapper .home-catalog { padding-bottom: 0; }
.section--sand { background: var(--sand); }

/* ---------- first screen: paper, text and picture 50/50 from 900 px, picture on top on a phone ---------- */
.hero { position: relative; background: var(--paper); overflow: hidden; }
.hero__in { display: flex; flex-direction: column; padding-inline: 0; max-width: none; }
.hero__media { order: -1; position: relative; height: 320px; overflow: hidden; background: var(--paper); }
.hero__pic { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-fx, 50%) var(--hero-fy, 70%);
  /* the edges of the scene fade into the paper, so no seam shows where the render ends */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 90%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 90%, transparent); }
.hero__copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px var(--gutter) 28px; }
.hero .h1 { font-size: clamp(40px, 11vw, 56px); max-width: none; line-height: 1; }
.hero .h1 em { color: var(--clay-deep); }
.hero .lead { margin: 0; font-size: var(--fs-body); line-height: 1.45; max-width: 46ch; }
.hero__cta { margin-top: 4px; gap: 10px; }
.hero__cta .btn { flex: 1 1 150px; }
@media (min-width: 640px) {
  .hero__media { height: 400px; }
  .hero .h1 { font-size: clamp(48px, 8vw, 72px); }
  .hero .lead { font-size: var(--fs-md); }
}
@media (min-width: 900px) {
  .hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; max-width: var(--maxw); padding-inline: var(--gutter); }
  .hero__media { order: 0; height: clamp(480px, calc(100svh - var(--header-h) - 76px), 780px); }
  .hero__pic { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 90%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 90%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
  .hero__copy { padding: 40px 0; gap: 22px; }
  .hero .h1 { font-size: clamp(54px, 6.4vw, 96px); }
  .hero .lead { font-size: var(--fs-lg); }
  .hero__cta .btn { flex: 0 0 auto; }
}

/* ---------- by task: three entries in a row, text only (no icons, no numbers) ---------- */
.task { display: grid; gap: 0; grid-template-columns: 1fr; }
.task__item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 0 26px; border-top: 1px solid var(--deep); }
.task__item .h3 { font-size: clamp(24px, 2.4vw, 30px); }
.task__item p { margin: 0; max-width: 40ch; font-size: var(--fs-body); line-height: 1.55; color: var(--cocoa); }
.task__item .link-arrow { margin-top: auto; }
@media (min-width: 900px) {
  .task { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
}

/* ---------- consultation: the one deep block; the base of .hc is in ecomake.quiz.css (loaded later, so selectors here are stronger) ---------- */
.section--deep .hc__t { color: var(--on-deep); font-size: clamp(32px, 4.4vw, 52px); text-wrap: balance; }
.section--deep .hc__t em { color: var(--rose); font-style: italic; white-space: nowrap; }
.section--deep .hc__text { color: var(--on-deep-muted); max-width: 52ch; }
.section--deep .hc__sign { margin: -8px 0 16px; color: var(--on-deep-muted); }
.section--deep .hc__list { border-top-color: color-mix(in srgb, var(--on-deep) 45%, transparent); }
.section--deep .hc__list li { border-bottom-color: color-mix(in srgb, var(--on-deep) 22%, transparent); color: var(--on-deep-muted); }
.section--deep .hc__list b { color: var(--on-deep); font-size: var(--fs-caption); }

/* ---------- category tiles (home): a small sharp picture next to the name, no cropped big photos ---------- */
.tiles { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: flex; align-items: center; gap: 18px; padding: 18px 0; text-decoration: none; background: transparent; border: 0; border-top: 1px solid var(--line); transition: color var(--t-slow) var(--ease-lux); }
.tile__t b { text-decoration: underline transparent 1px; text-underline-offset: 5px; transition: text-decoration-color var(--t-slow) var(--ease-lux); }
.tile:hover { color: var(--clay-deep); }
.tile:hover .tile__t b { text-decoration-color: currentColor; }
.tile__img img { transition: transform 1400ms var(--ease-lux); }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__img img { transform: scale(1.03); } }
.tile:focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 2px; }
.tile__img { flex: none; width: 84px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-s, 10px); background: var(--paper); }
.tile__img img { width: 100%; height: 100%; object-fit: contain; }
.tile__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-block: 4px; }
.tile__t b { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-2xl); line-height: 1.15; }
.tile__t small { color: var(--muted); font-size: var(--fs-note); line-height: 1.35; }
.tile--plain { min-height: 84px; padding: 18px 16px; }

/* ---------- composition showcase (home) ---------- */
.comp-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: 28px var(--gutter); box-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.comp-card ul { display: grid; margin-bottom: 8px; }
.comp-card li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); overflow-wrap: anywhere; }

/* ---------- boxed sets on the home page: text on the left, the cards on the right (there are only a few sets) ---------- */
.sets-row { display: grid; gap: 28px; }
.sets-row__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sets-row__copy .h2 { max-width: none; }
.sets-row__copy .section__lead { margin: 0; }
.grid--sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) {
  .sets-row { grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); gap: 56px; align-items: center; }
  .grid--sets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

.tile__t small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* consultation buttons: the same width when they wrap on a phone */
.home-consult .hc__act .btn { flex: 1 1 200px; }
@media (min-width: 640px) { .home-consult .hc__act .btn { flex: 0 0 auto; } }

/* ---------- ratings of the marketplaces: one sentence on a sand band ---------- */
.s-home-wrapper .proof { padding-block: 28px; }
.proof__t { margin: 0 auto; max-width: 70ch; font-size: var(--fs-body); line-height: 1.55; color: var(--cocoa); text-align: center; text-wrap: balance; }
.proof__t .num { font-weight: 600; color: var(--ink); }

/* ---------- looks: two in a row on a phone, only the first two (all of them are on the looks page, "Все образы") ---------- */
.home-looks__cell { min-width: 0; }
@media (max-width: 639px) {
  .home-looks .looks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .home-looks__cell--extra { display: none; }
}
/* catalog tiles on a phone: two columns, small picture and the name (the description is on the category page) */
@media (max-width: 639px) {
  .home-catalog .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .home-catalog .tile { gap: 10px; padding: 12px 0; }
  .home-catalog .tile__img { width: 52px; }
  .home-catalog .tile__t b { font-size: var(--fs-lg); }
  .home-catalog .tile__t small { display: none; }
  .home-catalog .tile--plain { min-height: 0; padding: 12px 0; }
}

/* ---------- reveal never hides content from print or from a reader without motion ---------- */
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; } }