/*
DG Premium UI
A premium, dark, glassy UI kit for DG Marketing Magazin.

- Mostly class-based, so you can use it in Gutenberg and/or Elementor.
- The plugin adds a body class: .dgpu
*/

:root{
  --dg-bg:#070a12;
  --dg-surface:rgba(255,255,255,.06);
  --dg-surface-2:rgba(255,255,255,.04);
  --dg-border:rgba(255,255,255,.10);
  --dg-border-strong:rgba(255,255,255,.18);
  --dg-text:rgba(255,255,255,.92);
  --dg-muted:rgba(255,255,255,.70);
  --dg-faint:rgba(255,255,255,.55);
  --dg-accent:#ffbc7d; /* warm gold */
  --dg-accent-2:#6ec1e4; /* cool blue */
  --dg-shadow:0 18px 45px rgba(0,0,0,.42);
  --dg-radius:18px;
  --dg-radius-sm:12px;
  --dg-gap:18px;
  --dg-pad:24px;
  --dg-pad-sm:16px;
  --dg-max:1200px;
}

/* Basic text polish (light touch) */
.dgpu{
  color:var(--dg-text);
}

.dgpu a{color:inherit;}

.dgpu .dg-muted{color:var(--dg-muted);}
.dgpu .dg-faint{color:var(--dg-faint);}

/* Container helpers */
.dgpu .dg-container{
  width:100%;
  max-width:var(--dg-max);
  margin-left:auto;
  margin-right:auto;
}

.dgpu .dg-section{
  padding:56px 16px;
}

@media (max-width: 767px){
  .dgpu .dg-section{padding:40px 14px;}
}

/* Glass card */
.dgpu .dg-card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--dg-border);
  border-radius:var(--dg-radius);
  box-shadow:var(--dg-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow:hidden;
}

.dgpu .dg-card--tight{padding:var(--dg-pad-sm);}
.dgpu .dg-card--padded{padding:var(--dg-pad);}

.dgpu .dg-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 12px;
}

.dgpu .dg-card__title{
  margin:0;
  font-size:22px;
  line-height:1.2;
}

.dgpu .dg-card__more{
  font-size:13px;
  text-decoration:none;
  color:var(--dg-muted);
  border-bottom:1px dashed rgba(255,255,255,.25);
}

.dgpu .dg-card__more:hover{color:var(--dg-text);}

/* Badge / pill */
.dgpu .dg-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
  border:1px solid var(--dg-border-strong);
  background:rgba(0,0,0,.18);
  color:var(--dg-text);
}

.dgpu .dg-badge--gold{
  border-color:rgba(255,188,125,.45);
  background:rgba(255,188,125,.10);
  color:rgba(255,225,190,.95);
}

/* Buttons */
.dgpu .dg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid var(--dg-border-strong);
  background:rgba(255,255,255,.06);
  color:var(--dg-text);
  font-weight:600;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}

.dgpu .dg-btn:hover{transform:translateY(-1px);}

.dgpu .dg-btn--primary{
  border-color:rgba(255,188,125,.55);
  background:linear-gradient(180deg, rgba(255,188,125,.22), rgba(255,188,125,.10));
}

.dgpu .dg-btn--ghost{
  background:rgba(255,255,255,.04);
}

/* Gutenberg button style hook */
.wp-block-button.is-style-dg-button .wp-block-button__link{
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.06) !important;
  color:rgba(255,255,255,.92) !important;
  text-decoration:none !important;
  padding:12px 18px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}

.wp-block-button.is-style-dg-button.dg-primary .wp-block-button__link{
  border-color:rgba(255,188,125,.55) !important;
  background:linear-gradient(180deg, rgba(255,188,125,.22), rgba(255,188,125,.10)) !important;
}

/* Hero helper */
.dgpu .dg-hero{
  padding:72px 16px;
}

.dgpu .dg-hero .dg-hero__grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap:28px;
  align-items:center;
}

@media (max-width: 1024px){
  .dgpu .dg-hero{padding:56px 16px;}
  .dgpu .dg-hero .dg-hero__grid{grid-template-columns:1fr;}
}

.dgpu .dg-hero__kicker{margin-bottom:14px;}

.dgpu .dg-hero__title{
  font-size:44px;
  line-height:1.06;
  margin:0 0 14px;
}

@media (max-width: 767px){
  .dgpu .dg-hero__title{font-size:34px;}
}

.dgpu .dg-hero__lead{
  font-size:18px;
  line-height:1.55;
  color:var(--dg-muted);
  margin:0 0 18px;
}

.dgpu .dg-hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:10px;}

/* Posts grid (shortcode output) */
.dgpu .dgpu-posts{padding:0;}

.dgpu .dgpu-post-grid{
  display:grid;
  gap:var(--dg-gap);
  padding:18px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}

@media (max-width: 1024px){
  .dgpu .dgpu-post-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}

@media (max-width: 640px){
  .dgpu .dgpu-post-grid{grid-template-columns:1fr; padding:14px;}
}

.dgpu .dgpu-post-card{
  min-width:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--dg-radius);
  overflow:hidden;
  background:rgba(0,0,0,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}

.dgpu .dgpu-post-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
}

.dgpu .dgpu-post-card__thumb{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio: 16 / 10;
  background:rgba(255,255,255,.04);
}

.dgpu .dgpu-post-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dgpu .dgpu-post-card__body{padding:14px 14px 16px;}

.dgpu .dgpu-post-card__title{
  display:block;
  font-weight:700;
  text-decoration:none;
  font-size:18px;
  line-height:1.25;
  margin:0 0 8px;
}

.dgpu .dgpu-post-card__meta{
  font-size:12px;
  color:var(--dg-faint);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.dgpu .dgpu-post-card__excerpt{
  font-size:14px;
  line-height:1.45;
  color:var(--dg-muted);
  margin:0;
}

/* Compact cards (no excerpt) */
.dgpu .dgpu-compact .dgpu-post-card__excerpt{display:none;}

/* List layout (for pillar cards) */
.dgpu .dgpu-post-list{list-style:none; margin:0; padding:10px 18px 18px; display:flex; flex-direction:column; gap:10px;}

.dgpu .dgpu-post-list__item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(0,0,0,.16);
}

.dgpu .dgpu-post-list__item:hover{border-color:rgba(255,255,255,.18);}

.dgpu .dgpu-post-list__title{
  text-decoration:none;
  font-weight:650;
  line-height:1.25;
  font-size:14px;
  color:var(--dg-text);
  flex: 1 1 auto;
  min-width:0;
}

.dgpu .dgpu-post-list__title span{display:inline;}

.dgpu .dgpu-post-list__meta{
  font-size:12px;
  color:var(--dg-faint);
  white-space:nowrap;
  flex: 0 0 auto;
}

/* Sections titles */
.dgpu .dg-h2{font-size:34px; line-height:1.12; margin:0 0 10px;}
.dgpu .dg-h3{font-size:22px; line-height:1.18; margin:0;}
.dgpu .dg-lead{font-size:16px; line-height:1.6; color:var(--dg-muted); margin:0;}

/* Simple grid helper */
.dgpu .dg-grid-3{
  display:grid;
  gap:var(--dg-gap);
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px){.dgpu .dg-grid-3{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width: 640px){.dgpu .dg-grid-3{grid-template-columns:1fr;}}