/* ==========================================================================
   Alevectis Commerce theme - the home page only.  Every section here is one the owner turns
   on, off or moves in the design panel.  No component lives in this file;
   components.css owns those.
   The hero, category and promo slots take a photograph from the panel, and
   their drawings are the resting state while no image is chosen; the H1 breaks
   where the owner typed a new line; the newsletter band is a home section.

   @package Alevectis Commerce
   @author Alevectis <https://alevectis.co.il>
   @copyright 2026 Alevectis
   @license GPL-2.0-or-later
   ========================================================================== */

/* ============================================================== 1. HERO ===
   Asymmetric split.  The type block sits on the reading-start side (the right
   in Hebrew); the still life bleeds off the opposite frame edge and drops past
   the band's lower boundary into the strip below it. */

.k-hero { padding-block: clamp(32px, 4vw, 72px) 0; overflow: visible; }
.k-hero__in {
  display: grid;
  gap: var(--k-s-9);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .k-hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--k-s-12); }
}

.k-hero__t {
  font-family: var(--k-font-display);
  font-size: clamp(2.125rem, 1.2rem + 3.1vw, 3.125rem);   /* 50 / 34: 2.9x body */
  font-weight: var(--k-w-display);
  letter-spacing: var(--k-ls-display);
  line-height: 1.12;
  text-wrap: balance;
  white-space: pre-line;   /* a line break typed in the panel is where the H1 breaks */
}
.k-hero__lead { margin-block-start: var(--k-s-7); max-width: 46ch; }
.k-hero__cta { display: flex; flex-wrap: wrap; gap: var(--k-s-5); margin-block-start: var(--k-s-9); }
.k-hero__cta .k-btn { flex: 1 1 auto; min-width: 12rem; }
@media (min-width: 560px) { .k-hero__cta .k-btn { flex: 0 0 auto; } }

.k-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-s-4) var(--k-s-7);
  margin-block-start: var(--k-s-8);
  padding-block-start: var(--k-s-6);
  border-block-start: 1px solid var(--k-line);
  font-size: var(--k-fs-small);
  color: var(--k-text-secondary);
}
.k-hero__facts b { color: var(--k-text); font-weight: var(--k-w-strong); }

/* the still life: a panel that runs off the inline-end edge and past the band */
.k-hero__media {
  position: relative;
  background: var(--k-bg-sub);
  border-radius: var(--k-r-3) 0 0 var(--k-r-3);
  padding: clamp(20px, 3vw, 40px);
  margin-inline-end: calc(var(--k-pad-gutter) * -1);
  /* the panel drops past this band's lower boundary and sits ON the strip
     below it: the page's boundary crossing, not a shadow */
  margin-block-end: calc(var(--k-pad-block) * -0.4);
  z-index: 2;
}
@media (min-width: 1440px) {
  .k-hero__media { margin-inline-end: calc((100vw - var(--k-container)) / -2 - var(--k-pad-gutter)); }
}
.k-hero__media svg { width: 100%; height: auto; color: var(--k-text); }
/* a photograph fills the panel edge to edge, at the drawing's own proportion */
.k-hero__media[data-k-has-image="true"] { padding: 0; overflow: hidden; }
.k-hero__media[data-k-has-image="true"] img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; border-radius: inherit; }
.k-hero__cap {
  position: absolute;
  inset-block-end: var(--k-s-6);
  inset-inline-start: var(--k-s-7);
  font-size: var(--k-fs-small);
  color: var(--k-text-secondary);
  background: var(--k-bg-page);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-2);
  padding: var(--k-s-3) var(--k-s-5);
  max-width: 22ch;
  line-height: 1.5;
}

/* the variant with no image: one wide type block on the sub ground */
[data-k-hero="plain"] { background: var(--k-bg-sub); padding-block: clamp(48px, 6vw, 104px); }
[data-k-hero="plain"] .k-hero__media { display: none; }
[data-k-hero="plain"] .k-hero__in { grid-template-columns: 1fr; gap: 0; }
[data-k-hero="plain"] .k-hero__t { font-size: var(--k-fs-display); max-width: 20ch; }
[data-k-hero="plain"] .k-hero__lead { max-width: 58ch; font-size: var(--k-fs-lead); }
[data-k-hero="plain"] .k-hero__facts { max-width: none; }

/* ========================================================= 2. TRUST STRIP ==
   Four facts on the dark ground, separated by rules, never by boxes. */

.k-trust { position: relative; z-index: 1; }
@media (min-width: 900px) { .k-trust { padding-block-start: clamp(40px, 5vw, 72px); } }
.k-trust__l {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 620px)  { .k-trust__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .k-trust__l { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.k-trust__i {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--k-s-3) var(--k-s-5);
  padding-block: var(--k-s-7);
  border-block-end: 1px solid var(--k-line-on-dark);
}
.k-trust__i:nth-child(4) { border-block-end: 0; }

/* two columns: a rule between the pair, a rule under the first row */
@media (min-width: 620px) and (max-width: 1023px) {
  .k-trust__i { padding-inline: var(--k-s-8); border-inline-start: 1px solid var(--k-line-on-dark); }
  .k-trust__i:nth-child(odd)  { padding-inline-start: 0; border-inline-start: 0; }
  .k-trust__i:nth-child(even) { padding-inline-end: 0; }
  .k-trust__i:nth-child(3), .k-trust__i:nth-child(4) { border-block-end: 0; }
}

/* four columns: rules only between them, none at the frame edges */
@media (min-width: 1024px) {
  .k-trust__i { padding-inline: var(--k-s-8); border-block-end: 0; border-inline-start: 1px solid var(--k-line-on-dark); }
  .k-trust__i:nth-child(1) { padding-inline-start: 0; border-inline-start: 0; }
  .k-trust__i:nth-child(4) { padding-inline-end: 0; }
}
.k-trust__i svg { width: 24px; height: 24px; grid-row: span 2; color: var(--k-accent-on-dark); }
.k-trust__h { font-family: var(--k-font-text); font-size: var(--k-fs-ui); font-weight: var(--k-w-strong); color: var(--k-text-on-dark); line-height: 1.4; }
.k-trust__p { font-size: var(--k-fs-small); color: rgba(255,255,255,.76); line-height: 1.6; }
.k-trust__p a { color: var(--k-accent-on-dark); text-underline-offset: 3px; }

/* ========================================================== 3. CATEGORIES ==
   Deliberate asymmetry: the lead tile is twice the width and taller. */

.k-cats { display: grid; gap: var(--k-gap-grid); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .k-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .k-cats__i--lead { grid-column: span 2; grid-row: span 2; } }

/* The mosaic closes for any number of categories (a client has any number; the
   section shows 1 to 8).  section-categories.php prints data-count and marks the
   tiles that must widen with --wide.  The lead is 2x2 on a 4-column grid, which
   leaves 4 cells beside it; a count that does not fill them widens tiles until
   the last row is whole:
     1: one tile, full width      2: two halves           3: lead + two wide
     4: lead + one wide + two     5: lead + four          6: 3 columns, lead + five
     7: lead + four + two wide    8: lead + four + one wide + two
   A wide tile lays its picture beside its words, so it is as tall as a single
   tile rather than a stretched one.  On a phone (2 columns, no 2x2 lead) an odd
   count gives the lead the full row. */
@media (min-width: 768px) {
  .k-cats[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .k-cats .k-cats__i--wide {
    grid-column: span 2;
    grid-row: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: var(--k-s-8);
  }
  .k-cats[data-count="1"] .k-cats__i--wide { grid-column: 1 / -1; }
  .k-cats .k-cats__i--wide > .k-cats__img { grid-row: 1 / -1; align-self: stretch; height: 100%; min-height: 180px; }
  .k-cats .k-cats__i--wide > .k-cats__o { grid-row: 1 / -1; height: clamp(78px, 10vw, 150px); align-self: center; justify-self: center; }
}
@media (max-width: 767px) {
  .k-cats:is([data-count="1"], [data-count="3"], [data-count="5"], [data-count="7"]) .k-cats__i--lead { grid-column: 1 / -1; }
}

.k-cats__i {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* the drawing | name and line | the count */
  gap: var(--k-s-5);
  min-height: 210px;
  padding: var(--k-s-7);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-3);
  background: var(--k-bg-sub);
  text-decoration: none;
  transition: border-color var(--k-dur-state) var(--k-ease-state),
              background var(--k-dur-state) var(--k-ease-state);
}
@media (min-width: 768px) { .k-cats__i--lead { min-height: 440px; } }
.k-cats__i:hover { border-color: var(--k-text); background: var(--k-bg-page); }
.k-cats__i:active { background: var(--k-c-ink-050); }

/* The drawing sits in the flow, on its own row, so it can never land on the
   words: at 390 an absolutely placed one did exactly that. */
.k-cats__o {
  justify-self: start;
  width: auto;
  height: clamp(54px, 8vw, 82px);
  opacity: .55;
  color: var(--k-text);
  transition: opacity var(--k-dur-state) var(--k-ease-state);
}
.k-cats__i--lead .k-cats__o { height: clamp(78px, 15vw, 196px); }
/* the category's own image, where it has one, sits in the drawing's row */
.k-cats__img {
  width: 100%;
  height: clamp(96px, 12vw, 150px);
  object-fit: cover;
  border-radius: var(--k-r-2);
}
.k-cats__i--lead .k-cats__img { height: clamp(150px, 24vw, 300px); }
/* From 768 the 2x2 lead is as tall as the tiles beside it; its photograph takes
   the height the words leave, so the tile has no empty band above the count. */
@media (min-width: 768px) {
  .k-cats__i--lead:not(.k-cats__i--wide) { grid-template-rows: minmax(0, 1fr) auto auto; }
  .k-cats__i--lead:not(.k-cats__i--wide) > .k-cats__img { height: 100%; min-height: clamp(150px, 24vw, 300px); }
}
.k-cats__i:hover .k-cats__o { opacity: .9; }
.k-cats__n { font-size: var(--k-fs-h3); align-self: end; }
.k-cats__i--lead .k-cats__n { font-size: var(--k-fs-h2); }
.k-cats__d { font-size: var(--k-fs-small); color: var(--k-text-secondary); line-height: 1.55; max-width: 34ch; margin-block-start: var(--k-s-4); }
.k-cats__c { font-size: var(--k-fs-small); color: var(--k-accent); font-weight: var(--k-w-strong); }

/* ============================================================= 4. FEATURED */
/* uses .k-head + .k-grid-products from base.css; nothing of its own */

/* ============================================================== 5. PROMO ===
   A split band on the dark ground.  The number is the page's one display
   moment, and it is a real store fact, so it re-skins with the store. */

.k-promo { overflow: hidden; }
.k-promo__in {
  display: grid;
  gap: var(--k-s-9);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .k-promo__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--k-s-12); }
}
.k-promo__num { display: flex; align-items: baseline; gap: var(--k-s-6); flex-wrap: wrap; }
.k-promo__num .k-num { color: var(--k-c-white); flex: none; }
.k-promo__num span:last-child { font-size: var(--k-fs-lead); color: rgba(255,255,255,.78); min-width: 10ch; }
.k-promo__t { font-size: var(--k-fs-h2); margin-block-start: var(--k-s-7); }
.k-promo__p { color: rgba(255,255,255,.78); margin-block-start: var(--k-s-5); max-width: 52ch; font-size: var(--k-fs-body); }
.k-promo__cta { margin-block-start: var(--k-s-9); display: flex; flex-wrap: wrap; gap: var(--k-s-5); }

.k-promo__art { position: relative; display: flex; justify-content: flex-end; }
.k-promo__art img {
  width: min(100%, 420px);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--k-r-3);
}
.k-promo__art svg {
  width: auto;
  max-width: none;
  height: clamp(190px, 26vw, 330px);
  color: var(--k-c-white);
  opacity: .34;
  /* runs off the far frame edge; .k-promo clips it, so it reads as bled */
  margin-inline-end: clamp(-150px, -9vw, -48px);
}

/* ========================================================== 6. NEW ARRIVALS
   The head sits beside the grid from 1100 up: a different anatomy from the
   featured row, which carries its head above the grid. */

.k-new { display: grid; gap: var(--k-s-9); grid-template-columns: 1fr; }
@media (min-width: 1100px) {
  .k-new { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--k-s-12); align-items: start; }
  .k-new__head { position: sticky; inset-block-start: calc(var(--k-header-h) + var(--k-s-8)); }
}
.k-new__head { display: grid; gap: var(--k-s-5); align-content: start; }
.k-new__t { font-size: var(--k-fs-h2); }
.k-new__p { font-size: var(--k-fs-small); color: var(--k-text-secondary); line-height: 1.6; }
.k-new__grid { display: grid; gap: calc(var(--k-gap-grid) + 8px) var(--k-gap-grid); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px)  { .k-new__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .k-new__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .k-new__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============================================================= 7. QUOTES ===
   One large quote and two ruled ones.  Every quote on this page is demo
   content and says so: no invented review ever ships to a client. */

.k-quotes { display: grid; gap: var(--k-s-9); grid-template-columns: 1fr; }
@media (min-width: 900px) { .k-quotes { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--k-s-12); } }

.k-quote__big {
  font-family: var(--k-font-display);
  font-size: var(--k-fs-h2);
  font-weight: var(--k-w-display);
  letter-spacing: var(--k-ls-heading);
  line-height: 1.34;
  text-wrap: balance;
}
.k-quote__by { font-size: var(--k-fs-small); color: var(--k-text-secondary); margin-block-start: var(--k-s-6); }
.k-quote__l { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.k-quote__i { padding-block: var(--k-s-7); border-block-start: 1px solid var(--k-line-strong); }
.k-quote__i:last-child { border-block-end: 1px solid var(--k-line-strong); }
.k-quote__i blockquote { font-size: var(--k-fs-body); line-height: 1.65; }
.k-quote__i figcaption { font-size: var(--k-fs-small); color: var(--k-text-secondary); margin-block-start: var(--k-s-4); }
.k-quote__tag {
  display: inline-block;
  font-size: var(--k-fs-badge);
  font-weight: var(--k-w-strong);
  color: var(--k-text-secondary);
  border: 1px solid var(--k-line-strong);
  border-radius: var(--k-r-1);
  padding: 2px var(--k-s-3);
  margin-inline-start: var(--k-s-4);
}

/* ========================================================== 8. EDITORIAL ===
   The SEO block and the questions, side by side: prose on the reading-start
   side, the answers ruled beside it. */

.k-ed { display: grid; gap: var(--k-s-11); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .k-ed { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k-s-12); } }
.k-ed__t { font-size: var(--k-fs-h2); margin-block-end: var(--k-s-7); }
.k-ed__b p { max-width: 62ch; line-height: var(--k-lh-body); }
.k-ed__b p + p { margin-block-start: var(--k-s-6); }
.k-ed__b h3 { font-size: var(--k-fs-h3); margin-block-start: var(--k-s-9); margin-block-end: var(--k-s-4); }

.k-princ { display: grid; gap: var(--k-s-5) var(--k-s-8); grid-template-columns: max-content minmax(0, 1fr); margin-block-start: var(--k-s-8); padding-block-start: var(--k-s-7); border-block-start: 1px solid var(--k-line-strong); }
.k-princ dt { font-weight: var(--k-w-strong); font-size: var(--k-fs-ui); }
.k-princ dd { margin: 0; font-size: var(--k-fs-small); color: var(--k-text-secondary); line-height: 1.6; }

.k-faq { display: grid; }
.k-faq__q { border-block-end: 1px solid var(--k-line-strong); }
.k-faq__q:first-child { border-block-start: 1px solid var(--k-line-strong); }
.k-faq__q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-s-6);
  min-height: 56px;
  padding-block: var(--k-s-5);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-strong);
  cursor: pointer;
  list-style: none;
  transition: color var(--k-dur-state) var(--k-ease-state);
}
.k-faq__q summary::-webkit-details-marker { display: none; }
.k-faq__q summary:hover { color: var(--k-accent); }
.k-faq__q summary svg { width: 16px; height: 16px; flex: none; transition: transform var(--k-dur-state) var(--k-ease-state); }
.k-faq__q[open] summary svg { transform: rotate(180deg); }
.k-faq__a { padding-block-end: var(--k-s-7); font-size: var(--k-fs-body); color: var(--k-text-secondary); line-height: var(--k-lh-body); max-width: 60ch; }
.k-faq__a a { color: var(--k-accent); text-underline-offset: 3px; }
.k-faq__foot { margin-block-start: var(--k-s-8); }
.k-faq__foot a { color: var(--k-accent); text-underline-offset: 3px; }

/* ========================================================= 9. NEWSLETTER ==
   The theme's footer band, as a home section the owner can move or turn
   off.  Its inner markup and classes are the footer's (components.css), so it
   looks the same wherever it sits. */

.k-newsband { background: var(--k-bg-dark); color: var(--k-text-on-dark); }