/* ============================================================
 * method-books section
 * Rendered from resources/views/components/sections/method-books.blade.php
 * ============================================================ */

.method-books {
      background: var(--color-ink-950, #0c0c0b);
      color: var(--color-parchment-200, #ebe0c8);
    }
    .method-books__inner {
      max-width: 82rem;
      margin-inline: auto;
      padding-inline: clamp(1.25rem, 4vw, 2.5rem);
      padding-block: clamp(3rem, 6vw, 5rem);
    }

    /* Header */
    .method-books__head {
      max-width: 50rem;
      margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
    }
    .method-books__h2 {
      font-family: var(--font-display-stack);
      font-weight: 400;
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1.06;
      letter-spacing: -0.015em;
      color: var(--color-parchment-200, #ebe0c8);
      margin: 0 0 1rem;
    }
    .method-books__lead {
      font-family: var(--font-body-stack);
      font-size: clamp(0.95rem, 1.05vw, 1.05rem);
      line-height: 1.7;
      color: color-mix(in oklch, var(--color-parchment-200, #ebe0c8) 75%, transparent);
      max-width: 62ch;
      margin: 0;
    }

    /* Book grid: 2 cols mobile → 4 cols desktop */
    .method-books__grid {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
    }
    @media (min-width: 40rem) {
      .method-books__grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (min-width: 60rem) {
      .method-books__grid { grid-template-columns: repeat(4, 1fr); }
    }

    .method-books__item {
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      height: 100%;
    }
    .method-books__cover-wrap {
      aspect-ratio: 7 / 10;
      overflow: hidden;
      background: color-mix(in oklch, var(--color-brass-400, #b89968) 8%, var(--color-ink-900, #161616));
      border: 1px solid color-mix(in oklch, var(--color-brass-400, #b89968) 18%, transparent);
    }
    .method-books__cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 400ms cubic-bezier(0.4,0,0.2,1);
    }
    .method-books__item:hover .method-books__cover { transform: scale(1.03); }

    .method-books__meta {
      min-width: 0;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
    }
    .method-books__vol {
      font-family: var(--font-body-stack);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--color-brass-400, #b89968);
      margin: 0 0 0.3rem;
    }
    .method-books__title {
      font-family: var(--font-display-stack);
      font-weight: 400;
      font-size: clamp(0.95rem, 1.2vw, 1.15rem);
      line-height: 1.3;
      color: var(--color-parchment-200, #ebe0c8);
      margin: 0 0 0.25rem;
    }
    .method-books__sub {
      font-family: var(--font-body-stack);
      font-size: 0.82rem;
      color: color-mix(in oklch, var(--color-parchment-200, #ebe0c8) 58%, transparent);
      margin: 0 0 0.5rem;
      line-height: 1.4;
    }
    /* Purchase button — solid brass, sits under each cover, aligned to bottom of card */
    .method-books__buy {
      align-self: flex-start;
      margin-top: auto;
      padding: 0.65rem 1.05rem;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      background: var(--color-brass-400, #b89968);
      color: var(--color-ink-900, #161616);
      font-family: var(--font-body-stack);
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      text-decoration: none;
      border: 1px solid transparent;
      transition: background-color 180ms ease, transform 180ms ease;
    }
    .method-books__buy:hover {
      background: var(--color-brass-300, #c9b086);
    }
    .method-books__buy:focus-visible {
      outline: 2px solid var(--color-brass-400, #b89968);
      outline-offset: 3px;
    }
    .method-books__buy-arrow {
      display: inline-block;
      transition: transform 200ms ease;
    }
    .method-books__buy:hover .method-books__buy-arrow { transform: translateX(3px); }

    /* Retailers */
    .method-books__retailers {
      margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
      padding-block-start: clamp(1.5rem, 2.5vw, 2rem);
      border-block-start: 1px solid color-mix(in oklch, var(--color-parchment-200, #ebe0c8) 10%, transparent);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.85rem 1.25rem;
    }
    .method-books__retailers-label {
      font-family: var(--font-body-stack);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: color-mix(in oklch, var(--color-parchment-200, #ebe0c8) 65%, transparent);
      margin: 0;
    }
    .method-books__retailer-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem 0.85rem;
    }

    /* Retailer buttons — real pill buttons in each brand's colour */
    .method-books__retailer-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.6rem 1rem;
      min-height: 44px;
      font-family: var(--font-body-stack);
      font-size: 0.85rem;
      line-height: 1;
      color: #fff;
      background: #2b2b2b;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      text-decoration: none;
      transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
    }
    .method-books__retailer-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.08);
      box-shadow: 0 6px 18px -8px rgba(0,0,0,0.55);
    }
    .method-books__retailer-btn:focus-visible {
      outline: 2px solid var(--color-brass-400, #b89968);
      outline-offset: 3px;
    }
    .method-books__retailer-arrow {
      opacity: 0.7;
      transition: transform 200ms ease;
    }
    .method-books__retailer-btn:hover .method-books__retailer-arrow { transform: translateX(3px); }
    .method-books__retailer-mark {
      display: block;
      height: 1.15rem;
      width: auto;
      color: #fff;
    }
    .method-books__retailer-wordmark {
      display: inline-block;
      line-height: 1;
    }

    /* Per-brand colours */
    .method-books__retailer-btn[data-brand="amazon"] {
      background: #131A22;
      color: #fff;
      border-color: rgba(255,153,0,0.35);
    }
    .method-books__retailer-btn[data-brand="lulu"] {
      background: #E11A2B;
      color: #fff;
      border-color: rgba(255,255,255,0.15);
    }
    .method-books__retailer-btn[data-brand="book-depository"],
    .method-books__retailer-btn[data-brand="the-book-depository"] {
      background: #2E7D46;
      color: #fff;
    }
    .method-books__retailer-btn[data-brand="barnes-noble"],
    .method-books__retailer-btn[data-brand="barnes-and-noble"] {
      background: #00704A;
      color: #fff;
    }

    @media (prefers-reduced-motion: reduce) {
      .method-books__cover { transition: none; }
    }