<?php if (!empty($pageContent)): ?>
    <article class="list-intro">
        <?= $pageContent ?>
    </article>
<?php endif; ?>

<section class="brochure-grid-wrapper">
    <div class="brochure-grid">
        <?php foreach ($items as $item): ?>
            <article>
                <?php if ($item['cover']): ?>
                    <a href="<?= htmlspecialchars($item['url']) ?>">
                        <img src="<?= htmlspecialchars($item['cover']) ?>" alt="<?= htmlspecialchars($item['title']) ?>">
                    </a>
                <?php endif; ?>
                <h1>
                    <a href="<?= htmlspecialchars($item['url']) ?>">
                        <?= htmlspecialchars($item['title']) ?>
                    </a>
                </h1>
                <?php if (($metadata['show_date'] ?? true) && !empty($item['date'])): ?>
                    <p><?= htmlspecialchars($item['date']) ?></p>
                <?php endif; ?>
                <?php if ($item['summary']): ?>
                    <p><?= htmlspecialchars($item['summary']) ?></p>
                <?php endif; ?>
                <div class="brochure-actions">
                    <?php if (!empty($item['pdf'])): ?>
                        <a href="<?= htmlspecialchars($item['pdf']) ?>" class="btn-download" download>Last ned PDF</a>
                    <?php endif; ?>
                    <a href="<?= htmlspecialchars($item['url']) ?>" class="btn-read-more">Les mer</a>
                </div>
            </article>
        <?php endforeach; ?>
    </div>
</section>

<style>
main > section.brochure-grid-wrapper {
  margin-top: 1.3em;

  .brochure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 45%, 20rem), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
  }

  .brochure-grid > article {
    background-color: white;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    > :not(img, a) {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    h1 {
      margin-top: 1rem;
      font-size: clamp(1.5rem, 4vw, 2rem);
    }

    .brochure-actions {
      margin-top: auto;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      padding-bottom: 1rem;

      a {
        margin-top: 1.3rem;
        border-radius: 1rem;
        background-color: var(--color-grey);
        padding: 0.35rem 1rem;
        color: white;
        text-decoration: none;

        &:hover {
          background-color: var(--color-green);
          color: white;
        }

        &:focus {
          outline: 0.1rem var(--color-green) solid;
          color: var(--color-grey);
          background-color: white;
        }
      }
    }
  }
}
</style>
