/* Mobile First Styles (Narrow Screens) */
.z-row {
  display: flex;
  flex-direction: column; /* Stacks everything vertically */
  gap: 20px;
  padding: 40px 20px;
}

/* Enforces Image-on-Top for Row 1 on mobile */
.z-row.mobile-reverse {
  flex-direction: column-reverse; 
}

.z-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px; /* Softer, modern edges */
  margin-left:0;
}

.z-text h2 {
  font-size: 1.5rem;
  margin: 8px 0;
}

.tag {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: #0066cc;/* Nordic Accent Blue */
  font-weight: bold;
}

/* Desktop Upgrade (Screens wider than 768px) */
@media (min-width: 768px) {
  .z-row, .z-row.mobile-reverse {
    flex-direction: row; /* Returns to horizontal side-by-side layout */
    align-items: center;
    gap: 60px;
    padding: 80px 4%;
  }

  .z-text, .z-image {
    flex: 1; /* Splits rows exactly 50/50 */
  }

  .z-image img {
    aspect-ratio: 4 / 3; /* Slightly boxier look for wide screens */
  }
}