/* ==========================================================================
   onesta/post-list – BEM スタイル
   ========================================================================== */

.onesta-post-list {
  --onesta-post-list-gap: var(--wp--preset--spacing--50, 1.5rem);

  container-type: inline-size;
  container-name: onesta-post-list;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  padding-block: clamp(1.5rem, 5vi, var(--wp--preset--spacing--60, 3rem));

  /* Grid layout */
}

.onesta-post-list .onesta-post-list__grid {
    --onesta-post-list-item-min: 100%;

    display: grid;
    gap: var(--onesta-post-list-gap);
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--onesta-post-list-item-min)), 1fr)
    );
    list-style: none;
    margin: 0;
    padding-block: 0;
    padding-inline: clamp(0.75rem, 2vi, var(--wp--preset--spacing--40, 1.5rem));
  }

.onesta-post-list .onesta-post-list__item {
    min-inline-size: 0;
  }

/* Column modifier classes */

.onesta-post-list.onesta-post-list--cols-1 {
    --onesta-post-list-medium-target: 100%;
    --onesta-post-list-wide-target: 100%;
  }

.onesta-post-list.onesta-post-list--cols-2 {
    --onesta-post-list-medium-target: calc(
      (100% - var(--onesta-post-list-gap)) / 2
    );
    --onesta-post-list-wide-target: calc(
      (100% - var(--onesta-post-list-gap)) / 2
    );
  }

.onesta-post-list.onesta-post-list--cols-3 {
    --onesta-post-list-medium-target: calc(
      (100% - var(--onesta-post-list-gap)) / 2
    );
    --onesta-post-list-wide-target: calc(
      (100% - var(--onesta-post-list-gap) - var(--onesta-post-list-gap)) / 3
    );
  }

.onesta-post-list.onesta-post-list--cols-4 {
    --onesta-post-list-medium-target: calc(
      (100% - var(--onesta-post-list-gap)) / 2
    );
    --onesta-post-list-wide-target: calc(
      (
          100% - var(--onesta-post-list-gap) - var(--onesta-post-list-gap) -
            var(--onesta-post-list-gap)
        ) / 4
    );
  }

/* Card */

.onesta-post-list .onesta-post-list__card {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    background-color: var(--wp--preset--color--base-100, #fff);
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
      0 1px 4px rgb(0 0 0 / 0.08),
      0 4px 16px rgb(0 0 0 / 0.04);
    transition:
      box-shadow var(--onesta-duration) ease,
      transform var(--onesta-duration) ease;
  }

.onesta-post-list .onesta-post-list__card:hover {
    box-shadow:
      0 4px 12px rgb(0 0 0 / 0.12),
      0 8px 32px rgb(0 0 0 / 0.08);
    transform: translateY(-2px);
  }

/* Thumbnail */

.onesta-post-list .onesta-post-list__thumb-link {
    display: block;
    overflow: hidden;
  }

.onesta-post-list .onesta-post-list__thumb {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--onesta-duration) ease;
  }

.onesta-post-list .onesta-post-list__card:hover .onesta-post-list__thumb {
    transform: scale(1.04);
  }

/* Card body */

.onesta-post-list .onesta-post-list__body {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    gap: 0.5rem;
    padding: var(--wp--preset--spacing--40, 1.25rem);
    flex: 1;
  }

/* Date */

.onesta-post-list .onesta-post-list__date {
    font-size: var(--wp--preset--font-size--small, 0.8125rem);
    color: var(--wp--preset--color--neutral-600, #4b5563);
    font-family: var(--wp--preset--font-family--body, sans-serif);
  }

/* Title */

.onesta-post-list .onesta-post-list__title {
    font-family: var(--wp--preset--font-family--heading, sans-serif);
    font-size: clamp(
      0.95rem,
      0.9rem + 0.35vi,
      var(--wp--preset--font-size--medium, 1rem)
    );
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    overflow-wrap: anywhere;
  }

.onesta-post-list .onesta-post-list__title a {
    color: var(--wp--preset--color--base-content, #111827);
    text-decoration: none;
  }

.onesta-post-list .onesta-post-list__title a:hover {
    color: var(--onesta-color-primary-readable, #1d4ed8);
    text-decoration: underline;
  }

.onesta-post-list .onesta-post-list__title a:focus-visible {
    outline: 2px solid var(--onesta-color-primary-readable, #1d4ed8);
    outline-offset: 3px;
  }

/* Excerpt */

.onesta-post-list .onesta-post-list__excerpt {
    font-family: var(--wp--preset--font-family--body, sans-serif);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    color: var(--wp--preset--color--muted, #6b7280);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

/* ── List layout ── */

.onesta-post-list.onesta-post-list--list .onesta-post-list__grid {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--30, 1rem);
  }

.onesta-post-list.onesta-post-list--list .onesta-post-list__card {
    flex-direction: column;
    border-radius: 8px;
    box-shadow: none;
  }

.onesta-post-list.onesta-post-list--list .onesta-post-list__thumb-link {
    flex-shrink: 0;
    inline-size: 100%;
  }

.onesta-post-list.onesta-post-list--list .onesta-post-list__thumb {
    aspect-ratio: 4 / 3;
    block-size: 100%;
  }

/* Editor preview */

.onesta-post-list .onesta-post-list__preview {
    padding: 2rem;
    background: var(--wp--preset--color--base-200, #f3f4f6);
    border: 2px dashed var(--wp--preset--color--base-300, #d1d5db);
    border-radius: 8px;
    text-align: center;
  }

.onesta-post-list .onesta-post-list__preview-note {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--wp--preset--color--muted, #6b7280);
  }

.onesta-post-list .onesta-post-list__preview-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--wp--preset--color--neutral-600, #4b5563);
  }

@supports (padding: 1cqi) {

.onesta-post-list {
    padding-block: clamp(
      1.5rem,
      5cqi,
      var(--wp--preset--spacing--60, 3rem)
    );
}

    .onesta-post-list .onesta-post-list__grid {
      padding-inline: clamp(
        0.75rem,
        2cqi,
        var(--wp--preset--spacing--40, 1.5rem)
      );
    }

    .onesta-post-list .onesta-post-list__title {
      font-size: clamp(
        0.95rem,
        0.9rem + 0.35cqi,
        var(--wp--preset--font-size--medium, 1rem)
      );
    }
  }

/* Container-responsive enhancement */

@container onesta-post-list (inline-size >= 600px) {
    .onesta-post-list .onesta-post-list__grid {
      --onesta-post-list-item-min: max(
        10rem,
        var(--onesta-post-list-medium-target, 100%)
      );
    }

    .onesta-post-list.onesta-post-list--list .onesta-post-list__card {
      flex-direction: row;
    }

    .onesta-post-list.onesta-post-list--list .onesta-post-list__thumb-link {
      inline-size: 10rem;
    }
  }

@container onesta-post-list (inline-size >= 900px) {
    .onesta-post-list .onesta-post-list__grid {
      --onesta-post-list-item-min: max(
        11rem,
        var(--onesta-post-list-wide-target, 100%)
      );
    }
  }

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .onesta-post-list .onesta-post-list__card,.onesta-post-list .onesta-post-list__thumb {
      transition: none;
    }

    .onesta-post-list .onesta-post-list__card:hover {
      transform: none;
    }

    .onesta-post-list .onesta-post-list__card:hover .onesta-post-list__thumb {
      transform: none;
    }
  }