/**
 * Darsgah card system + shared small components (badges, chips, empty
 * states, skeletons, ad zones).
 *
 * One base (.dg-card) owns radius, border, hover and focus. Variants
 * (level / subject / chapter / type / item / blog) change layout and
 * density only — never the radius or the elevation language.
 *
 * Grid rule: fixed column counts, not auto-fit. Fixed `1fr` tracks divide
 * every row evenly, so an incomplete last row leaves empty cells rather
 * than stretching or centring two lonely cards at a different width from
 * the rows above. Column counts step up by information density, not by a
 * single global breakpoint.
 */

.dg-card-grid {
  display: grid;
  gap: var(--dg-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) {
  .dg-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dg-space-4); }
}
@media (min-width: 860px) {
  .dg-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .dg-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Class picker. Capped at three across on purpose: the curriculum is six
   classes, and a four-column grid left two dead cells sitting in the
   second row — an empty half-row directly under the most important
   control on the site. Three across gives two complete rows at every
   desktop width. */
.dg-card-grid--classes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .dg-card-grid--classes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Three-up ceiling — blog cards and anything with an image, where four
   across makes the thumbnail too small to read. */
.dg-card-grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 600px) { .dg-card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dg-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Dense — small, low-information tiles (resource types). */
.dg-card-grid--dense {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dg-space-2);
}
@media (min-width: 600px) {
  .dg-card-grid--dense { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dg-space-3); }
}
@media (min-width: 900px) {
  .dg-card-grid--dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Compact list — document rows. Two columns on a phone is unreadable for
   long resource titles, so this one is a single column until there's real
   width, then two, then reads as a scannable library list. */
.dg-card-grid--compact-list { grid-template-columns: minmax(0, 1fr); gap: var(--dg-space-2); }
@media (min-width: 700px) {
  .dg-card-grid--compact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dg-space-3); }
}
@media (min-width: 1100px) {
  .dg-card-grid--compact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Single-column variant for the resource-type archive, where the row is
   the primary object and gets full width to breathe. */
.dg-card-grid--rows { grid-template-columns: minmax(0, 1fr); gap: var(--dg-space-2); }

/* ---------- Base card ---------- */

.dg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-2);
  min-width: 0;
  background: var(--dg-surface);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
  padding: var(--dg-space-4);
  text-decoration: none;
  color: var(--dg-ink);
  box-shadow: var(--dg-shadow-rest);
  transition: transform var(--dg-transition), box-shadow var(--dg-transition),
              border-color var(--dg-transition), background var(--dg-transition);
}

.dg-card:hover,
.dg-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--dg-shadow-hover);
  border-color: var(--dg-line-strong);
  color: var(--dg-ink);
}

.dg-card:focus-visible {
  outline: 2px solid var(--dg-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dg-card:hover,
  .dg-card:focus-visible { transform: none; }
}

/* Icon well shared by level/subject/type cards */
.dg-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--dg-radius-sm);
  background: var(--dg-maroon-tint-06);
  color: var(--dg-maroon);
  transition: background var(--dg-transition), color var(--dg-transition);
}
.dg-card:hover .dg-card__icon { background: var(--dg-maroon-tint-10); }
.dg-card__icon svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.dg-card__title {
  font-family: var(--dg-font-display);
  font-weight: 620;
  font-size: var(--dg-text-lg);
  line-height: var(--dg-leading-snug);
  letter-spacing: var(--dg-tracking-tight);
  color: var(--dg-maroon-deep);
  overflow-wrap: anywhere;
}

.dg-card__meta {
  font-size: var(--dg-text-xs);
  color: var(--dg-ink-muted);
}

/* ---------- Badges & chips ---------- */

.dg-badge,
.dg-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 3px 10px;
  border-radius: var(--dg-radius-pill);
  background: var(--dg-maroon-tint-06);
  color: var(--dg-maroon);
  font-size: var(--dg-text-2xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.dg-badge--neutral { background: var(--dg-surface-sunken); color: var(--dg-ink-muted); }
.dg-badge--gold { background: var(--dg-gold-tint-15); color: var(--dg-gold-deep); }
.dg-badge--success { background: var(--dg-success-tint); color: var(--dg-success); }
.dg-badge--outline { background: transparent; border: 1px solid var(--dg-line-strong); color: var(--dg-ink-muted); }

/* Metadata rail — the small facts under a title. Separated by space and a
   hairline divider rather than middle dots, so it stays readable when it
   wraps onto two lines on a phone. */
.dg-meta-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dg-space-2) var(--dg-space-3);
  list-style: none;
  margin: 0; padding: 0;
  font-size: var(--dg-text-xs);
  color: var(--dg-ink-muted);
}
.dg-meta-list li { display: flex; align-items: center; gap: 5px; min-width: 0; }
.dg-meta-list li + li { padding-left: var(--dg-space-3); border-left: 1px solid var(--dg-line); }
.dg-meta-list svg {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--dg-ink-faint);
}

/* ---------- Level card (homepage class picker) ---------- */

/**
 * The homepage's primary navigation, so it gets the most presence of any
 * card: full-height, icon top, title and count anchored to the bottom, and
 * a gold rule that draws across the top edge on hover — one considered
 * interaction instead of a lift plus a glow plus a colour change.
 */
.dg-card--level {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--dg-space-3);
  min-height: 0;
  padding: var(--dg-space-4);
  overflow: hidden;
}
@media (min-width: 900px) { .dg-card--level { padding: var(--dg-space-5); } }

/* One hover gesture: a gold rule draws across the top edge. No lift, no
   glow, no colour shift stacked on top of it. */
.dg-card--level::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px; width: 100%;
  background: var(--dg-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dg-transition-slow);
}
.dg-card--level.is-available:hover::before,
.dg-card--level.is-available:focus-visible::before { transform: scaleX(1); }

/* Band 1 — orientation. Quiet, and the stage label is pushed to the far
   edge so it reads as a tag on the card rather than a subtitle fighting
   the class name below it. */
.dg-card--level__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-3);
}
.dg-card--level__stage {
  font-size: var(--dg-text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dg-ink-muted);
  white-space: nowrap;
}

/* Band 2 — the class name carries the card. */
.dg-card--level .dg-card__title {
  font-size: var(--dg-text-xl);
  line-height: 1.15;
  margin: 0;
}

/* Band 3 — a ruled foot. margin-top:auto pins it to the bottom edge when
   a neighbouring card in the row is taller, which is what stops a short
   card from leaving a pool of dead space in the middle. */
.dg-card--level__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-3);
  margin-top: auto;
  padding-top: var(--dg-space-3);
  border-top: 1px solid var(--dg-line);
  min-height: 34px;
}
.dg-card--level__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--dg-text-xs);
  font-weight: 700;
  color: var(--dg-maroon);
  white-space: nowrap;
}
.dg-card--level__cta svg {
  width: 15px; height: 15px;
  stroke-width: 2;
  transition: transform var(--dg-transition);
}
.dg-card--level.is-available:hover .dg-card--level__cta svg { transform: translateX(3px); }

/* Unavailable: resting, not broken. Same structure, same rule, same
   proportions — only the emphasis drops, and there is no action to
   promise because there is nothing behind it yet. */
.dg-card--level.is-pending {
  background: var(--dg-surface-sunken);
  border-style: dashed;
  cursor: default;
}
.dg-card--level.is-pending .dg-card__title { color: var(--dg-ink-muted); }
.dg-card--level.is-pending .dg-card__icon { opacity: 0.55; }

/* Phones. Two class cards side by side on a 360–430px screen leaves each
   card about 160px of inner width, which is not enough for an icon and a
   stage label on one line, nor for "8 subjects" and "Explore subjects" on
   another — both were clipping at the card edge.
   The icon is the element that carries the least information here, so it
   goes first, the stage label gets the top row to itself, and the foot
   stacks. The card keeps its three bands and its hierarchy. */
@media (max-width: 640px) {
  .dg-card--level .dg-card__icon { display: none; }
  .dg-card--level__stage { white-space: normal; }
  .dg-card--level__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .dg-card--level .dg-card__title { font-size: var(--dg-text-lg); }
}

/* ---------- Status pill ----------
 * Availability as metadata. Used by the class cards and reusable anywhere
 * a piece of content has a state worth naming.
 */

.dg-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--dg-space-3);
  border-radius: var(--dg-radius-pill);
  font-size: var(--dg-text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dg-status--soon {
  background: var(--dg-cream);
  color: var(--dg-ink-muted);
  border: 1px solid var(--dg-line);
}
.dg-status--soon::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dg-gold);
  flex: none;
}
.dg-status--live {
  background: var(--dg-maroon-tint-06);
  color: var(--dg-maroon-deep);
  border: 1px solid var(--dg-maroon-tint-10);
}

/* ---------- Subject card ---------- */

.dg-card--subject {
  gap: var(--dg-space-3);
  border-top: 3px solid var(--dg-subject-accent, var(--dg-maroon));
  padding-top: calc(var(--dg-space-4) - 2px);
}
.dg-card--subject .dg-card__icon {
  background: color-mix(in srgb, var(--dg-subject-accent, var(--dg-maroon)) 11%, transparent);
  color: var(--dg-subject-accent, var(--dg-maroon));
}
.dg-card--subject .dg-card__title { font-size: var(--dg-text-lg); }
.dg-card--subject .dg-card__foot { margin-top: auto; padding-top: var(--dg-space-2); }

/* ---------- Chapter card ---------- */

/**
 * Chapters genuinely are a sequence, so the numeral earns its place — it
 * is how a student finds "chapter 7" in a list of twenty. It sits as a
 * quiet outlined figure in the corner rather than a coloured pill, so the
 * chapter *name* stays the thing you read first.
 */
.dg-card--chapter {
  align-items: flex-start;
  gap: var(--dg-space-3);
  padding-right: var(--dg-space-8);
}
.dg-card--chapter__number {
  position: absolute;
  top: var(--dg-space-3);
  right: var(--dg-space-4);
  font-family: var(--dg-font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--dg-line-strong);
  transition: -webkit-text-stroke-color var(--dg-transition);
}
.dg-card--chapter:hover .dg-card--chapter__number { -webkit-text-stroke-color: var(--dg-maroon); }
.dg-card--chapter .dg-card__title { font-size: var(--dg-text-base); }
.dg-card--chapter .dg-card__meta { margin-top: auto; }

/* ---------- Resource-type card ---------- */

.dg-card--type {
  flex-direction: row;
  align-items: center;
  gap: var(--dg-space-3);
  padding: var(--dg-space-3) var(--dg-space-4);
}
.dg-card--type .dg-card__icon { width: 36px; height: 36px; }
.dg-card--type .dg-card__icon svg { width: 18px; height: 18px; }
.dg-card--type .dg-card__title {
  font-family: var(--dg-font-body);
  font-size: var(--dg-text-sm);
  font-weight: 700;
  color: var(--dg-ink);
}
.dg-card--type .dg-card__meta { margin-top: 1px; }
.dg-card--type__body { display: flex; flex-direction: column; min-width: 0; }

/* ---------- Resource item row ---------- */

/**
 * The most-repeated object on the site, so it is deliberately the quietest:
 * a format chip, a clamped title, a metadata line, and a chevron that is
 * the only thing that moves on hover. Fixed min-height keeps rows aligned
 * whatever the title length.
 */
.dg-card--item {
  flex-direction: row;
  align-items: center;
  gap: var(--dg-space-3);
  padding: var(--dg-space-3);
  min-height: 72px;
  min-width: 0;
}
.dg-card--item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }

.dg-card__format-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--dg-radius-sm);
  background: var(--dg-gold-tint-15);
  color: var(--dg-gold-deep);
  font-family: var(--dg-font-body);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  transition: background var(--dg-transition);
}
.dg-card--item:hover .dg-card__format-icon { background: rgba(201, 154, 60, 0.26); }

.dg-card__item-title {
  font-size: var(--dg-text-sm);
  font-weight: 600;
  line-height: var(--dg-leading-snug);
  color: var(--dg-ink);
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.dg-card__chevron {
  flex-shrink: 0;
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--dg-ink-faint);
  transition: transform var(--dg-transition), color var(--dg-transition);
}
.dg-card--item:hover .dg-card__chevron { transform: translateX(3px); color: var(--dg-maroon); }

/* ---------- Blog card ---------- */

.dg-card--blog { padding: 0; overflow: hidden; gap: 0; }
.dg-card--blog__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--dg-surface-sunken);
  transition: transform var(--dg-transition-slow);
}
.dg-card--blog__inner {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-2);
  padding: var(--dg-space-4);
  flex: 1;
}
.dg-card--blog .dg-card__title {
  font-size: var(--dg-text-lg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dg-card--blog__excerpt {
  font-size: var(--dg-text-sm);
  line-height: var(--dg-leading-normal);
  color: var(--dg-ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dg-card--blog .dg-card__meta { margin-top: auto; padding-top: var(--dg-space-2); }

/* ---------- Featured / popular modifier ---------- */

.dg-card--featured { border-color: rgba(201, 154, 60, 0.6); background: var(--dg-surface); }
.dg-card--featured::after {
  content: attr(data-featured-label);
  position: absolute;
  top: var(--dg-space-2);
  right: var(--dg-space-2);
  background: var(--dg-gold-tint-15);
  color: var(--dg-gold-deep);
  font-size: var(--dg-text-2xs);
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--dg-radius-pill);
  pointer-events: none;
}
/* Keep the label off the chevron on the item row. */
.dg-card--item.dg-card--featured { padding-right: var(--dg-space-4); }
.dg-card--item.dg-card--featured .dg-card__chevron { display: none; }

/* ---------- Empty states ---------- */

/**
 * "Nothing here" is a normal state on a platform still filling up, so it
 * gets a designed surface rather than a bare paragraph: what is missing,
 * and the nearest useful thing to do instead.
 */
.dg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--dg-space-3);
  padding: var(--dg-space-8) var(--dg-space-5);
  background: var(--dg-surface);
  border: 1px dashed var(--dg-line-strong);
  border-radius: var(--dg-radius-lg);
}
.dg-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--dg-surface-sunken);
  color: var(--dg-maroon);
}
.dg-empty__icon svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.dg-empty__title { margin: 0; font-size: var(--dg-text-lg); }
.dg-empty p { margin: 0; max-width: 46ch; color: var(--dg-ink-muted); font-size: var(--dg-text-sm); }
.dg-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dg-space-3); margin-top: var(--dg-space-2); }

/* ---------- Skeletons ---------- */

.dg-skeleton {
  background: linear-gradient(90deg, var(--dg-surface-sunken) 25%, var(--dg-cream) 50%, var(--dg-surface-sunken) 75%);
  background-size: 200% 100%;
  border-radius: var(--dg-radius-xs);
  animation: dg-shimmer 1.4s linear infinite;
}
.dg-skeleton--line { height: 12px; margin-bottom: var(--dg-space-2); }
.dg-skeleton--line:last-child { width: 62%; margin-bottom: 0; }
.dg-skeleton--block { height: 180px; border-radius: var(--dg-radius); }
@keyframes dg-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-skeleton { animation: none; background: var(--dg-surface-sunken); }
}

/* ---------- Hero search ---------- */

/* ---------- Study search ----------
 *
 * The homepage search is the one tool on the page a student uses rather
 * than reads, so it is built as an instrument, not as a hero decoration.
 *
 * The previous version was a wide floating pill with a circular icon
 * button, centred in a large band of empty space — a generic SaaS search
 * that happened to be sitting on a study site, and visually unattached to
 * anything around it. This version is anchored: a stated purpose above the
 * field, a squared field that sits on a maroon baseline rule (a ruled
 * line, which is the one piece of stationery every student already reads
 * as "write here"), and a submit that says what it does. Nothing floats.
 */

.dg-study-search {
  width: 100%;
  max-width: 620px;
  text-align: left;
}
.dg-study-search__label {
  display: block;
  margin-bottom: var(--dg-space-2);
  font-family: var(--dg-font-body);
  font-size: var(--dg-text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dg-maroon);
}
.dg-study-search__field {
  display: flex;
  align-items: center;
  gap: var(--dg-space-2);
  padding: var(--dg-space-2) var(--dg-space-2) var(--dg-space-2) var(--dg-space-3);
  background: var(--dg-surface);
  border: 1px solid var(--dg-line-strong);
  border-bottom: 2px solid var(--dg-maroon);
  border-radius: var(--dg-radius-sm);
  box-shadow: var(--dg-shadow-xs);
  transition: box-shadow var(--dg-transition), border-color var(--dg-transition);
}
.dg-study-search__field:focus-within {
  box-shadow: var(--dg-shadow-md), var(--dg-focus-ring);
  border-color: var(--dg-maroon);
}
.dg-study-search__icon {
  display: inline-flex;
  flex: none;
  color: var(--dg-ink-faint);
}
.dg-study-search__icon svg { width: 19px; height: 19px; }
.dg-study-search__field:focus-within .dg-study-search__icon { color: var(--dg-maroon); }

.dg-study-search input[type="search"] {
  flex: 1;
  min-width: 0;
  /* The field wrapper reads as the target but only the input takes the
     tap, so the input carries the height rather than the padding. */
  min-height: 40px;
  border: 0;
  background: transparent;
  font-family: var(--dg-font-body);
  font-size: var(--dg-text-base);
  color: var(--dg-ink);
  outline: none;
  /* 16px minimum stops iOS Safari zooming the page on focus. */
  font-size: max(16px, var(--dg-text-base));
}
.dg-study-search input::placeholder { color: var(--dg-ink-faint); }
/* Chrome's built-in clear affordance sits badly against the ruled field. */
.dg-study-search input[type="search"]::-webkit-search-decoration,
.dg-study-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.dg-study-search__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-2);
  flex: none;
  min-height: 40px;
  padding: 0 var(--dg-space-4);
  border: 0;
  border-radius: var(--dg-radius-xs, 6px);
  background: var(--dg-maroon);
  color: var(--dg-surface);
  font-family: var(--dg-font-body);
  font-size: var(--dg-text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dg-transition);
}
.dg-study-search__submit:hover { background: var(--dg-maroon-deep); }
.dg-study-search__submit svg { width: 17px; height: 17px; stroke-width: 2; }

/* Phones: the field keeps full width and the submit collapses to a square
   so the input itself never shrinks to a stub. */
@media (max-width: 560px) {
  .dg-study-search__submit { padding: 0; width: 44px; min-height: 44px; justify-content: center; }
  .dg-study-search__submit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- AdSense zone ----------
   LIVE SITE VERSION. No border, no label, no chrome: a plain reserved
   container, per the requirement that ad zones show zero visible
   text/placeholder to real visitors. min-height reserves layout space
   before the ad script fills it, to avoid layout shift — that is spacing,
   not decoration, so it stays even here. See includes/class-adsense.php:
   this container only renders when an ad unit is actually configured. */
/* ---------- Ad zones ----------
 *
 * Ad-READY, never ad-faking. There is no invisible click target here, no
 * ad dressed as a card, and no ad-shaped box that isn't an ad.
 *
 * Three things changed from the previous rules, all of which were actively
 * harmful with responsive AdSense units:
 *
 *   min-height   removed — it reserved a 100px rectangle on every page
 *                whether or not a unit ever filled, which is exactly the
 *                "enormous empty box" the design is supposed to avoid.
 *                An unfilled slot now occupies nothing at all.
 *   overflow     removed — clipping a responsive unit can crop the ad and
 *                breaks some formats outright.
 *   :empty       margins collapse too, so an unfilled slot contributes no
 *                spacing either, and the sections around it close up.
 *
 * Darsgah Core decides whether to print anything; the theme only gives it
 * a clean, full-width, non-clipping container to print into.
 */

.dg-ad-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dg-space-2);
  width: 100%;
  max-width: 100%;
  margin: var(--dg-space-6) auto;
}

/* Nothing was rendered into the slot: take up no room whatsoever. */
.dg-ad-zone:empty {
  display: none;
  margin: 0;
}

/* Whatever the network injects must stay inside the content column —
   this is the rule that prevents a wide unit causing horizontal scroll on
   a 320px phone. */
.dg-ad-zone > * { max-width: 100%; }
.dg-ad-zone img,
.dg-ad-zone iframe { max-width: 100%; height: auto; }

/* Clear, honest identification. Quiet, but never hidden — and it is only
   ever rendered next to an actual ad by the plugin's own markup. */
.dg-ad-zone__label {
  align-self: flex-start;
  font-size: var(--dg-text-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dg-ink-faint);
}

/* Sidebar placement on a resource page: sticks alongside the document
   without ever overlapping it, and is simply not rendered below the
   two-column breakpoint (see .dg-resource-layout in sections.css) so a
   phone never requests a sidebar unit it has nowhere to put. */
.dg-ad-zone--sidebar { margin-block: 0; }

/* Internal wireframe-review-only variant — NEVER apply
   .dg-ad-zone--wireframe on the live site (see the logged-in-admin-only
   reference page). Kept so that page still renders correctly. */
.dg-ad-zone--wireframe {
  min-height: 100px;
  justify-content: center;
  border: 1px dashed var(--dg-line);
  border-radius: var(--dg-radius-sm);
  color: var(--dg-ink-muted);
  font-size: var(--dg-text-xs);
}