/* DDA design system — shared look of the inner pages (properties, rentals, blogs, about, contact, compare, legal, ...).
   Loaded on every page after dda-ds.css. Restyles the original markup those pages still use (headings, eyebrows, buttons,
   listing cards, pagination, form fields) so every page matches the redesign; page-specific layouts live in their own
   dda-ds-<page>.css files. Scoped to .site-shell, so the admin panel is never affected. */

/* ===== Page banner (src/components/site/PageHeader.tsx) ================================================================== */
.ds-pagehead {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 46vh, 460px);
  margin-top: var(--ds-header-h);
  --ds-pad: 72px 0 clamp(40px, 5vw, 60px);
  padding: var(--ds-pad);
  background: #141416;
  color: #fff;
  font-family: var(--ds-font);
  overflow: hidden;
  isolation: isolate;
}
.ds-pagehead--tall { min-height: clamp(420px, 62vh, 620px); }
.ds-pagehead--overlap { --ds-pad: 72px 0 clamp(96px, 10vw, 128px); }
.ds-pagehead-media { position: absolute; inset: 0; z-index: -2; }
.ds-pagehead-media img { display: block; width: 100%; height: 100%; object-fit: cover; animation: ds-kenburns 18s var(--ds-ease) both; }
.ds-pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .78) 100%);
}
.ds-pagehead-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ds-pagehead .ds-pagehead-title,
.ds-pagehead h1 {
  overflow-wrap: break-word;
  max-width: 960px;
  margin: 0;
  font: 700 clamp(34px, 5.2vw, 64px)/1.04 var(--ds-font);
  letter-spacing: -.035em;
  color: #fff;
  text-wrap: balance;
  animation: ds-rise 1s var(--ds-ease) .12s both;
}
/* The extra content (subtitle, eyebrow) joins the banner's column so the eyebrow can sit above the title. */
.ds-pagehead-extra { display: contents; }
.ds-pagehead-extra > .section-subtitle { order: -2; animation: ds-rise 1s var(--ds-ease) .08s both; }
.ds-pagehead-inner > .ds-pagehead-title,
.ds-pagehead-inner > h1 { order: -1; }
.ds-pagehead-extra > :not(.section-subtitle) { max-width: 720px; animation: ds-rise 1s var(--ds-ease) .22s both; }
.ds-pagehead .page-header-subtitle { margin: 0; font: 400 clamp(15px, 1.3vw, 17px)/1.65 var(--ds-font); color: rgba(255, 255, 255, .85); }
.site-shell .ds-pagehead .section-subtitle { color: var(--ds-gold-soft); }
.ds-pagehead-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 600 12px/1 var(--ds-font);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color .25s ease, border-color .25s ease;
  animation: ds-rise 1s var(--ds-ease) .32s both;
}
.ds-pagehead-more:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .6); }
.ds-pagehead-more i { transition: transform .35s var(--ds-ease); }
.ds-pagehead-more:hover i { transform: translateY(3px); }
@media (max-width: 640px) {
  .ds-pagehead { min-height: 300px; --ds-pad: 56px 0 clamp(40px, 5vw, 60px); }
  .ds-pagehead--overlap { --ds-pad: 56px 0 96px; }
  .ds-pagehead--tall { min-height: 380px; }
}

/* ===== Typography of the original page markup ============================================================================ */
/* The original CSS sets "Playfair Display" on these (35 rules in site.css, 25 in page-specific.css, ...): one modern font
   everywhere instead. */
.site-shell :is(h1, h2, h3, h4, h5, h6, th, .stat-number, .table-head-name, .stats-main-title, .site-toast-title, .section-title,
  .property-nearby-title, .hero-title, .faq-card-title, .description-sec-title, .custom-page-stat-value, .custom-page-heading,
  .compare-title, .compare-table-title, .card-name-overlay) { font-family: var(--ds-font) !important; }
.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6 { letter-spacing: -.02em; }
.site-main h1,
.site-main h2 { font-weight: 700; }
.site-main h3,
.site-main h4 { font-weight: 700; }
.site-shell .section-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 12px/1.3 var(--ds-font);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ds-gold-strong);
}
.site-shell .section-subtitle::before { content: ""; width: 28px; height: 1.5px; background: currentColor; flex: none; }
.site-main .section-header h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -.03em; }

/* ===== Buttons of the original page markup =============================================================================== */
.site-shell .btn,
.site-shell .submit-btn,
.site-shell .btn-register,
.site-shell .contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font: 600 14px/1 var(--ds-font);
  letter-spacing: .01em;
  text-transform: none;
  transition: transform .35s var(--ds-ease), box-shadow .35s var(--ds-ease), background-color .25s ease, color .25s ease, border-color .25s ease;
}
.site-shell .btn:hover,
.site-shell .submit-btn:hover:not(:disabled),
.site-shell .btn-register:hover:not(:disabled),
.site-shell .contact-submit-btn:hover:not(:disabled) { transform: translateY(-2px); }
.site-shell .btn-primary,
.site-shell .submit-btn,
.site-shell .btn-register,
.site-shell .contact-submit-btn {
  border: 0;
  background: var(--button-color, var(--ds-gold));
  color: var(--ds-on-gold);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ds-gold) 30%, transparent);
}
.site-shell .btn-outline { border: 1px solid var(--ds-line); background: transparent; color: var(--ds-ink); box-shadow: none; }
.site-shell .btn-outline:hover { border-color: var(--ds-ink); background: transparent; color: var(--ds-ink); }

/* ===== Listing card (PropertyCard: properties list, similar properties) ================================================== */
.site-main .property-card {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-l);
  background: var(--ds-bg);
  box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
  transition: transform .6s var(--ds-ease), box-shadow .6s var(--ds-ease), border-color .3s ease;
}
.site-main .property-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--ds-shadow-float); }
.site-main .property-card .property-image { height: 250px; margin: 10px 10px 0; border-radius: 18px; }
.site-main .property-card .property-image img { transition: transform 1.2s var(--ds-ease); }
.site-main .property-card:hover .property-image img { transform: scale(1.06); }
.site-main .property-card .property-badge-featured {
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--ds-gold);
  color: var(--ds-on-gold);
  font: 700 11.5px/1 var(--ds-font);
  letter-spacing: .02em;
  text-transform: none;
}
/* "Featured" and an admin badge ("Hot Deal") side by side in the photo's top-left corner. */
.site-main .property-card .property-badges { position: absolute; top: 15px; left: 15px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 76px); }
.site-main .property-card .property-badges .property-badge-featured { position: static; }
.site-main .property-card .property-badges .property-badge-featured + .property-badge-featured { background: #111; color: #fff; }
.site-main .property-card .property-share-btn {
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .9);
  color: #111;
}
.site-main .property-card .property-content { padding: 20px 22px 24px; gap: 10px; }
.site-main .property-card .property-title { font: 700 18px/1.3 var(--ds-font); letter-spacing: -.01em; text-transform: none; }
.site-main .property-card .property-title-link { color: var(--ds-ink); }
.site-main .property-card .property-desc { color: var(--ds-ink-2); }
.site-main .property-card .property-price { font: 700 21px/1.2 var(--ds-font); letter-spacing: -.02em; color: var(--ds-ink); }
.site-main .property-card .property-meta-item,
.site-main .property-card .property-meta-single { color: var(--ds-ink-2); }
.site-main .property-card .property-meta-item i,
.site-main .property-card .property-meta-single i { color: var(--ds-gold-strong); }

/* ===== Pagination (src/components/site/Pagination.tsx) =================================================================== */
.site-main .listing-pagination-btn,
.site-main .listing-pagination-page {
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font: 600 14px/1 var(--ds-font);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.site-main .listing-pagination-btn:hover:not(:disabled),
.site-main .listing-pagination-page:hover { border-color: var(--ds-ink); }
.site-main .listing-pagination-page.is-active { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-bg); }
.site-main .listing-pagination-size-select { border-radius: 999px; }
/* site.css shrinks these to 32px squares on phones with !important; keep round 40px buttons (:not(#ds) = higher specificity). */
@media (max-width: 768px) {
  .site-main .listing-pagination-btn:not(#ds),
  .site-main .listing-pagination-page:not(#ds) {
    width: 40px !important;
    min-width: 40px !important;
    max-width: none !important;
    height: 40px !important;
    border-radius: 999px !important;
  }
}

/* ===== Form fields of the original markup (contact, register, brochure, booking, ...) ==================================== */
.site-shell .site-main input[type="text"],
.site-shell .site-main input[type="email"],
.site-shell .site-main input[type="tel"],
.site-shell .site-main input[type="number"],
.site-shell .site-main input[type="date"],
.site-shell .site-main select,
.site-shell .site-main textarea {
  border-radius: 14px;
  font-family: var(--ds-font);
}
.site-shell .site-main input:focus,
.site-shell .site-main select:focus,
.site-shell .site-main textarea:focus { border-color: var(--ds-gold); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-gold) 18%, transparent); }

/* ===== Empty / loading states ============================================================================================ */
.site-main .page-empty-state { border-radius: var(--ds-radius); font-family: var(--ds-font); }
.site-main .page-loading { font-family: var(--ds-font); color: var(--ds-ink-3); }