/* Home page (index.html): hero, then store sections + sidebar */
@layer pages {
  main.home { padding: 0; }
  .home-section { padding-block: 2.5rem; @media (width >= 640px) { padding-block: 3rem; } }

  /* ───────── Hero ───────── */
  .hero-home {
    position: relative;
    z-index: 2;                          /* suggestions float over the sections below */
    border-block-end: 1px solid var(--border);

    /* soft brand wash + a fading grid, both purely decorative */
    &::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      block-size: 18rem;
      background: linear-gradient(to bottom, color-mix(in oklch, var(--brand) 5%, transparent), transparent);
      pointer-events: none;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(to right, var(--border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border) 1px, transparent 1px);
      background-size: 56px 56px;
      opacity: .6;
      mask-image: radial-gradient(ellipse 60% 55% at 50% 0%, black, transparent 75%);
      pointer-events: none;
    }

    & .container { position: relative; z-index: 1; padding-block: 3rem; @media (width >= 640px) { padding-block: 4rem; } @media (width >= 1024px) { padding-block: 4.5rem; } }
    & .inner { display: flex; flex-direction: column; align-items: center; max-inline-size: 42rem; margin-inline: auto; text-align: center; }

    & h1 {
      margin-block-start: 1.5rem;
      font-size: 2.25rem;
      font-weight: 600;
      letter-spacing: -.025em;
      line-height: 1.1;
      text-wrap: balance;
      @media (width >= 640px) { font-size: 3rem; }
      @media (width >= 1024px) { font-size: 3.75rem; }
    }
    & .lead { margin-block-start: 1rem; max-inline-size: 36rem; font-size: 1rem; line-height: 1.7; color: var(--muted-foreground); text-wrap: balance; @media (width >= 640px) { font-size: 1.125rem; } }
  }

  /* "Appteka for Android → …" pill */
  .announce {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-inline-size: 100%;
    padding: .25rem .75rem .25rem .25rem;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--background);
    box-shadow: var(--shadow-sm);
    font-size: .875rem;
    transition: background-color .15s;
    &:hover { background: var(--accent); }
    &:hover > .icon { translate: 2px 0; }

    & .tag {
      display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0;
      padding: .125rem .5rem; border-radius: 99px;
      background: color-mix(in oklch, var(--brand) 10%, transparent);
      color: var(--brand); font-size: .75rem; font-weight: 500;
      & .icon { inline-size: .75rem; block-size: .75rem; }
    }
    & .text { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); @media (width >= 640px) { display: inline; } }
    & > .icon { inline-size: .875rem; block-size: .875rem; color: var(--muted-foreground); transition: translate .15s; }
  }

  .hero-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    inline-size: 100%;
    max-inline-size: 36rem;
    margin-block-start: 2rem;
    padding: .375rem .375rem .375rem 1rem;
    border: 1px solid var(--input);
    border-radius: .75rem;
    background: var(--background);
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
    &:has(input:focus-visible) { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent); }

    & > .icon { color: var(--muted-foreground); }
    & input {
      flex: 1;
      min-inline-size: 0;
      block-size: 2.5rem;
      font-size: 1rem;
      outline: none;
      &::placeholder { color: var(--muted-foreground); }
      &::-webkit-search-cancel-button { display: none; }
    }
    & .btn { border-radius: .5rem; padding-inline: 1.25rem; }
  }

  /* ═════════ Store sections — same language as the app / category pages ═════════ */
  .store { padding-block: 2rem 1rem; @media (width >= 640px) { padding-block: 2.5rem 1.5rem; } }
  .store-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* icon rows scroll instead of widening the column */
    gap: 2.5rem;
    align-items: start;
    @media (width >= 1024px) { grid-template-columns: minmax(0, 1fr) 300px; }
    @media (width >= 1280px) { grid-template-columns: minmax(0, 1fr) 320px; }
  }
  .store-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    @media (width >= 640px) { gap: 3rem; }
  }

  /* Section heading: title + "See all ›" (like the original home) */
  .store-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
    & h2 { display: flex; align-items: center; gap: .375rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; @media (width >= 640px) { font-size: 1.25rem; } }
  }
  .see-all {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    flex-shrink: 0;
    padding: .375rem .5rem;
    border-radius: .375rem;
    font-size: .875rem;
    font-weight: 500;
    transition: background-color .15s;
    &:hover { background: var(--accent); }
    [dir="rtl"] & .icon { scale: -1 1; }
  }

  /* App rows reuse the site's .app card; this only lays them out */
  .store-grid {
    display: grid;
    gap: .25rem 1.5rem;
    @media (width >= 640px)  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Row of big icons (Trending / Popular). Scrolls sideways when it doesn't fit */
  .icon-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(5.25rem, 1fr);
    gap: .25rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    margin-inline: -.5rem;
  }
  .icon-item {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .375rem;
    padding: .625rem .375rem;
    border-radius: .75rem;
    scroll-snap-align: start;
    text-align: center;
    transition: background-color .15s var(--ease);
    &:hover, &:focus-visible { background: var(--accent); outline: none; }
    &:hover .app-icon { scale: 1.03; }

    /* same grey letter icon as the list cards, a little larger */
    & .app-icon { inline-size: 64px; border-radius: 1rem; font-size: 26px; }
    & .name {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      font-size: .8125rem;
      font-weight: 500;
      letter-spacing: -.01em;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }
    & .sub { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
      & .icon { inline-size: .75rem; block-size: .75rem; }
      & .stars { --size: 10px; --gap: 1px; } }
  }
  /* Rank number on the top three — a quiet badge in the site's primary colour */
  .rank {
    position: absolute;
    inset-block-start: .375rem;
    inset-inline-start: calc(50% - 32px - .375rem);
    z-index: 1;
    display: grid;
    place-items: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: .25rem;
    border: 2px solid var(--background);
    border-radius: 99px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* ───────── Sidebar — styled like the app page's aside ───────── */
  .store-side {
    display: grid;
    gap: 1.5rem;
    align-content: start;
    @media (width >= 1024px) {
      position: sticky;
      inset-block-start: 5rem;
      padding-inline-start: 1.5rem;
      border-inline-start: 1px solid var(--border);
    }
    & > hr { block-size: 1px; border: 0; background: var(--border); }
    & h2 { font-size: .875rem; font-weight: 600; letter-spacing: -.025em; }
    & .side-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-end: .75rem;
      & .see-all { padding: .25rem .375rem; font-size: .75rem; } }
  }

  .side-cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .125rem .75rem;
    & a {
      display: flex;
      align-items: center;
      gap: .5rem;
      min-inline-size: 0;
      padding: .375rem .25rem;
      border-radius: .375rem;
      font-size: .8125rem;
      color: color-mix(in oklch, var(--foreground) 90%, transparent);
      & span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      & svg { inline-size: 14px; block-size: 14px; flex-shrink: 0; color: var(--muted-foreground); }
      &:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
    }
  }

  .top-list {
    display: grid;
    gap: .125rem;
    counter-reset: top;
    & a {
      display: grid;
      grid-template-columns: 1rem auto minmax(0, 1fr);
      align-items: center;
      gap: .75rem;
      padding: .375rem;
      margin-inline: -.375rem;
      border-radius: .5rem;
      counter-increment: top;
      transition: background-color .15s;
      &:hover { background: var(--accent); }
      &::before { content: counter(top); text-align: center; font-size: .8125rem; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
    }
    & .app-icon { inline-size: 40px; border-radius: .625rem; font-size: 17px; }
    & .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 600; letter-spacing: -.01em; }
    & .meta { display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums;
      & .icon { inline-size: .75rem; block-size: .75rem; } }
  }

  /* ───────── Hero: "/" hint, suggestions, quick tags ───────── */
  .hero-kbd {
    display: none;
    place-items: center;
    min-inline-size: 1.375rem;
    block-size: 1.375rem;
    border: 1px solid var(--border);
    border-radius: .3rem;
    font: 500 .75rem/1 var(--font-sans);
    color: var(--muted-foreground);
    @media (hover: hover) and (width >= 640px) { display: grid; }
    .hero-search:focus-within & { display: none; }
  }

  .hero-suggest {
    position: absolute;
    inset-block-start: calc(100% + .375rem);
    inset-inline: 0;
    z-index: 20;
    max-block-size: min(24rem, 60vh);
    overflow-y: auto;
    padding: .25rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--popover);
    box-shadow: var(--shadow-md);
    text-align: start;
    &[hidden] { display: none; }
  }
  .suggest-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .625rem .25rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--muted-foreground);
  }
  .suggest-clear { font-size: .75rem; color: var(--muted-foreground); &:hover { color: var(--foreground); text-decoration: underline; } }
  .suggest-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .4rem .625rem;
    border-radius: .5rem;
    font-size: .875rem;
    & > .icon { flex-shrink: 0; color: var(--muted-foreground); }
    & .app-icon { inline-size: 28px; border-radius: .5rem; font-size: 12px; }
    & .t { display: flex; align-items: baseline; gap: .5rem; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & small { font-size: .75rem; color: var(--muted-foreground); }
    &:hover, &[aria-selected="true"] { background: var(--accent); }
    &.all { margin-block-start: .25rem; border-block-start: 1px solid var(--border); border-radius: 0 0 .5rem .5rem; }
  }

  .hero-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-block-start: 1.25rem;
    & .chip { box-shadow: none; color: var(--muted-foreground); &:hover { color: var(--foreground); background: var(--accent); } }
  }

  /* ═════════ Plain sections: title, one muted line, and the controls on the right ═════════ */
  .store-head { align-items: center; }
  .store-title {
    min-inline-size: 0;
    & p { margin-block-start: .125rem; font-size: .8125rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }

  /* Scroll arrows — shown by home.js only when the row overflows */
  .row-nav {
    display: flex;
    gap: .25rem;
    flex-shrink: 0;
    &[hidden] { display: none; }
    & .btn:disabled { opacity: .35; pointer-events: none; }
    [dir="rtl"] & .icon { scale: -1 1; }
  }

  /* Underlined tabs (template .tab), sitting on a hairline under the heading */
  .home-tabs {
    margin-block: -.25rem .75rem;
    border-block-end: 1px solid var(--border);
    scrollbar-width: none;
    & .tab { block-size: 2.25rem; padding-inline: .625rem; }
    & .tab:first-child { margin-inline-start: -.625rem; }
  }
  .store-main [role="tabpanel"] { padding-block-start: 0; }

  /* Fade only the edge that still has content behind it */
  .icon-row {
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: .75rem; }
    --fade: 2.5rem;
    &[data-fade="end"]   { mask-image: linear-gradient(to right, black calc(100% - var(--fade)), transparent); }
    &[data-fade="start"] { mask-image: linear-gradient(to left,  black calc(100% - var(--fade)), transparent); }
    &[data-fade="both"]  { mask-image: linear-gradient(to right, transparent, black var(--fade), black calc(100% - var(--fade)), transparent); }
    [dir="rtl"] &[data-fade="end"]   { mask-image: linear-gradient(to left,  black calc(100% - var(--fade)), transparent); }
    [dir="rtl"] &[data-fade="start"] { mask-image: linear-gradient(to right, black calc(100% - var(--fade)), transparent); }
  }

  /* Top three in the brand colour, as on top.html */
  .icon-item:nth-child(-n + 3) .rank { background: var(--brand); color: var(--background); }
  .top-list a:nth-child(-n + 3)::before { color: var(--brand); }
}