/* /* ==========================================================================
   INCUBATEES PROFILE PAGE — complete, self-contained styling.
   No dependency on old .profile-card rules elsewhere — this file owns
   everything under .clients-content.
   ========================================================================== *

:root {
  --client-green-dark: #004d00;
  --client-green-accent: #004d00;
  --client-green-light: #eafbe4;
  --client-ink: #16241a;
  --client-white: #ffffff;
}

/* ---------- Page wrapper ---------- *

.clients-content {
  padding-top: 40px;
  padding-bottom: 20px;
  background: #fffbe6;
}

/* ---------- Grid ---------- 

.profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 6vw 80px;
  align-items: stretch;
}

/* ---------- Card ---------- 

.profile-card {
  background: var(--client-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(13, 61, 22, 0.06);
  border: 1px solid rgba(13, 61, 22, 0.06);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--client-green-accent), var(--client-green-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.profile-card:hover::before {
  transform: scaleX(1);
}

.profile-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(13, 61, 22, 0.13);
  border-color: transparent;
}

.profile-image {
  height: 200px;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--client-green-light) 0%, #f4fbf1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  position: relative;
}

.profile-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.profile-content {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
}

.profile-content h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.2px;
  color: var(--client-ink);
  margin: 0 0 6px;
  line-height: 1.3;
}

.profile-tag {
  font-family: "Roboto", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--client-green-accent);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 20px;
}

/* ---------- Buttons ---------- 

.buttons {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.business-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 18px;
  border-radius: 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: var(--client-green-dark);
  color: var(--client-white);
  box-shadow: 0 2px 8px rgba(13, 61, 22, 0.18);
  transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.business-button:hover {
  background: var(--client-green-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(47, 143, 63, 0.3);
}

.business-button:active {
  transform: translateY(0);
}

/* ---------- Force-override an inline style being injected by something
   outside this stylesheet (confirmed via DevTools: background-color: gray;
   pointer-events: none; opacity: 0.5; appearing directly on the elements).
   !important is the only thing that can beat an inline style attribute. ---------- 

.business-button,
.view-profile-btn {
  background-color: var(--client-green-dark) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.business-button.secondary-button {
  background-color: transparent !important;
}

.business-button:hover,
.view-profile-btn:hover {
  background-color: var(--client-green-accent) !important;
}

.business-button.secondary-button:hover {
  background-color: var(--client-green-dark) !important;
}

.business-button.secondary-button {
  background: transparent;
  color: var(--client-green-dark);
  border: 1.5px solid rgba(13, 61, 22, 0.25);
  box-shadow: none;
}

.business-button.secondary-button:hover {
  background: var(--client-green-dark);
  color: var(--client-white);
  border-color: var(--client-green-dark);
  box-shadow: 0 6px 16px rgba(13, 61, 22, 0.2);
}

/* ---------- PDF Modal ---------- 

.pdf-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 36, 17, 0.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.pdf-modal.open {
  display: flex;
}

.pdf-modal-content {
  background: var(--client-white);
  width: min(900px, 100%);
  height: min(85vh, 900px);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: var(--client-green-dark);
  color: var(--client-white);
  flex-shrink: 0;
}

.pdf-modal-header h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  margin: 0;
}

.pdf-modal-close {
  background: none;
  border: none;
  color: var(--client-white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.pdf-modal-content iframe {
  flex: 1;
  width: 100%;
  border: none;
}

.pdf-modal-footer {
  display: flex;
  gap: 20px;
  padding: 12px 22px;
  background: var(--client-green-light);
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.pdf-modal-footer a {
  color: var(--client-green-dark);
  text-decoration: none;
  font-weight: 500;
}

.pdf-modal-footer a:hover {
  text-decoration: underline;
}

/* ---------- Responsive ---------- 

@media (max-width: 1044px) {
  .profiles {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    padding: 5%;
  }
}

@media (max-width: 640px) {
  .profiles {
    grid-template-columns: 1fr;
  }

  .profile-content {
    text-align: center;
  }

  .pdf-modal {
    padding: 10px;
  }
} */


/* ==========================================================================
   INCUBATEES PROFILE PAGE — complete, self-contained styling.
   No dependency on old .profile-card rules elsewhere — this file owns
   everything under .clients-content.
   ========================================================================== */

:root {
  --client-green-dark: #004d00;
  --client-green-accent: #004d00;
  --client-green-light: #eafbe4;
  --client-ink: #16241a;
  --client-white: #ffffff;
}

/* ---------- Page wrapper ---------- */

.clients-content {
  padding-top: 40px;
  padding-bottom: 20px;
  background: #fffbe6;
}

/* ---------- Grid ---------- */

.profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 6vw 80px;
  align-items: stretch;
}

/* ---------- Card ---------- */

.profile-card {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.profile-image {
  height: 210px;
  flex-shrink: 0;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--client-green-light) 0%, #f4fbf1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  box-shadow: 0 14px 32px rgba(13, 61, 22, 0.14);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.profile-card:hover .profile-image {
  transform: translateY(-4px) scale(1.02);
}

.profile-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.profile-content {
  background: var(--client-white);
  border-radius: 20px;
  margin: -34px 12px 0;
  padding: 26px 22px 24px;
  position: relative;
  z-index: 2;
  box-shadow: 0 18px 38px rgba(13, 61, 22, 0.1);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: left;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.profile-card:hover .profile-content {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(13, 61, 22, 0.16);
}

.profile-content h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.2px;
  color: var(--client-ink);
  margin: 0 0 6px;
  line-height: 1.3;
}

.profile-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  font-family: "Roboto", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--client-green-dark);
  background: var(--client-green-light);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  margin: 0 0 18px;
}

.profile-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--client-green-accent);
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */

.buttons {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.business-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  border-radius: 999px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: var(--client-green-dark);
  color: var(--client-white);
  box-shadow: 0 4px 12px rgba(13, 61, 22, 0.22);
  transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.business-button::after {
  content: "→";
  display: inline-block;
  transition: transform 0.25s ease;
}

.business-button:hover::after {
  transform: translateX(3px);
}

.business-button:hover {
  background: var(--client-green-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(47, 143, 63, 0.32);
}

.business-button:active {
  transform: translateY(0);
}

.business-button.secondary-button {
  background: transparent;
  color: var(--client-green-dark);
  border: 1.5px solid rgba(13, 61, 22, 0.2);
  box-shadow: none;
}

.business-button.secondary-button:hover {
  background: var(--client-green-dark);
  color: var(--client-white);
  border-color: var(--client-green-dark);
  box-shadow: 0 8px 20px rgba(13, 61, 22, 0.22);
}

/* ---------- PDF Modal ---------- */

.pdf-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 36, 17, 0.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.pdf-modal.open {
  display: flex;
}

.pdf-modal-content {
  background: var(--client-white);
  width: min(900px, 100%);
  height: min(85vh, 900px);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pdf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: var(--client-green-dark);
  color: var(--client-white);
  flex-shrink: 0;
}

.pdf-modal-header h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  margin: 0;
}

.pdf-modal-close {
  background: none;
  border: none;
  color: var(--client-white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.pdf-modal-content iframe {
  flex: 1;
  width: 100%;
  border: none;
}

.pdf-modal-footer {
  display: flex;
  gap: 20px;
  padding: 12px 22px;
  background: var(--client-green-light);
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.pdf-modal-footer a {
  color: var(--client-green-dark);
  text-decoration: none;
  font-weight: 500;
}

.pdf-modal-footer a:hover {
  text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media (max-width: 1044px) {
  .profiles {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    padding: 5%;
  }
}

@media (max-width: 640px) {
  .profiles {
    grid-template-columns: 1fr;
  }

  .profile-content {
    text-align: center;
    margin: -28px 8px 0;
  }

  .profile-tag {
    margin-left: auto;
    margin-right: auto;
  }

  .pdf-modal {
    padding: 10px;
  }
}

/* ---------- Force-override an inline style being injected by something
   outside this stylesheet (confirmed via DevTools: background-color: gray;
   pointer-events: none; opacity: 0.5; appearing directly on the elements).
   !important is the only thing that can beat an inline style attribute.
   Kept at the end of the file so it wins over everything above it too. ---------- */

.business-button,
.view-profile-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  background-color: var(--client-green-dark) !important;
}

.business-button.secondary-button {
  background-color: transparent !important;
}

.business-button:hover,
.view-profile-btn:hover {
  background-color: var(--client-green-accent) !important;
}

.business-button.secondary-button:hover {
  background-color: var(--client-green-dark) !important;
}