/* app/static/css/layouts/magazine.css */
/* Magazine Layout Specific CSS using base variables */

/* --- Base Magazine Styling --- */
/* Remove base card styling previously here - handled by component + theme */
/* .layout-magazine .card { ... } */

/* --- Hide Hero Section by Default --- */
/* Variants like hero.css will override this */
.layout-magazine .hero-section {
  display: none;
  position: relative;
}

/* --- Magazine Grid Structure --- */
.layout-magazine .card-grid--dynamic-layout {
  display: grid;
  gap: var(--spacing-lg); /* Use spacing variable, maybe larger for magazine */
  grid-template-columns: 1fr; /* Mobile: Single column */
}

/* --- Load More Button --- */
.layout-magazine .load-more {
  /* Scope to layout */
  text-align: center;
  margin-top: var(--spacing-lg);
}

.layout-magazine .load-more__button {
  /* Use button variables for consistency */
  display: inline-block;
  padding: var(--button-padding-y) var(--button-padding-x);
  background-color: var(--button-primary-background);
  color: var(--button-primary-color);
  border: var(--button-border-width) solid var(--button-primary-border-color);
  border-radius: var(--button-border-radius);
  font-size: var(--button-font-size);
  font-family: var(--button-font-family);
  font-weight: var(--font-weight-bold); /* Ensure bold */
  line-height: var(--button-line-height);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  user-select: none;
  transition: var(--button-transition);
}

.layout-magazine .load-more__button:hover {
  background-color: var(--button-primary-background-hover);
  border-color: var(--button-primary-border-color-hover);
  color: var(
    --button-primary-color
  ); /* Assuming hover doesn't change text color */
}

/* --- Responsive Grid & Card Style Adjustments --- */

/* Tablet View (768px+) */
@media (min-width: 768px) {
  .layout-magazine .card-grid--dynamic-layout {
    grid-template-columns: repeat(2, 1fr); /* Two columns */
  }

  /* Style title specifically for the first card on tablet */
  /* Note: This applies direct color, might be better handled by theme/variant */
  .layout-magazine .card-grid--dynamic-layout > .slot:first-child .card__title {
    /* color: var(--color-accent); */ /* Reconsider if this is truly layout-specific */
  }
}

/* Desktop View (1024px+) */
@media (min-width: 1024px) {
  .layout-magazine .card-grid--dynamic-layout {
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: auto auto; */ /* Let content define row height */
    grid-auto-rows: auto;
  }

  /* --- Grid Placement Rules --- */
  /* Lead item */
  .layout-magazine .card-grid--dynamic-layout > .slot:first-child {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  /* Second item */
  .layout-magazine .card-grid--dynamic-layout > .slot:nth-child(2) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  /* Third item */
  .layout-magazine .card-grid--dynamic-layout > .slot:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }
  /* Subsequent items flow automatically */

  /* --- Card 1: Background image mode --- */
  .layout-magazine .card-grid--dynamic-layout > .slot:first-child > .card {
    --card-content-justify: flex-end;
    --card-min-height: 400px;
    height: 100%;
    border: none;
    background-color: var(--color-gray-700);
    box-shadow: none;
    color: var(--color-white);
    overflow: hidden;
  }
  .layout-magazine
    .card-grid--dynamic-layout
    > .slot:first-child
    .card__image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    aspect-ratio: unset;
  }
  .layout-magazine .card-grid--dynamic-layout > .slot:first-child .card__image {
    opacity: 0.8;
  }
  .layout-magazine .card-grid--dynamic-layout > .slot:first-child > .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
  }
  .layout-magazine
    .card-grid--dynamic-layout
    > .slot:first-child
    .card__content {
    position: relative;
    z-index: 3;
    background-color: transparent;
    height: 100%;
    color: var(--color-white);
  }
  .layout-magazine .card-grid--dynamic-layout > .slot:first-child .card__title,
  .layout-magazine
    .card-grid--dynamic-layout
    > .slot:first-child
    .card__description,
  .layout-magazine
    .card-grid--dynamic-layout
    > .slot:first-child
    .card__category,
  .layout-magazine .card-grid--dynamic-layout > .slot:first-child .card__meta {
    color: var(--color-white);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  }
  .layout-magazine
    .card-grid--dynamic-layout
    > .slot:first-child
    .card__title
    a {
    color: inherit;
  }
  .layout-magazine
    .card-grid--dynamic-layout
    > .slot:first-child
    .card__title
    a:hover {
    text-decoration: underline;
  }

  /* --- Cards 2-3: Horizontal mode --- */
  .layout-magazine .card-grid--dynamic-layout > .slot:nth-child(2),
  .layout-magazine .card-grid--dynamic-layout > .slot:nth-child(3) {
    align-self: start;
  }
  .layout-magazine .card-grid--dynamic-layout > .slot:nth-child(2) > .card,
  .layout-magazine .card-grid--dynamic-layout > .slot:nth-child(3) > .card {
    --card-image-width: 35%;
    --card-content-justify: center;
    --card-line-clamp: 2;
    flex-direction: row;
    align-items: stretch;
  }
  .layout-magazine
    .card-grid--dynamic-layout
    > .slot:nth-child(2)
    .card__image-container,
  .layout-magazine
    .card-grid--dynamic-layout
    > .slot:nth-child(3)
    .card__image-container {
    flex: 0 0 var(--card-image-width);
    aspect-ratio: unset;
    height: auto;
  }
  .layout-magazine
    .card-grid--dynamic-layout
    > .slot:nth-child(2)
    .card__content,
  .layout-magazine
    .card-grid--dynamic-layout
    > .slot:nth-child(3)
    .card__content {
    flex: 1 1 auto;
  }
  .layout-magazine .card-grid--dynamic-layout > .slot:nth-child(2) .card__meta,
  .layout-magazine .card-grid--dynamic-layout > .slot:nth-child(3) .card__meta {
    margin-top: var(--spacing-sm);
    padding-top: 0;
  }
} /* End Desktop Media Query */