/**

 * Guest blog listing — modern card grid (v1.0.1)

 * Load only from guest/blog/index.blade.php (@push styles).

 * v1.0.1: whole-card link — no underline (overrides body.guest-area a:hover in bootstrap-overrides-mid-b).

 */

@layer capri-components {

  .guest-blog-index {

    --guest-blog-card-radius: var(--radius-xl, 1rem);

    --guest-blog-card-shadow: var(--shadow-md, 0 4px 6px -1px rgb(15 23 42 / 0.08));

    --guest-blog-card-shadow-hover: var(--shadow-xl, 0 20px 25px -5px rgb(15 23 42 / 0.1));

  }



  .guest-blog-index__hero {

    max-width: 42rem;

    margin-inline: auto;

    text-align: center;

    margin-bottom: var(--spacing-8, 2rem);

  }



  .guest-blog-index__eyebrow {

    display: inline-block;

    font-size: var(--font-size-xs, 0.75rem);

    font-weight: var(--font-weight-semibold, 600);

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--color-primary-600);

    margin-bottom: var(--spacing-2, 0.5rem);

  }



  .guest-blog-index__title {

    font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);

    font-weight: var(--font-weight-bold, 700);

    line-height: 1.2;

    letter-spacing: -0.02em;

    color: var(--text-primary);

    margin: 0 0 var(--spacing-3, 0.75rem);

  }



  .guest-blog-index__lead {

    margin: 0;

    font-size: var(--font-size-md, 1rem);

    line-height: 1.6;

    color: var(--text-secondary);

  }



  .guest-blog-index__breadcrumb {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: var(--spacing-2, 0.5rem);

    margin-bottom: var(--spacing-6, 1.5rem);

    font-size: var(--font-size-sm, 0.875rem);

  }



  .guest-blog-index__breadcrumb a {

    color: var(--text-secondary);

    text-decoration: none;

    border-radius: var(--radius-sm, 0.25rem);

    padding: 0.15rem 0.25rem;

    margin: -0.15rem -0.25rem;

    transition: color var(--transition-fast), background-color var(--transition-fast);

  }



  .guest-blog-index__breadcrumb a:hover {

    color: var(--color-primary-600);

    background: color-mix(in srgb, var(--color-primary-500) 8%, transparent);

  }



  .guest-blog-index__breadcrumb a:focus-visible {

    outline: 2px solid var(--color-primary-500);

    outline-offset: 2px;

  }



  .guest-blog-index__breadcrumb-sep {

    color: var(--text-muted);

    user-select: none;

  }



  .guest-blog-index__breadcrumb-current {

    color: var(--text-primary);

    font-weight: var(--font-weight-medium, 500);

  }



  .guest-blog-index__grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));

    gap: var(--spacing-6, 1.5rem);

    align-items: stretch;

  }



  .guest-blog-card {

    display: flex;

    flex-direction: column;

    height: 100%;

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: var(--guest-blog-card-radius);

    box-shadow: var(--guest-blog-card-shadow);

    overflow: hidden;

    transition:

      box-shadow var(--transition-normal),

      transform var(--transition-normal),

      border-color var(--transition-fast);

  }



  .guest-blog-card:hover {

    box-shadow: var(--guest-blog-card-shadow-hover);

    border-color: color-mix(in srgb, var(--color-primary-400) 35%, var(--border-color));

    transform: translateY(-2px);

  }



  @media (prefers-reduced-motion: reduce) {

    .guest-blog-card:hover {

      transform: none;

    }

  }



  .guest-blog-card__link {

    display: flex;

    flex-direction: column;

    height: 100%;

    color: inherit;

    text-decoration: none;

    outline: none;

  }



  /* Beat `body.guest-area a:not(...):hover { text-decoration: underline }` (bootstrap-overrides-mid-b). */

  body.guest-area .guest-blog-index a.guest-blog-card__link,

  body.guest-area .guest-blog-index a.guest-blog-card__link:visited {

    text-decoration: none;

  }



  body.guest-area .guest-blog-index a.guest-blog-card__link:hover,

  body.guest-area .guest-blog-index a.guest-blog-card__link:focus,

  body.guest-area .guest-blog-index a.guest-blog-card__link:active {

    text-decoration: none;

    color: inherit;

  }



  .guest-blog-card__link:focus-visible {

    outline: 2px solid var(--color-primary-500);

    outline-offset: 2px;

    border-radius: var(--guest-blog-card-radius);

  }



  .guest-blog-card__media {

    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: var(--bg-secondary);

  }



  .guest-blog-card__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform var(--transition-slow, 0.35s ease);

  }



  .guest-blog-card:hover .guest-blog-card__media img {

    transform: scale(1.04);

  }



  @media (prefers-reduced-motion: reduce) {

    .guest-blog-card:hover .guest-blog-card__media img {

      transform: none;

    }

  }



  .guest-blog-card__body {

    display: flex;

    flex-direction: column;

    flex: 1 1 auto;

    padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem) var(--spacing-5, 1.25rem);

    gap: var(--spacing-3, 0.75rem);

  }



  .guest-blog-card__meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--spacing-2, 0.5rem);

    font-size: var(--font-size-xs, 0.75rem);

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.06em;

    font-weight: var(--font-weight-semibold, 600);

  }



  .guest-blog-card__meta time {

    font-variant-numeric: tabular-nums;

  }



  .guest-blog-card__category {

    color: var(--color-primary-600);

  }



  .guest-blog-card__heading {

    font-size: var(--font-size-lg, 1.125rem);

    font-weight: var(--font-weight-semibold, 600);

    line-height: 1.35;

    letter-spacing: -0.015em;

    margin: 0;

    color: var(--text-primary);

    text-decoration: none;

  }



  .guest-blog-card__excerpt {

    margin: 0;

    flex: 1 1 auto;

    font-size: var(--font-size-sm, 0.875rem);

    line-height: 1.55;

    color: var(--text-secondary);

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

  }



  .guest-blog-card__cta {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    margin-top: var(--spacing-1, 0.25rem);

    font-size: var(--font-size-sm, 0.875rem);

    font-weight: var(--font-weight-semibold, 600);

    color: var(--color-primary-600);

  }



  .guest-blog-card__cta svg {

    flex-shrink: 0;

    transition: transform var(--transition-fast);

  }



  .guest-blog-card:hover .guest-blog-card__cta svg {

    transform: translateX(3px);

  }



  .guest-blog-index__empty {

    grid-column: 1 / -1;

    text-align: center;

    padding: var(--spacing-10, 2.5rem) var(--spacing-4, 1rem);

    border-radius: var(--radius-xl, 1rem);

    border: 1px dashed var(--border-color);

    background: var(--bg-secondary);

    color: var(--text-secondary);

  }



  .guest-blog-index__empty-title {

    font-size: var(--font-size-lg, 1.125rem);

    font-weight: var(--font-weight-semibold, 600);

    color: var(--text-primary);

    margin: 0 0 var(--spacing-2, 0.5rem);

  }

}