/* design-system/css/layout.css */
/* Shared layout utilities, sections, and cards (atom-level styles like .btn, .badge, .tabs, .modal, .pagination moved to atoms.css). */
/* Not for: atoms (see atoms.css), or page-specific content. */

@import "./atoms.css";

/* ── Content container (aligns with header and hero) ──
   Uses the same responsive padding formula as .top-nav and .hero-section
   so the left/right content edges are perfectly aligned across all layers. */
.content-container {
  padding: 30px max(40px, calc((100% - 1400px) / 2));
}

/* ── Hero section (dark filter bar) ── */
.hero-section {
  background-color: #1a1a2e;
  color: white;
  padding: 30px max(40px, calc((100% - 1400px) / 2));
}

.hero-section h1 {
  margin-bottom: 5px;
}

/* ── Filter components (depend on dark hero context — keep here, not atoms) ── */
.filter-bar {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.filter-bar .search-btn {
  margin-left: auto;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-label {
  font-size: 13px;
  font-weight: 600;
}

.filter-select,
.filter-input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: white;
  min-width: 180px;
  font-size: 14px;
  font-family: inherit;
  color: #333;
}

.filter-actions {
  margin-top: 15px;
  display: flex;
  gap: 15px;
  font-size: 14px;
}

.filter-action {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.filter-action:hover {
  opacity: 0.8;
}

/* ── Detail page layout (main + sidebar) ── */
.detail-canvas {
  padding: 24px max(40px, calc((100% - 1400px) / 2)) 48px;
}

.detail-page-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.detail-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Cards (frame; padding via .card-pad) ── */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(18, 21, 27, 0.12);
  border: 1px solid #e8eaed;
}

.card-pad {
  padding: 20px 24px;
}

/* ── Typography ── */
.section-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #151515;
  margin-bottom: 16px;
}

.sidebar-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: #151515;
  margin-bottom: 12px;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  color: #151515;
  letter-spacing: -0.5px;
}

/* .badge family moved to atoms.css */

/* ── Tabs row container (atom .tabs/.tab live in atoms.css) ── */
.tabs-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid #e0e4e8;
}

/* .btn family moved to atoms.css */
/* .overlay/.modal family moved to atoms.css */
/* .pagination/.page-btn family moved to atoms.css */

/* ── Booking / prompt modal overrides (compose on top of atom .modal) ── */
.prompt-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.prompt-actions {
  display: flex;
  gap: 12px;
}
.prompt-btn {
  flex: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px) {
  .detail-grid { grid-template-columns: 1fr; }
}