/* ====================================================== */
/* PRIMARY BUTTON                                         */
/* Used on dark backgrounds (hero, cta)                   */
/* ====================================================== */

.btn-primary-custom{
background:var(--accent-500);
color:white;
padding:12px 28px;
border-radius:var(--radius-md);
font-weight:600;
text-decoration:none;
display:inline-block;
transition:all 0.25s ease;
}

.btn-primary-custom:hover{
background:var(--accent-600);
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(0,200,180,0.35);
color:white;
}

.btn-primary-custom:focus-visible{
outline:3px solid var(--accent-300);
outline-offset:3px;
}


/* ====================================================== */
/* SECONDARY BUTTON                                       */
/* Used on dark backgrounds (hero, cta)                   */
/* ====================================================== */

.btn-secondary-custom{
border:2px solid white;
color:white;
padding:12px 28px;
border-radius:var(--radius-md);
text-decoration:none;
display:inline-block;
transition:all 0.25s ease;
}

.btn-secondary-custom:hover{
background:rgba(255,255,255,0.12);
color:white;
}

.btn-secondary-custom:focus-visible{
outline:3px solid rgba(255,255,255,0.6);
outline-offset:3px;
}


/* ====================================================== */
/* OUTLINE BUTTON                                         */
/* Used on light backgrounds (about, services sections)   */
/* ====================================================== */

.btn-outline-custom{
border:2px solid var(--accent-500);
color:var(--accent-500);
padding:12px 28px;
border-radius:var(--radius-md);
font-weight:600;
text-decoration:none;
display:inline-block;
transition:all 0.25s ease;
}

.btn-outline-custom:hover{
background:var(--accent-500);
color:white;
transform:translateY(-2px);
}

.btn-outline-custom:focus-visible{
outline:3px solid var(--accent-300);
outline-offset:3px;
}


/* ====================================================== */
/* CLIENT BUTTON                                          */
/* Used for "Join as a Client" CTA — primary blue tone   */
/* Follows same pattern as btn-primary-custom             */
/* ====================================================== */

.btn-client-custom{
background:var(--primary-400);
color:white;
padding:12px 28px;
border-radius:var(--radius-md);
font-weight:600;
text-decoration:none;
display:inline-block;
transition:all 0.25s ease;
}

.btn-client-custom:hover{
background:var(--primary-500);
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(33,150,196,0.35);
color:white;
}

.btn-client-custom:focus-visible{
outline:3px solid var(--primary-300);
outline-offset:3px;
}


/* ====================================================== */
/* CTA CLIENT BUTTON                                      */
/* Used in CTA section — matches cta-btn-primary pattern  */
/* ====================================================== */

.cta-btn-client{
background:var(--primary-400);
color:white;
padding:14px 28px;
border-radius:var(--radius-md);
font-weight:600;
text-decoration:none;
display:inline-block;
box-shadow:0 6px 20px rgba(33,150,196,0.35);
transition:all 0.25s ease;
}

.cta-btn-client:hover{
background:var(--primary-500);
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(33,150,196,0.45);
color:white;
}

.cta-btn-client:focus-visible{
outline:3px solid var(--primary-300);
outline-offset:3px;
}


/* ====================================================== */
/* GENERIC CARD                                           */
/* ====================================================== */

.card{
background:white;
border-radius:var(--radius-lg);
padding:24px;
box-shadow:var(--shadow-sm);
border:1px solid var(--neutral-300);
transition:all 0.25s ease;
}

.card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-lg);
}

/* ====================================================== */
/* IMAGE PLACEHOLDER                                       */
/* Used when actual photos are not yet uploaded             */
/* ====================================================== */

.img-placeholder {
  background: var(--neutral-100);
  border: 2px dashed var(--neutral-300);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-400);
  font-size: 0.875rem;
  min-height: 200px;
  position: relative;
}

.img-placeholder::after {
  content: attr(alt);
  text-align: center;
  padding: 1rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--neutral-400);
  max-width: 80%;
}

.img-placeholder[src=""],
.img-placeholder:not([src]),
.img-placeholder[src*="placeholder"] {
  min-height: 200px;
}

@media (max-width: 576px) {
  .img-placeholder {
    min-height: 150px;
  }
}