/* Megaphone PHX — Auxiliary Rows
   Decorative empty/near-empty rows that mimic old printed forms & documents.
   Each .aux row gets a unique ID; columns defined here per breakpoint.
   ====================================================================== */


/* ── Base ── */

.aux {
  grid-template-columns: 1fr;
}

.aux > * {
  padding: 0.75rem 1rem;
  min-height: 2rem;
}

.aux .ghost {
  opacity: .9;
}

.ghost.caption {
  color: var(--agedBlack);
}


/* ── Heights ── */

.aux-h-1rem > * { min-height: 1rem; }
.aux-h-2rem > * { min-height: 2rem; }
.aux-h-3rem > * { min-height: 3rem; }
.aux-h-4rem > * { min-height: 4rem; }


/* ── Cut utilities ── */
/* Applied to individual child divs. !important ensures grid layout
   can't implicitly re-show a hidden child. */

@media (max-width: 960px) {
  .cut-960 { display: none !important; }
}

@media (max-width: 720px) {
  .cut-720 { display: none !important; }
}

@media (max-width: 512px) {
  .cut-512 { display: none !important; }
}


/* ====================================================================
   PER-ROW GRIDS — desktop (≥961px)
   ==================================================================== */

/* ── index.html ── */

#header-aux       { grid-template-columns: 7fr 1fr 4fr; }
#intro-aux        { grid-template-columns: 1fr 2fr; }
#lingua-aux       { grid-template-columns: 1fr 1fr; }
#cta-aux          { grid-template-columns: 3fr 1fr; }
#gallery-aux      { grid-template-columns: repeat(4, 1fr); }
#services-aux     { grid-template-columns: 1fr 0; }
#footer-aux       { grid-template-columns: 3fr 4fr 2fr 3fr; }

/* ── apply.html ── */

#apply-top-aux      { grid-template-columns: 2fr 3fr 1fr; }
#apply-title-aux    { grid-template-columns: 1fr 10fr 1fr; }
#apply-divider-aux  { grid-template-columns: 2fr 3fr 1fr; }
#apply-bottom-aux   { grid-template-columns: 2fr 5fr 1fr; }

/* ── privacy.html ── */

#privacy-top-aux    { grid-template-columns: 2fr 3fr 1fr; }
#privacy-title-aux  { grid-template-columns: 5fr 1fr; }
#privacy-bottom-aux { grid-template-columns: 2fr 5fr 1fr; }

/* ── splash.html ── */

#splash-top-aux     { grid-template-columns: 3fr 1fr 5fr; }
#splash-bottom-aux  { grid-template-columns: 2fr 5fr 1fr; }

/* ── 404.html ── */

#notfound-top-aux    { grid-template-columns: 3fr 1fr 5fr; }
#notfound-bottom-aux { grid-template-columns: 2fr 5fr 1fr; }


/* ====================================================================
   960px
   ==================================================================== */

@media (max-width: 960px) {
  /* Per-row overrides go here as needed */
}


/* ====================================================================
   720px
   ==================================================================== */

@media (max-width: 720px) {

  /* Default collapse: 2 columns */
  .aux {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: 0;
    overflow: hidden;
  }

  .aux > * {
    min-height: 3rem;
  }

  /* ── index overrides ── */

  #header-aux {
    grid-template-columns: 1fr 4fr;
  }
  #header-aux > :nth-child(2) {
    display: none;
  }

  /* ── apply overrides ── */

  #apply-top-aux    { grid-template-columns: 1fr 1fr; }
  #apply-title-aux  { grid-template-columns: 1fr; }
  #apply-bottom-aux { grid-template-columns: 1fr 1fr; }
}


/* ====================================================================
   512px
   ==================================================================== */

@media (max-width: 512px) {

  /* Default collapse: single column */
  .aux {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: 0;
  }

  /* ── index overrides ── */

  #header-aux {
    grid-template-columns: 1fr;
  }
  #header-aux > :nth-child(1),
  #header-aux > :nth-child(2) {
    display: none;
  }
}