/**
 * @file
 * CSS Grid utilities for Invertir Pro theme.
 */

/* ========================================
 * GRID CONTAINER
 * ======================================== */

.grid {
  display: grid;
  gap: var(--space-lg);
}

/* ========================================
 * COLUMN VARIANTS
 * ======================================== */

/* Auto-fit responsive columns */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* Fixed column counts */
.grid-cols-1 {
  grid-template-columns: 1fr;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Responsive column counts */
@media (min-width: 576px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 992px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================================
 * GAP VARIANTS
 * ======================================== */

.gap-0 { gap: 0; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* Row/Column specific gaps */
.gap-x-md { column-gap: var(--space-md); }
.gap-x-lg { column-gap: var(--space-lg); }
.gap-x-xl { column-gap: var(--space-xl); }

.gap-y-md { row-gap: var(--space-md); }
.gap-y-lg { row-gap: var(--space-lg); }
.gap-y-xl { row-gap: var(--space-xl); }

/* ========================================
 * ALIGNMENT
 * ======================================== */

.items-start { align-items: start; }
.items-center { align-items: center; }
.items-end { align-items: end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: end; }
.justify-between { justify-content: space-between; }

.place-center {
  place-items: center;
}

/* ========================================
 * SPECIAL LAYOUTS
 * ======================================== */

/* Two column with different widths */
.grid-split-40-60 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-split-40-60 {
    grid-template-columns: 2fr 3fr;
  }
}

.grid-split-60-40 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-split-60-40 {
    grid-template-columns: 3fr 2fr;
  }
}

.grid-split-50-50 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-split-50-50 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ========================================
 * PROPERTY GRID
 * ======================================== */

/* For property listings - single column horizontal cards */
.property-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Alternative: responsive card grid */
.property-grid--cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .property-grid--cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .property-grid--cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================================
 * .tres — 3-column flex grid (used on /panel)
 * ======================================== */

.tres {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.tres > * {
  flex: 1 1 calc((100% - 4rem) / 3);
  min-width: 0;
}

@media (max-width: 900px) {
  .tres > * {
    flex-basis: calc((100% - 2rem) / 2);
  }
}

@media (max-width: 600px) {
  .tres > * {
    flex-basis: 100%;
  }
}

/* ========================================
 * .tres children — card-like polished look
 * ======================================== */

.tres > div {
  padding: 0;
  background-color: var(--color-white, #fff);
  border: 1px solid var(--color-border-light, #e5e5e5);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
  overflow: hidden;
  transition: transform var(--transition-normal) var(--ease-out-expo),
              box-shadow var(--transition-normal) var(--ease-out-expo),
              border-color var(--transition-normal) var(--ease-out-expo);
}

.tres > div:hover {
  border-color: var(--color-peach, #d4a99c);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
  transform: translateY(-2px);
}

/* H2 acts as a full-bleed colored header inside the card. */
.tres > div > h2 {
  margin: 0;
  padding: var(--space-md, 1rem) var(--space-xl, 1.5rem);
  background-color: var(--color-heading, #2b3e50);
  color: var(--color-white, #fff);
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--letter-spacing-tight, -0.01em);
  border-bottom: 1px solid var(--color-peach, #d4a99c);
}

/* All other direct children get horizontal padding. */
.tres > div > :not(h2) {
  padding-left: var(--space-xl, 1.5rem);
  padding-right: var(--space-xl, 1.5rem);
}

.tres > div > :first-child:not(h2) {
  padding-top: var(--space-xl, 1.5rem);
  margin-top: 0;
}

.tres > div > h2 + * {
  padding-top: var(--space-lg, 1.25rem);
  margin-top: 0;
}

.tres > div > :last-child {
  padding-bottom: var(--space-xl, 1.5rem);
  margin-bottom: 0;
}

.tres > div h3,
.tres > div h4 {
  margin-bottom: var(--space-sm, 0.75rem);
  color: var(--color-heading, #2b3e50);
}

/* ========================================
 * /panel page — centered heading
 * ======================================== */

body.path-panel h1,
body.path-panel .page-title {
  text-align: center;
}