/**
 * Module: Mixed Layout Styles
 */

/* ===================================
   MIXED LAYOUT MODULE
   =================================== */

.mod-mixed-layout {
  margin: var(--tcp-space-12) 0;
}

/* Wrapper */
.mixed-layout-wrapper {
  display: flex;
  gap: var(--tcp-space-8);
}

.mixed-layout-wrapper > *,
.large-content-wrapper > *,
.horizontal-posts-list > * {
  position: relative;
}

.mixed-layout-wrapper > *:not(:last-child)::after,
.large-content-wrapper > *:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--tcp-space-8) / -2);
  width: 1px;
  height: 100%;
  background-color: var(--tcp-gray-200);
}

.mixed-layout-wrapper > *:not(:last-child)::after {
  height: calc(100% - 24px - var(--tcp-space-6));
  top: calc(var(--tcp-space-6) + 24px);
}

.horizontal-posts-list > *:not(:first-child)::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--tcp-space-6) / -2);
  width: 100%;
  height: 1px;
  background-color: var(--tcp-gray-200);
}

/* Reversed order */
.mixed-layout-wrapper.reversed {
  flex-direction: row-reverse;
}

/* Large Section (3/4) - Contains featured square + horizontal list */
.mixed-layout-large {
  flex: 0 0 calc(75% - var(--tcp-space-4));
  max-width: calc(75% - var(--tcp-space-4));
  display: flex;
  flex-direction: column;
  gap: 0 var(--tcp-space-4);
}

/* Content wrapper for featured + horizontal list */
.large-content-wrapper {
  display: flex;
  gap: var(--tcp-space-8);
}

/* Small Column (1/4) */
.mixed-layout-small {
  flex: 0 0 calc(25% - var(--tcp-space-4));
  max-width: calc(25% - var(--tcp-space-4));
  display: flex;
  flex-direction: column;
  gap: 0 var(--tcp-space-4);
}

/* ===================================
   SMALL POSTS (1/4 Column)
   =================================== */

.small-posts {
  display: flex;
  flex-direction: column;
  gap: var(--tcp-space-6);
}

.small-post-item {
  display: flex;
  flex-direction: column;
}

.small-post-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: var(--tcp-space-3);
}

.small-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.small-post-image a:hover img {
  transform: scale(1.05);
}

.small-post-title {
  font-family: var(--tcp-font-display);
  font-size: var(--tcp-text-base);
  font-weight: 600;
  line-height: 1.3;
}

.small-post-title a {
  color: var(--tcp-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.small-post-title a:hover {
  color: var(--tcp-primary);
}

.small-post-date {
  font-family: var(--tcp-font-primary);
  font-size: var(--tcp-text-sm);
  color: var(--tcp-gray-500);
  font-style: italic;
  display: block;
}

.small-post-venue {
  font-size: var(--tcp-text-sm);
}

/* ===================================
   FEATURED SQUARE SECTION (Left Half)
   =================================== */

.featured-square-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--tcp-space-4);
}

.featured-square-item {
  display: flex;
  flex-direction: column;
}

.featured-square-image {
  width: 100%;
  aspect-ratio: 1 / 1; /* Square */
  overflow: hidden;
  margin-bottom: var(--tcp-space-3);
}

.featured-square-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.featured-square-image a:hover img {
  transform: scale(1.05);
}

.featured-square-title {
  font-family: var(--tcp-font-display);
  font-size: var(--tcp-text-xl);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--tcp-space-2) 0;
}

.featured-square-title a {
  color: var(--tcp-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.featured-square-title a:hover {
  color: var(--tcp-primary);
}

.featured-square-date {
  font-family: var(--tcp-font-primary);
  font-size: var(--tcp-text-sm);
  color: var(--tcp-gray-500);
  font-style: italic;
  display: block;
}

/* ===================================
   HORIZONTAL LIST SECTION (Right Half)
   =================================== */

.horizontal-list-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--tcp-space-4);
}

.horizontal-posts-list {
  display: flex;
  flex-direction: column;
  gap: var(--tcp-space-6);
}

.horizontal-post-item {
  display: flex;
  gap: var(--tcp-space-4);
  align-items: flex-start;
}

.horizontal-post-image {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  overflow: hidden;
}

.horizontal-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.horizontal-post-image a:hover img {
  transform: scale(1.05);
}

.horizontal-post-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--tcp-space-2);
}

.horizontal-post-title {
  font-family: var(--tcp-font-display);
  font-size: var(--tcp-text-base);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.horizontal-post-title a {
  color: var(--tcp-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.horizontal-post-title a:hover {
  color: var(--tcp-primary);
}

.horizontal-post-date {
  font-family: var(--tcp-font-primary);
  font-size: var(--tcp-text-sm);
  color: var(--tcp-gray-500);
  font-style: italic;
  display: block;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 1024px) {
  .mixed-layout-large {
    flex: 0 0 calc(70% - var(--tcp-space-4));
    max-width: calc(70% - var(--tcp-space-4));
  }

  .mixed-layout-small {
    flex: 0 0 calc(30% - var(--tcp-space-4));
    max-width: calc(30% - var(--tcp-space-4));
  }

  .horizontal-post-image {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
  }

  .featured-square-title {
    font-size: var(--tcp-text-lg);
  }
}

@media (max-width: 768px) {
  .mod-mixed-layout {
    margin: var(--tcp-space-8) 0;
  }

  .mixed-layout-wrapper,
  .mixed-layout-wrapper.reversed {
    flex-direction: column;
  }

  .mixed-layout-large,
  .mixed-layout-small {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Large content wrapper becomes vertical */
  .large-content-wrapper {
    flex-direction: column;
  }

  .featured-square-section,
  .horizontal-list-section {
    width: 100%;
  }

  /* Featured square becomes 16:9 in mobile */
  .featured-square-image {
    aspect-ratio: 16 / 9;
  }

  /* Small posts become horizontal in mobile */
  .small-posts {
    flex-direction: row;
    gap: var(--tcp-space-4);
  }

  .small-post-item {
    flex: 1;
  }
}

@media (max-width: 480px) {
  .mod-mixed-layout {
    margin: var(--tcp-space-6) 0;
  }

  .small-posts {
    flex-direction: column;
  }

  .featured-square-title {
    font-size: var(--tcp-text-base);
  }

  .horizontal-post-image {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
  }

  .horizontal-post-title {
    font-size: var(--tcp-text-sm);
  }

  .small-post-title,
  .horizontal-post-date,
  .featured-square-date,
  .small-post-date {
    font-size: var(--tcp-text-xs);
  }
}