/* Public-site page layout. Global primitives live in shared/css/primitives.css. */

/* Public content-page frame. */
.public-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-80) 0;
  background: var(--color-cloud);
}
.public-hero::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-paper) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-paper) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.52;
  content: "";
  pointer-events: none;
}
.public-hero .container {
  position: relative;
  z-index: 1;
}

.public-hero .ui-page-title em {
  color: var(--color-copper-600);
  font-style: normal;
}


.public-hero--lg {
  padding: clamp(var(--space-48), calc(100px + 10vw), var(--space-160)) 0;
  position: relative;
  overflow: hidden;
}

.public-section--md {
  padding: clamp(var(--space-48), calc(80px + 10vw), var(--space-80)) 0;
}

.public-section--lg {
  padding: clamp(var(--space-48), calc(80px + 10vw), var(--space-120)) 0;
}

.public-section--sm {
  padding: var(--space-40) 0;
}

.public-section--compact {
  padding: 0;
}

.public-actions {
  margin-top: var(--space-16);
}


.public-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 325px;
  gap: var(--space-24);
  align-items: start;
}
.public-article {
  min-width: 0;
}

/* ==========================================================================
   Responsive / Media Queries
   ========================================================================== */



/* ==========================================================================
   Final Media Queries
   ========================================================================== */

@media (max-width: 960px) {
  .public-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
body .container {
    width: min(calc(100% - 24px), var(--layout-container));
  }

}