/* =========================================================================
   UTILITIES
   Single-purpose classes for the Divi CSS Class field. These exist so a
   section can be composed in the builder without opening a Custom CSS box.

   Every value comes from a token. If a utility needs a number that is not on
   the scale, the answer is usually that the layout is wrong, not the scale.
   ========================================================================= */

/* ---- Rhythm ---------------------------------------------------------------
   Divi controls most padding through the builder UI. These are for the cases
   where the builder fights you: negative margins, overlaps, flush sections. */
.cg-pt-0   { padding-top: 0 !important; }
.cg-pb-0   { padding-bottom: 0 !important; }
.cg-pt-s   { padding-top: var(--s-7) !important; }
.cg-pb-s   { padding-bottom: var(--s-7) !important; }
.cg-mt-neg { margin-top: calc(var(--s-7) * -1); position: relative; z-index: var(--z-raised); }

.cg-stack-2 > * + * { margin-top: var(--s-2); }
.cg-stack-3 > * + * { margin-top: var(--s-3); }
.cg-stack-4 > * + * { margin-top: var(--s-4); }
.cg-stack-5 > * + * { margin-top: var(--s-5); }
.cg-stack-6 > * + * { margin-top: var(--s-6); }

/* ---- Measure -------------------------------------------------------------- */
.cg-measure      { max-width: var(--measure); }
.cg-measure-none p { max-width: none; }
.cg-center       { margin-inline: auto; text-align: center; }
.cg-center p     { margin-inline: auto; }

/* ---- Type ---------------------------------------------------------------- */
.cg-display   { font-family: var(--font-display); font-weight: var(--w-display); }
.cg-ui        { font-family: var(--font-ui); }
.cg-lead      { font-size: 19px; line-height: 1.65; color: var(--text-secondary); }
.cg-pull      { font-family: var(--font-display); font-weight: var(--w-pull); font-style: italic; font-size: var(--pull); line-height: 1.3; color: var(--green-800); }
.cg-label     { font-family: var(--font-ui); font-weight: var(--w-label); font-size: 14px; }
.cg-caps      { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: var(--w-control); }

/* ---- Colour ---------------------------------------------------------------
   Text colours only. Backgrounds are set in the builder or by a band class,
   because a background usually implies padding too. */
.cg-text-green  { color: var(--green-700); }
.cg-text-gold   { color: var(--gold-600); }
.cg-text-coral  { color: var(--text-coral); }   /* the stepped-down coral, never --coral-400 */
.cg-text-muted  { color: var(--text-muted); }
.cg-text-white  { color: #FFFFFF; }

.cg-bg-cream    { background: var(--sand-100); }
.cg-bg-white    { background: #FFFFFF; }
.cg-bg-sunken   { background: var(--bg-sunken); }
.cg-bg-green    { background: var(--green-800); }
.cg-bg-green-soft { background: var(--green-50); }
.cg-bg-gold-soft  { background: var(--gold-50); }

/* ---- Shape ---------------------------------------------------------------- */
.cg-r-pill { border-radius: var(--r-pill); }
.cg-r-lg   { border-radius: var(--r-lg); }
.cg-r-md   { border-radius: var(--r-md); }
.cg-r-sm   { border-radius: var(--r-sm); }
.cg-clip   { overflow: hidden; }

/* ---- Depth ---------------------------------------------------------------
   Resting elements do not get a shadow. .cg-lift is for something that is
   genuinely raised, and .cg-hairline is the usual answer instead. */
.cg-hairline    { border: 1px solid var(--border-subtle); }
.cg-hairline-t  { border-top: 1px solid var(--border-subtle); }
.cg-lift        { box-shadow: var(--shadow-md); }
.cg-lift-hover  { transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.cg-lift-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ---- Grids ---------------------------------------------------------------
   Divi's own columns handle most layout. These cover the asymmetric splits
   the brief asks for, which Divi's fixed column ratios do not offer.
   Every one declares its own mobile collapse: never assume a reflow. */
.cg-grid       { display: grid; gap: var(--s-5); }
.cg-grid-2     { grid-template-columns: repeat(2, 1fr); }
.cg-grid-3     { grid-template-columns: repeat(3, 1fr); }
.cg-grid-4     { grid-template-columns: repeat(4, 1fr); }
.cg-grid-lead  { grid-template-columns: 1.6fr 1fr; }   /* asymmetric split      */
.cg-grid-trail { grid-template-columns: 1fr 1.6fr; }
.cg-grid-bento { grid-template-columns: repeat(2, 1fr); }
.cg-grid-bento > .cg-span-2 { grid-column: span 2; }

@media (max-width: 1060px) {
  .cg-grid-3,
  .cg-grid-4     { grid-template-columns: repeat(2, 1fr); }
  .cg-grid-lead,
  .cg-grid-trail { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cg-grid-2,
  .cg-grid-3,
  .cg-grid-4,
  .cg-grid-bento { grid-template-columns: 1fr; }
  .cg-grid-bento > .cg-span-2 { grid-column: auto; }
}

/* ---- Flex helpers --------------------------------------------------------- */
.cg-row-flex  { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.cg-row-between { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }

/* ---- Visibility ----------------------------------------------------------- */
.cg-hide-mobile  { display: revert; }
.cg-only-mobile  { display: none; }

@media (max-width: 1060px) {
  .cg-hide-mobile { display: none !important; }
  .cg-only-mobile { display: revert; }
}

/* Visually hidden but available to screen readers. For icon-only controls
   and for the label a design decided not to show. */
.cg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Tables --------------------------------------------------------------
   Data tables scroll inside their own container. Never clipped. */
.cg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cg-table-scroll > table { min-width: 640px; }