/*
 * Homepage responsive, hover, and reduced-motion styles.
 *
 * Moved equivalently from index.html during HOMEUX-Step 3. Keep these rules
 * last in the homepage CSS cascade.
 */

@media (hover: hover) {
  .btn:hover,
  .toggle-btn:hover,
  .hero-tool-link:hover {
    background: rgba(255,253,248,.96);
    border-color: rgba(36,79,91,.34);
    box-shadow: 0 14px 30px rgba(60,45,25,.09);
  }
  .btn-primary:hover,
  .btn:not(.secondary):not(.btn-secondary):not(.btn-quiet):hover {
    background: #1f4550;
    color: #fffaf0;
  }
  .btn-quiet:hover {
    background: rgba(36,79,91,.075);
    border-color: rgba(36,79,91,.22);
    color: #244f5b;
  }
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(60,45,25,.13);
    border-color: rgba(138, 90, 43, .34);
  }
  .route-card:hover {
    transform: translateY(-2px);
    background: rgba(255,253,248,.86);
    border-color: rgba(36,79,91,.22);
    box-shadow: 0 16px 34px rgba(60,45,25,.09);
  }
  .latest-card:hover {
    transform: translateY(-2px);
    border-color: rgba(36,79,91,.28);
    box-shadow: 0 18px 38px rgba(60,45,25,.11);
  }
  .latest-card:hover .primary-link {
    background: var(--read-hover);
    border-color: var(--read-strong);
  }
  .primary-link:hover {
    background: var(--read-hover);
    border-color: var(--read-strong);
  }
  .compact-entry:hover,
  .series-child:hover,
  .result-item:hover {
    background: rgba(255,253,248,.98);
    border-color: rgba(36,79,91,.22);
  }
  .compact-entry:hover .entry-arrow,
  .series-child:hover .entry-arrow,
  .result-item:hover .result-arrow {
    background: var(--read-hover);
    border-color: var(--read-strong);
  }
  .category-toggle:hover,
  .series-toggle:hover {
    background: rgba(36,79,91,.055);
  }
}

@media (max-width: 980px) {
  .grid, .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-actions { grid-template-columns: 1fr; }
  .quick-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 22px, var(--max)); padding-top: 12px; }
  .hero { border-radius: 28px; padding: 28px 20px; }
  .hero::after { width: 190px; height: 190px; right: -92px; bottom: -92px; opacity: .78; }
  h1 { font-size: clamp(2.05rem, 12vw, 3rem); letter-spacing: -.05em; }
  .lead { font-size: 1rem; line-height: 1.72; }
  .hero-actions { grid-template-columns: 1fr; gap: 9px; margin-top: 19px; }
  .hero-action-group--primary { padding: 10px; border-radius: 20px; }
  .hero-primary-actions,
  .hero-secondary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .btn { width: 100%; min-height: 48px; padding-inline: 12px; }
  .btn-quiet { min-height: 44px; font-size: .9rem; }
  .hero-tool-strip { gap: 6px; padding: 8px 9px; border-radius: 16px; }
  .hero-tool-label { width: 100%; }
  .hero-tool-link { flex: 1 1 calc(50% - 6px); min-height: 38px; padding-inline: 8px; }
  .quick-route-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 18px; }
  .latest-grid { grid-template-columns: 1fr; gap: 11px; }
  .latest-card { min-height: 0; }
  .latest-controls { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .latest-control-btn { width: 100%; min-height: 46px; }
  .route-card { min-height: 0; padding: 13px 12px; border-radius: 18px; }
  .hero-stats { gap: 7px; }
  .hero-stats span { width: 100%; justify-content: space-between; }
  .section-block { margin-top: 18px; border-radius: 24px; padding: 17px 14px; }
  .section-head { display: block; margin-bottom: 13px; }
  .section-actions { justify-content: flex-start; margin-top: 9px; }
  .mini-toggle { min-height: 44px; padding-inline: 13px; }
  .primary-link-row { width: 100%; }
  .primary-link { width: 100%; }
  .section-title { font-size: 1.55rem; }
  .section-note { font-size: .94rem; line-height: 1.66; }
  .section-meta { margin-top: 9px; white-space: normal; }
  .toggle-btn { width: 100%; min-height: 48px; margin-top: 14px; }
  .search-panel { padding: 12px; }
  .toolbar { grid-template-columns: 1fr; }
  .count { padding-left: 4px; white-space: normal; }
  .grid, .category-grid, .explore-grid { grid-template-columns: 1fr; gap: 11px; }
  .card { min-height: 0; padding: 17px 15px 15px; }
  .card h2 { font-size: 1.22rem; }
  .card-footer { align-items: flex-start; flex-direction: column; gap: 6px; }
  .category-toggle { min-height: 116px; padding: 16px 14px; }
  .category-heading, .category-group-head, .display-category-toggle { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; }
  .category-group-head { padding: 15px 13px 13px; }
  .category-group-index { width: 40px; height: 40px; border-radius: 14px; }
  .display-category-list { padding: 11px; gap: 10px; }
  .display-category-toggle { padding: 13px 12px 11px; min-height: 72px; }
  .display-category-body { padding: 10px 10px 11px 13px; }
  .category-icon { width: 40px; height: 40px; border-radius: 14px; }
  .category-icon svg { width: 22px; height: 22px; }
  .category-legend { gap: 7px; padding: 9px 10px; font-size: .84rem; }
  .legend-item { white-space: normal; }
  .series-head { grid-template-columns: 32px minmax(0, 1fr); gap: 9px; }
  .series-icon { width: 32px; height: 32px; border-radius: 12px; }
  .category-panel { padding: 10px; }
  .compact-entry, .series-toggle, .series-child { grid-template-columns: 1fr; gap: 6px; }
  .compact-entry, .series-toggle { min-height: 60px; }
  .entry-arrow, .series-action { justify-self: start; white-space: normal; }
  .entry-arrow, .result-arrow { min-height: 38px; }
  .category-action { white-space: normal; }
  .result-item { grid-template-columns: 1fr; gap: 7px; }
  .result-arrow { justify-self: start; white-space: normal; }
}

@media (max-width: 380px) {
  .wrap { width: min(100% - 18px, var(--max)); }
  .hero { padding: 25px 17px; }
  .hero-primary-actions,
  .hero-secondary-actions { grid-template-columns: 1fr; }
  .section-block { padding: 15px 12px; }
  .card, .category-toggle, .compact-entry, .series-toggle, .result-item { padding-left: 12px; padding-right: 12px; }
}

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

/* HOMEUX-Step 6: keep the card hierarchy lighter on narrow screens. */
@media (max-width: 620px) {
  .route-card {
    box-shadow: 0 10px 24px rgba(60,45,25,.07), var(--home-card-inset-highlight);
  }
  .latest-card,
  .category-group-card,
  .display-category-card,
  .category-card,
  .series-overview-card {
    box-shadow: 0 9px 22px rgba(60,45,25,.055), var(--home-card-inset-highlight);
  }
  .compact-entry,
  .series-card,
  .series-child,
  .mini-link,
  .result-item,
  .guide {
    box-shadow: 0 5px 14px rgba(60,45,25,.04), var(--home-card-inset-highlight);
  }
}

/* HOMEUX-Step 7: category preview interaction and narrow-screen density. */
@media (hover: hover) {
  .category-preview-link:hover {
    transform: translateY(-1px);
    border-color: rgba(36,79,91,.22);
    background: rgba(255,253,248,.98);
    box-shadow: 0 10px 22px rgba(60,45,25,.06), var(--home-card-inset-highlight);
  }
}

@media (max-width: 620px) {
  .category-preview {
    margin: 0 10px 10px 52px;
    padding: 9px;
    border-radius: 16px;
  }
  .category-preview-head {
    margin-bottom: 7px;
    font-size: .78rem;
  }
  .category-preview-link {
    padding: 9px 10px;
  }
  .category-preview-link:nth-child(n+3) {
    display: none;
  }
  .category-preview-title {
    font-size: .92rem;
  }
  .category-preview-desc {
    font-size: .84rem;
    line-height: 1.5;
  }
}

@media (max-width: 380px) {
  .category-preview {
    margin-left: 12px;
  }
}

/* HOMEUX-Step 8: mobile density, touch comfort, focus, and motion refinement. */
@media (max-width: 430px) {
  .wrap {
    width: min(100% - 18px, var(--max));
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(48px, calc(42px + env(safe-area-inset-bottom)));
  }
  .hero {
    border-radius: 24px;
    padding: 24px 16px;
  }
  .kicker {
    font-size: .8rem;
  }
  h1 {
    margin-top: 15px;
    font-size: clamp(2rem, 11.6vw, 2.9rem);
    line-height: 1.07;
  }
  .lead {
    max-width: var(--home-mobile-readable-measure);
    font-size: .98rem;
    line-height: 1.72;
  }
  .hero-actions {
    margin-top: 17px;
  }
  .hero-action-label,
  .hero-tool-label {
    font-size: .74rem;
  }
  .hero-tool-link {
    min-height: var(--home-touch-target);
    padding-block: 8px;
    line-height: 1.35;
  }
  .quick-route-grid {
    margin-top: 16px;
  }
  .route-card strong,
  .latest-card h3,
  .display-category-title-line h4 {
    line-height: 1.34;
  }
  .latest-card {
    padding: 15px 14px;
    border-radius: 19px;
  }
  .latest-card h3 {
    margin-top: 9px;
    font-size: 1.08rem;
  }
  .latest-card p,
  .category-preview-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .latest-card p {
    -webkit-line-clamp: 3;
  }
  .category-preview-desc {
    -webkit-line-clamp: 2;
  }
  .category-group-head {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 14px 12px 12px;
  }
  .category-group-head h3 {
    font-size: 1.2rem;
  }
  .display-category-toggle {
    min-height: 76px;
    padding: 12px 11px 10px;
  }
  .display-category-action,
  .category-action,
  .series-action {
    min-height: var(--home-touch-target);
  }
  .category-preview {
    margin: 0 9px 10px 48px;
  }
  .category-preview-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .category-preview-head small {
    white-space: normal;
  }
  .category-preview-link {
    min-height: 64px;
  }
  .compact-entry,
  .series-child,
  .result-item,
  .mini-link {
    min-height: var(--home-touch-target);
  }
}

@media (max-width: 380px) {
  .hero-tool-link {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .category-preview {
    margin-left: 0;
    margin-right: 0;
  }
  .category-preview-meta {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .display-category-title-line {
    gap: 6px;
  }
  .display-category-title-line h4 {
    font-size: 1.01rem;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, [tabindex]):focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 3px;
  }
  .btn,
  .primary-link,
  .latest-control-btn,
  .category-preview-link,
  .compact-entry,
  .series-child,
  .mini-link {
    border: 1px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
  .btn:active,
  .hero-tool-link:active,
  .primary-link:active,
  .latest-card:active,
  .latest-control-btn:active,
  .display-category-toggle:active,
  .category-preview-link:active,
  .compact-entry:active,
  .series-child:active,
  .mini-link:active {
    transform: none !important;
  }
}