/*
 * hotel-layouts.css — Hotel archive view styles
 * 5 layouts: grid (default uses main.css), list, compact, luxury, dark
 * TravelEngine Theme — hotel accent: var(--te-hotel, #F0922A)
 */

/* ═══════════════════════════════════════════════════════════
   SHARED GRID WRAPPERS
   ═══════════════════════════════════════════════════════════ */

/* List — single column full-width rows */
.te-hotel-archive-grid--list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Compact — tight 4-column grid */
.te-hotel-archive-grid--compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Luxury — 2-column large editorial cards */
.te-hotel-archive-grid--luxury {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* Dark — 3-column dark cards */
.te-hotel-archive-grid--dark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 4px;
}

/* ═══════════════════════════════════════════════════════════
   LIST LAYOUT
   ═══════════════════════════════════════════════════════════ */

.te-hotel-card--list {
  display: flex;
  flex-direction: row;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.te-hotel-card--list:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.te-hotel-card--list__img {
  position: relative;
  flex-shrink: 0;
  width: 260px;
  min-height: 200px;
  overflow: hidden;
  display: block;
}
.te-hotel-card--list__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.te-hotel-card--list:hover .te-hotel-card--list__img img { transform: scale(1.04); }
.te-hotel-card--list__placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg,rgba(240,146,42,.15),rgba(27,79,232,.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.te-hotel-card--list__body {
  flex: 1;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.te-hotel-card--list__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.te-hotel-card--list__dest {
  font-size: 12px;
  font-weight: 700;
  color: var(--te-hotel, #F0922A);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.te-hotel-card--list__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--te-dark, #0F172A);
  line-height: 1.3;
  margin: 4px 0 0;
}
.te-hotel-card--list__title a { color: inherit; text-decoration: none; }
.te-hotel-card--list__title a:hover { color: var(--te-hotel); }
.te-hotel-card--list__address,
.te-hotel-card--list__excerpt {
  font-size: 13px;
  color: var(--te-muted, #64748B);
  margin: 2px 0;
  line-height: 1.5;
}
.te-hotel-card--list__amenities {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.te-hotel-card--list__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
}

/* ═══════════════════════════════════════════════════════════
   COMPACT LAYOUT
   ═══════════════════════════════════════════════════════════ */

.te-hotel-card--compact {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.te-hotel-card--compact:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.te-hotel-card--compact__img {
  position: relative;
  display: block;
  height: 140px;
  overflow: hidden;
}
.te-hotel-card--compact__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.te-hotel-card--compact:hover .te-hotel-card--compact__img img { transform: scale(1.06); }
.te-hotel-card--compact__placeholder {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg,rgba(240,146,42,.15),rgba(27,79,232,.12));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.te-hotel-card--compact__body {
  padding: 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.te-hotel-card--compact__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.te-hotel-card--compact__dest {
  font-size: 10px;
  font-weight: 700;
  color: var(--te-hotel, #F0922A);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.te-hotel-card--compact__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--te-dark, #0F172A);
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.te-hotel-card--compact__title a { color: inherit; text-decoration: none; }
.te-hotel-card--compact__title a:hover { color: var(--te-hotel); }

.te-hotel-card--compact__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
}
.te-hotel-card--compact__price {
  font-size: 16px;
  font-weight: 900;
}
.te-hotel-card--compact__price sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--te-muted);
  vertical-align: baseline;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .te-hotel-archive-grid--compact { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .te-hotel-card--list { flex-direction: column; }
  .te-hotel-card--list__img { width: 100%; height: 200px; }
  .te-hotel-archive-grid--compact { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .te-hotel-archive-grid--compact { grid-template-columns: 1fr 1fr; }
}