/* ==========================================================================
   sections.css — HOMEPAGE & LISTING SECTIONS
   #trending-apps-section, #all-apps-section, #diwa-apps-section, #yono-apps-section
   ========================================================================== */

.page-section {
  padding-block: var(--section-spacing) 0;
}

.page-section:first-child,
.page-intro + .page-section {
  padding-top: 0;
}

/* Featured tray. Catalog sections below stay flat so the page is not one repeated box. */
#trending-apps-section {
  padding: var(--space-md);
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, color-mix(in srgb, var(--color-accent-primary) 32%, transparent), transparent 68%),
    radial-gradient(ellipse 50% 40% at 100% 100%, color-mix(in srgb, var(--color-accent-secondary) 14%, transparent), transparent 70%),
    var(--gradient-sheen),
    var(--color-bg-secondary);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

#trending-apps-section .section-header {
  margin-bottom: var(--space-md);
}

/* Title row: heading on the left, "View all" link on the right */
.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-lg);
}

.section-title {
  position: relative;
  padding-left: var(--space-sm);
}

/* Neon accent bar next to section titles */
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  border-radius: var(--radius-pill);
  background: var(--gradient-accent);
}

.section-description {
  max-width: var(--max-width-text);
  margin-top: var(--space-xs);
}

.section-view-all-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.section-view-all-link:hover,
.section-view-all-link:focus-visible {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   ALL APPS  —  #all-apps-section (DIWA list + YONO list)
   -------------------------------------------------------------------------- */
.app-category-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-xl);
}

.app-category-title::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-secondary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent-secondary) 70%, transparent);
}

#yono-apps-section .app-category-title::before {
  background: var(--color-accent-tertiary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent-tertiary) 70%, transparent);
}

.see-more-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

.see-more-button {
  min-width: min(100%, 16rem);
}

/* Category block inside #all-apps-section */
.app-category-block + .app-category-block {
  position: relative;
  margin-top: var(--section-spacing);
  padding-top: var(--space-xl);
}

.app-category-block + .app-category-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-divider);
}