/*
 APF Mobile Hotfix 2.11
 - Pushes .apf-btn CTA links under text on narrow screens
 - Ensures cards expand downward
 - Stacks contact box (image above, text below) on mobile
 - Keeps initiative roles usable (1 column on mobile)
*/

/* Base safety: avoid admin */
@media (min-width:0px) {
  html.wp-toolbar body {}
}

/* 1) Generic buttons -> block on mobile */
@media (max-width: 768px) {
  a.apf-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }
}

/* 2) Initiative roles grid -> single column on mobile */
@media (max-width: 768px) {
  /* Try common grid wrappers used on the Jobs page */
  .apf-grid-roles,
  .apf-initiativ-grid,
  .apf-roles-grid,
  .apf-roles,
  .apf-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* role cards: allow natural height */
  .apf-role,
  .apf-card,
  .apf-box,
  .apf-list-item {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* 3) Contact box: stack vertically on mobile */
@media (max-width: 768px) {
  .apf-contact,
  .apf-contact-box,
  .tm-kontaktbox,
  .tm-kontakt,
  .kontakt-box {
    display: block !important;
  }
  .apf-contact img,
  .apf-contact-box img,
  .tm-kontaktbox img,
  .tm-kontakt img,
  .kontakt-box img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 12px !important;
  }
  .apf-contact .apf-col,
  .apf-contact-box .apf-col,
  .tm-kontaktbox .tm-col,
  .tm-kontakt .tm-col,
  .kontakt-box .col {
    width: 100% !important;
  }

  /* Buttons in contact box: full width */
  .apf-contact .apf-btn,
  .apf-contact-box .apf-btn,
  .tm-kontaktbox .apf-btn,
  .tm-kontakt .apf-btn,
  .kontakt-box .apf-btn {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    text-align: center !important;
  }
}

/* 4) Small typography/spacing adjustments on mobile */
@media (max-width: 480px) {
  .apf-box h3, .apf-card h3 { font-size: 1.05rem !important; }
  .apf-box, .apf-card { padding: 12px !important; }
}