/* =============================================================
   Postulia — Load More button (assets/css/load-more.css)
   - Token-first (see tokens.css)
   - Centered, responsive, with busy/disabled states
   - Zero global overrides; scoped to .loadmore-wrap
   ============================================================= */

@layer components {
  /* Wrapper: centers the button and adds vertical rhythm */
  .loadmore-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--sp-9);
  }

  /* Button: respect theme tokens; primary look here */
  .loadmore-wrap .button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding-block: 12px;
    padding-inline: 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--action-primary-bg);
    background: linear-gradient(135deg, var(--action-primary-bg), var(--brand-500));
    color: var(--action-primary-fg);
    font-weight: var(--fw-semibold);
    line-height: 1;
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--dur-2) var(--ease-out),
      filter var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out),
      background var(--dur-2) var(--ease-out);
    text-decoration: none;
    min-inline-size: 180px;
  }

  /* Hover uses hover token; skip when disabled/busy */
  .loadmore-wrap .button:hover{
    background: linear-gradient(135deg, var(--action-primary-bg-hover), var(--brand-500));
    filter: brightness(1.02);
    box-shadow: var(--shadow-md);
  }
  .loadmore-wrap .button[aria-busy="true"]:hover,
  .loadmore-wrap .button:disabled:hover{
    background: linear-gradient(135deg, var(--action-primary-bg), var(--brand-500));
    filter: none;
    box-shadow: var(--shadow-sm);
  }

  .loadmore-wrap .button:active{
    transform: translateY(1px);
  }

  .loadmore-wrap .button:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 var(--ring-offset) #fff,
      0 0 0 calc(var(--ring-width) + var(--ring-offset)) var(--focus-ring-color);
  }

  /* Busy & disabled states */
  .loadmore-wrap .button[aria-busy="true"],
  .loadmore-wrap .button:disabled{
    opacity: .9;
    cursor: not-allowed;
    filter: saturate(.95);
  }

  /* Inline spinner when aria-busy is true (no extra markup) */
  .loadmore-wrap .button[aria-busy="true"]{
    position: relative;
    color: transparent;              /* hide label while loading */
  }
  .loadmore-wrap .button[aria-busy="true"]::after{
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    inline-size: 1em;
    block-size: 1em;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--action-primary-fg) 28%, transparent);
    border-inline-start-color: var(--action-primary-fg);
    animation: lm-spin .9s linear infinite;
  }
  @keyframes lm-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

  /* Mobile: comfortable width + centered */
  @media (max-width: 639.98px){
    .loadmore-wrap{
      margin-block: var(--sp-6);
      padding-inline: var(--gutter-xs);
    }
    .loadmore-wrap .button{
      inline-size: 100%;
      max-inline-size: min(420px, 100%);
      min-inline-size: 0; /* allow full fluid width */
    }
  }

  /* Medium screens: keep it snug */
  @media (min-width: 640px) and (max-width: 999.98px){
    .loadmore-wrap .button{
      min-inline-size: 220px;
    }
  }
}

/* a11y utility for live region */
@layer utilities {
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
  }
}

/* Inline notice above the button (errors, etc.) */
@layer components {
  .loadmore-notice{
    margin-block: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-default);
    background: var(--surface-2);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    text-align: center;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  @layer components {
    .loadmore-wrap .button{ transition: none; }
    .loadmore-wrap .button[aria-busy="true"]::after{ animation: none; }
  }
}