/**
 * AMS V3 Public Projects Shortcode - White Premium Redesign
 * Scope: [ams_projects_front]
 * Public shortcode styles are isolated from dashboard shell CSS.
 */

.ams-projects-front,
.ams-projects-front * { box-sizing: border-box !important; }

.ams-projects-front {
  --ams-front-gold: #c8a45d;
  --ams-front-gold-dark: #8a681f;
  --ams-front-gold-soft: rgba(200,164,93,.12);
  --ams-front-text: #111827;
  --ams-front-muted: #667085;
  --ams-front-border: #e5e7eb;
  --ams-front-border-strong: #d9dee8;
  --ams-front-bg: #f7f9fc;
  --ams-front-card: #ffffff;
  direction: rtl !important;
  width: min(1180px, calc(100% - 28px)) !important;
  margin: 0 auto !important;
  padding: 24px 0 42px !important;
  color: var(--ams-front-text) !important;
  font-family: Tajawal, Arial, sans-serif !important;
}

.ams-projects-front a,
.ams-projects-front a:hover { text-decoration: none !important; }

.ams-projects-front-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 18px !important;
  padding: 28px 30px !important;
  border: 1px solid var(--ams-front-border) !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg,#fff,#fbfcff) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.06) !important;
}

.ams-projects-front-hero h2 {
  margin: 0 0 8px !important;
  color: var(--ams-front-text) !important;
  font-size: clamp(30px,4vw,48px) !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  letter-spacing: -.03em !important;
}

.ams-projects-front-hero p {
  margin: 0 !important;
  max-width: 740px !important;
  color: var(--ams-front-muted) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
}

.ams-projects-front-hero strong[data-ams-projects-front-count] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(200,164,93,.35) !important;
  border-radius: 999px !important;
  background: #fffaf0 !important;
  color: var(--ams-front-gold-dark) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.ams-projects-front-toolbar {
  display: grid !important;
  grid-template-columns: minmax(280px,1.6fr) repeat(3,minmax(145px,1fr)) !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 0 22px !important;
  padding: 14px !important;
  border: 1px solid var(--ams-front-border) !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.055) !important;
}

.ams-projects-front-search { position: relative !important; display: flex !important; align-items: center !important; }
.ams-projects-front-search i { position: absolute !important; inset-inline-start: 16px !important; z-index: 1 !important; color: var(--ams-front-gold) !important; font-size: 14px !important; }

.ams-projects-front-toolbar input,
.ams-projects-front-toolbar select {
  width: 100% !important;
  height: 46px !important;
  margin: 0 !important;
  border: 1px solid var(--ams-front-border-strong) !important;
  border-radius: 15px !important;
  background-color: #ffffff !important;
  color: var(--ams-front-text) !important;
  font-family: Tajawal, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  outline: none !important;
  box-shadow: none !important;
}
.ams-projects-front-toolbar input { padding: 0 44px 0 16px !important; }
.ams-projects-front-toolbar select { padding: 0 14px !important; appearance: auto !important; }
.ams-projects-front-toolbar input::placeholder { color: #98a2b3 !important; }
.ams-projects-front-toolbar input:focus,
.ams-projects-front-toolbar select:focus { border-color: rgba(200,164,93,.78) !important; box-shadow: 0 0 0 4px var(--ams-front-gold-soft) !important; }

.ams-projects-front-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.ams-projects-front-grid.is-loading { opacity: .6 !important; pointer-events: none !important; }

.ams-project-front-card {
  display: grid !important;
  grid-template-columns: 220px minmax(0,1fr) !important;
  gap: 18px !important;
  min-height: 235px !important;
  padding: 14px !important;
  border: 1px solid var(--ams-front-border) !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  color: var(--ams-front-text) !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.07) !important;
  overflow: hidden !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.ams-project-front-card:hover { transform: translateY(-3px) !important; border-color: rgba(200,164,93,.45) !important; box-shadow: 0 24px 56px rgba(15,23,42,.11) !important; }

.ams-project-front-media {
  position: relative !important;
  min-height: 205px !important;
  border: 1px solid var(--ams-front-border) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg,#f8fafc,#eef2f7) !important;
  overflow: hidden !important;
}
.ams-project-front-media img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; filter: none !important; opacity: 1 !important; }
.ams-project-front-placeholder { display: grid !important; place-items: center !important; height: 100% !important; text-align: center !important; background: linear-gradient(135deg,#f8fafc,#eef2f7) !important; }
.ams-project-front-placeholder strong { color: var(--ams-front-gold) !important; font-size: 30px !important; font-weight: 500 !important; letter-spacing: .08em !important; }
.ams-project-front-placeholder span { color: var(--ams-front-muted) !important; font-size: 13px !important; font-weight: 300 !important; }

.ams-project-front-status {
  position: absolute !important;
  top: 14px !important;
  inset-inline-start: 14px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(22,101,52,.18) !important;
  background: rgba(220,252,231,.95) !important;
  color: #166534 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.ams-project-status-soon .ams-project-front-status,
.ams-project-status-pending .ams-project-front-status { color: #92400e !important; background: rgba(254,243,199,.95) !important; border-color: rgba(146,64,14,.18) !important; }
.ams-project-status-sold .ams-project-front-status,
.ams-project-status-inactive .ams-project-front-status { color: #991b1b !important; background: rgba(254,226,226,.95) !important; border-color: rgba(153,27,27,.18) !important; }

.ams-project-front-content { display: flex !important; flex-direction: column !important; gap: 14px !important; min-width: 0 !important; padding: 6px 0 2px !important; }
.ams-project-front-head h3 { margin: 0 !important; color: var(--ams-front-text) !important; font-size: clamp(23px,2.6vw,31px) !important; line-height: 1.25 !important; font-weight: 500 !important; letter-spacing: -.02em !important; }
.ams-project-front-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.ams-project-front-tags span { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-height: 30px !important; padding: 0 12px !important; border: 1px solid rgba(200,164,93,.28) !important; border-radius: 999px !important; background: #fffaf0 !important; color: #6b531d !important; font-size: 12px !important; font-weight: 300 !important; }
.ams-project-front-tags i { color: var(--ams-front-gold) !important; font-size: 12px !important; }
.ams-project-front-metrics { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; margin-top: auto !important; }
.ams-project-front-metrics > div { display: grid !important; gap: 6px !important; padding: 14px !important; min-height: 96px !important; border: 1px solid var(--ams-front-border) !important; border-radius: 18px !important; background: #f8fafc !important; }
.ams-project-front-metrics i { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: 12px !important; background: var(--ams-front-gold-soft) !important; color: var(--ams-front-gold) !important; }
.ams-project-front-metrics span { color: var(--ams-front-muted) !important; font-size: 12px !important; font-weight: 300 !important; }
.ams-project-front-metrics strong { color: var(--ams-front-text) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1 !important; }

.ams-projects-front-empty,
.ams-empty-state.ams-projects-front-empty { grid-column: 1/-1 !important; padding: 34px !important; border: 1px solid var(--ams-front-border) !important; border-radius: 24px !important; background: #fff !important; color: var(--ams-front-text) !important; text-align: center !important; box-shadow: 0 16px 40px rgba(15,23,42,.06) !important; }

/* Force public shortcodes to stay light even if the site/body uses a dark class. */
body.dark .ams-projects-front,
html.dark .ams-projects-front,
[data-theme="dark"] .ams-projects-front { color: var(--ams-front-text) !important; }
body.dark .ams-projects-front-hero,
body.dark .ams-projects-front-toolbar,
body.dark .ams-project-front-card,
html.dark .ams-projects-front-hero,
html.dark .ams-projects-front-toolbar,
html.dark .ams-project-front-card,
[data-theme="dark"] .ams-projects-front-hero,
[data-theme="dark"] .ams-projects-front-toolbar,
[data-theme="dark"] .ams-project-front-card { background: #ffffff !important; color: var(--ams-front-text) !important; box-shadow: 0 18px 44px rgba(15,23,42,.06) !important; }
body.dark .ams-projects-front-toolbar input,
body.dark .ams-projects-front-toolbar select,
html.dark .ams-projects-front-toolbar input,
html.dark .ams-projects-front-toolbar select,
[data-theme="dark"] .ams-projects-front-toolbar input,
[data-theme="dark"] .ams-projects-front-toolbar select { background: #ffffff !important; color: var(--ams-front-text) !important; border-color: var(--ams-front-border-strong) !important; }
body.dark .ams-project-front-metrics > div,
html.dark .ams-project-front-metrics > div,
[data-theme="dark"] .ams-project-front-metrics > div { background: #f8fafc !important; border-color: var(--ams-front-border) !important; }

@media (max-width:1050px){ .ams-projects-front-grid{grid-template-columns:1fr !important;} .ams-project-front-card{grid-template-columns:240px minmax(0,1fr) !important;} }
@media (max-width:820px){ .ams-projects-front{width:min(100% - 20px,1180px) !important;padding-top:14px !important;} .ams-projects-front-hero{align-items:flex-start !important;flex-direction:column !important;padding:24px !important;border-radius:24px !important;} .ams-projects-front-toolbar{grid-template-columns:1fr !important;} .ams-project-front-card{grid-template-columns:1fr !important;} .ams-project-front-media{min-height:230px !important;} }
@media (max-width:560px){ .ams-project-front-metrics{grid-template-columns:1fr !important;} }