/* ============================================
   SantriDigitalPro — Mobile-First Refinements
   v2 Polish — Mobile UX Audit Fixes
   ============================================ */

/* ---- 1. Navbar: hide CTA on mobile (keeps 360px logo clean) ---- */
@media (max-width: 768px) {
  #nav-cta { display: none; }
}

/* ---- 2. Card type visual distinction via colored left border ---- */
/* Uses :has() — Chrome 105+, Safari 15.4+, Firefox 121+ */
.card:has(.badge--sdp)    { border-left: 3px solid var(--badge-sdp-text); }
.card:has(.badge--app)    { border-left: 3px solid var(--badge-app-text); }
.card:has(.badge--produk) { border-left: 3px solid var(--badge-produk-text); }

/* ---- 3. Full-card tap area for material cards ---- */
/* card__link::before anchors to .material-card (position:relative containing block) */
.material-card { cursor: pointer; }
.material-card .card__link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
}
.material-card .card__meta,
.material-card .card__title,
.material-card .card__desc,
.material-card .card__tags,
.material-card .card__footer,
.material-card .card__link {
  position: relative;
  z-index: 1;
}

/* ---- 4. Chips: bigger tap targets ---- */
.chip {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.chip--active {
  box-shadow: 0 1px 5px rgba(26,122,110,0.2);
}

/* Filter chips: horizontal scroll single row on mobile */
@media (max-width: 768px) {
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
    /* Right-edge fade hints at more chips to scroll */
    -webkit-mask-image: linear-gradient(to right, black 0%, black 86%, transparent 100%);
    mask-image:         linear-gradient(to right, black 0%, black 86%, transparent 100%);
  }
  .filter-chips::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
}

/* ---- 5. Search: taller touch target + vertical stack on mobile ---- */
.search-bar__input { min-height: 48px; }

@media (max-width: 640px) {
  .materi-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .materi-toolbar .search-bar { max-width: 100%; }
  .count-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: right;
  }
}

/* ---- 6. Beginner block: stack vertically on mobile ---- */
@media (max-width: 640px) {
  .beginner-block {
    padding: var(--space-6);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    border-radius: var(--radius-xl);
  }
  .beginner-block .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}

/* ---- 7. Touch interaction model ---- */
/* Suppress hover animations on touch — use :active instead */
@media (hover: none) and (pointer: coarse) {

  /* Cards */
  .card:hover { transform: none; box-shadow: none; border-color: var(--border); }
  .card:has(.badge--sdp):hover    { border-left-color: var(--badge-sdp-text); }
  .card:has(.badge--app):hover    { border-left-color: var(--badge-app-text); }
  .card:has(.badge--produk):hover { border-left-color: var(--badge-produk-text); }
  .card:hover .card__title { color: var(--text-primary); }
  .card:active { background: var(--bg-card-hover); transition: background 80ms ease; }

  /* Buttons */
  .btn:hover { transform: none; box-shadow: none; }
  .btn--primary:hover   { background: var(--accent); border-color: var(--accent); }
  .btn--secondary:hover { background: transparent; }
  .btn--ghost:hover     { background: transparent; color: var(--text-secondary); border-color: var(--border); }
  .btn:active { opacity: 0.82; transform: scale(0.97); transition: transform 80ms ease, opacity 80ms ease; }
  .btn--primary:active  { background: var(--accent-hover); }

  /* Chips */
  .chip:hover                     { border-color: var(--border); color: var(--text-secondary); background: var(--bg-card); }
  .chip--active:hover             { background: var(--accent); color: white; border-color: var(--accent); }
  .chip:active:not(.chip--active) { background: var(--accent-muted); color: var(--accent); border-color: var(--accent); }

  /* Audience path cards */
  .audience-card:hover { transform: none; box-shadow: none; border-color: var(--border); }
  .audience-card:hover .audience-card__icon     { background: var(--accent-light); }
  .audience-card:hover .audience-card__icon svg { color: var(--accent); }
  .audience-card:hover .audience-card__cta      { gap: var(--space-2); }
  .audience-card:active { background: var(--bg-card-hover); border-color: var(--accent); transition: background 80ms ease; }

  /* Link hub cards */
  .link-card:hover { transform: none; box-shadow: none; border-color: var(--border); }
  .link-card:hover .link-card__icon     { background: var(--accent-light); }
  .link-card:hover .link-card__icon svg { color: var(--accent); }
  .link-card:hover .link-card__arrow    { transform: none; color: var(--text-muted); }
  .link-card:active { background: var(--bg-card-hover); border-color: var(--accent); transition: background 80ms ease; }

  /* Article prev/next */
  .article-nav__item:hover { transform: none; box-shadow: none; border-color: var(--border); }
  .article-nav__item:active { background: var(--bg-card-hover); border-color: var(--accent); }

  /* Mini cards in mulai-di-sini */
  .mini-card:hover { transform: none; border-color: var(--border); }
  .mini-card:active { border-color: var(--accent); background: var(--bg-card-hover); transition: background 80ms ease; }
  .mini-card:hover .mini-card__icon { background: var(--accent-muted); }
  .mini-card:hover .mini-card__icon svg { color: var(--accent); }

  /* Audience buttons */
  .audience-btn:hover { border-color: var(--border); color: var(--text-secondary); background: var(--bg-secondary); }
  .audience-btn:active { border-color: var(--accent); color: var(--accent); background: var(--accent-muted); transition: background 80ms ease; }

  /* TOC items */
  .mds-toc__item:hover { background: transparent; color: var(--text-muted); }
  .mds-toc__item:active { background: var(--accent-muted); color: var(--accent); }

  /* Audience bar links */
  .mds-audience-bar__link:hover { border-color: var(--border); color: var(--text-secondary); background: var(--bg-secondary); }
  .mds-audience-bar__link:active { border-color: var(--accent); color: var(--accent); background: var(--accent-muted); transition: background 80ms ease; }
}

/* ---- 8. Article nav: adequate tap height on mobile ---- */
@media (max-width: 640px) {
  .article-nav { margin-top: var(--space-8); padding-top: var(--space-6); }
  .article-nav__item { padding: var(--space-4) var(--space-5); min-height: 80px; }
  .article-nav__title { font-size: var(--text-sm); }
}

/* ---- 9. CTA banner: full-width stacked actions on mobile ---- */
@media (max-width: 640px) {
  .cta-banner { padding: var(--space-8) var(--space-6); border-radius: var(--radius-xl); gap: var(--space-6); }
  .cta-banner__actions { width: 100%; flex-direction: column; }
  .cta-banner__actions .btn { width: 100%; justify-content: center; min-height: 48px; }
}

/* ---- 10. Footer: compact vertical rhythm on mobile ---- */
@media (max-width: 640px) {
  .footer { padding: var(--space-10) 0 var(--space-6); }
  .footer__grid { gap: var(--space-6); }
}

/* ---- 11. Mobile nav: active link state ---- */
.mobile-nav__link--active {
  color: var(--accent);
  background: var(--accent-muted);
  font-weight: var(--weight-semibold);
}

/* ---- 12. Reduced motion accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================
   PHASE 2 REFINEMENTS
   ============================================ */

/* ---- P2-1. Article body: handle long URLs gracefully ---- */
.article-body a {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ---- P2-2. Article back-to-archive link ---- */
.article-bottom-nav {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--divider);
}
.article-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-2) 0;
  transition: color var(--transition-fast);
}
.article-back-link:hover { color: var(--accent); }
.article-back-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.article-nav { margin-top: var(--space-6); }

/* ---- P2-3. Why-section on mobile: icon-grid, no desc ---- */
/* The icon + title 2-col grid is cleaner than text-heavy 1-col */
@media (max-width: 640px) {
  .why-item__desc { display: none; }
  .why-item {
    align-items: center;
    text-align: center;
    gap: var(--space-2);
  }
  .why-item__icon {
    width: 40px; height: 40px;
    margin: 0 auto;
  }
  .why-item__title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 100%;
  }
}

/* ---- P2-4. Mulai-di-sini: mobile audience shortcut bar ---- */
/* Hidden on desktop (sidebar is visible), shown on mobile/tablet */
.mds-audience-bar { display: none; }

@media (max-width: 1024px) {
  .mds-audience-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-8);
  }
  .mds-audience-bar__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--accent);
  }
  .mds-audience-bar__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }
  .mds-audience-bar__link {
    display: block;
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    text-align: center;
    line-height: 1.35;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  }
  .mds-audience-bar__link:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-muted);
  }
}

/* ---- P2-5. Audience-btn: ensure it works as anchor too ---- */
a.audience-btn {
  display: block;
  text-decoration: none;
  text-align: left;
}

/* ---- P2-6. Focus states: keyboard navigation is visible and clean ---- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- P2-7. Dark mode: soften card left-border saturation ---- */
/* In dark mode, bright badge colors as borders are too vibrant */
[data-theme="dark"] .card:has(.badge--sdp)    { border-left-color: rgba(52, 201, 183, 0.6); }
[data-theme="dark"] .card:has(.badge--app)    { border-left-color: rgba(129, 140, 248, 0.6); }
[data-theme="dark"] .card:has(.badge--produk) { border-left-color: rgba(252, 211, 77, 0.5); }

/* ---- P2-8. Article page-header: slightly warmer on mobile ---- */
@media (max-width: 640px) {
  .article-page-header {
    padding: var(--space-8) 0 var(--space-6);
  }
  .article-header__meta {
    margin-bottom: var(--space-3);
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .article-tags {
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
}



/* ---- P2-10. Materi beginner-block: accent left stripe ---- */
.beginner-block {
  border-left: 3px solid var(--accent);
}

/* ---- P2-11. Coming-soon page: make it feel intentional not abandoned ---- */
.coming-soon {
  text-align: left;
}
@media (max-width: 640px) {
  .coming-soon {
    padding: var(--space-6) 0;
  }
  .coming-soon__icon {
    margin-left: 0;
    margin-right: auto;
  }
  .coming-soon__title,
  .coming-soon__desc {
    text-align: left;
  }
}