:root {

  /* =====================================================

   COLORS

===================================================== */



  --hsb-green: #4d7e6b;

  --hsb-green-soft: #84978f;

  --hsb-green-light: #bbd2ca;



  --hsb-gold: #c7ac76;

  --hsb-cream: #f7f4ee;



  --hsb-text: #1f3b34;



  /* =====================================================

   TYPOGRAPHY

===================================================== */



  --hsb-font: "Montserrat", sans-serif;



  --hsb-font-light: 300;

  --hsb-font-regular: 400;

  --hsb-font-medium: 500;

  --hsb-font-bold: 700;



  /* Fluid type scale */



  --hsb-text-xs: clamp(12px, 0.7vw, 13px);

  --hsb-text-sm: clamp(13px, 0.8vw, 14px);

  --hsb-text-md: clamp(14px, 0.9vw, 16px);

  --hsb-text-lg: clamp(16px, 1.2vw, 20px);

  --hsb-text-xl: clamp(18px, 1.5vw, 22px);



  /* =====================================================

   SPACING SCALE

===================================================== */



  --hsb-space-xs: clamp(6px, 0.4vw, 8px);

  --hsb-space-sm: clamp(10px, 0.7vw, 14px);

  --hsb-space-md: clamp(14px, 1vw, 20px);

  --hsb-space-lg: clamp(20px, 1.5vw, 28px);

  --hsb-space-xl: clamp(28px, 2vw, 40px);



  /* =====================================================

   COMPONENT

===================================================== */



  --hsb-radius-sm: 4px;

  --hsb-radius-pill: 20px;

}



/* =====================================================

   BASE

===================================================== */



.hsb-wrapper {

  font-family: var(--hsb-font);

  color: var(--hsb-text);

}



/* =====================================================

   GRID

===================================================== */



.profile-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: var(--hsb-space-xl);

}



/* =====================================================

   CARD

===================================================== */



.profile-card {

  background: #f6f7f6;

  padding: var(--hsb-space-lg);

  border-radius: var(--hsb-radius-sm);

  display: flex;

  flex-direction: column;

  min-height: 320px;

}



.profile-spacer {

  flex-grow: 1;

}



/* =====================================================

   AREA SYSTEM

===================================================== */



.profile-area-wrapper {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: var(--hsb-space-sm);

}



.profile-area-wrapper.human-resources {

  --area-color: var(--hsb-green);

}



.profile-area-wrapper.assistance {

  --area-color: var(--hsb-gold);

}



.profile-area-wrapper.payroll {

  --area-color: var(--hsb-green-soft);

}



/* Area badge */



.profile-area {

  display: inline-block;

  font-size: var(--hsb-text-xs);

  font-weight: var(--hsb-font-medium);

  padding: 4px 14px;

  border-radius: var(--hsb-radius-pill);

  background: var(--area-color);

  color: #fff;

  text-transform: uppercase;

}



/* Availability icon */



.profile-availability-icon {

  display: inline-flex;

  align-items: center;

  font-size: clamp(18px, 1.2vw, 22px);

  color: var(--area-color);

}



/* =====================================================

   TITLE

===================================================== */



.profile-title {

  font-size: var(--hsb-text-xl);

  font-weight: var(--hsb-font-medium);

  color: var(--hsb-text);

  margin-bottom: var(--hsb-space-sm);

  line-height: 1.3;

}



/* =====================================================

   QUICK INFO

===================================================== */



.profile-info {

  font-size: var(--hsb-text-sm);

  color: var(--hsb-green-soft);

  line-height: 1.4;

  min-height: 40px;



  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



/* =====================================================

   DIVIDER

===================================================== */



.profile-divider {

  height: 1px;

  background: var(--hsb-green-soft);

  margin: var(--hsb-space-md) 0;

}



/* =====================================================

   LINK

===================================================== */



.profile-card a.profile-link {

  display: inline-flex;

  align-items: center;

  gap: var(--hsb-space-xs);

  font-size: var(--hsb-text-sm);

  font-weight: var(--hsb-font-medium);

  color: var(--hsb-text) !important;

  text-decoration: none !important;

  transition: color 0.25s ease;

}



.profile-card a.profile-link::after {

  content: "→";

  transition: transform 0.25s ease;

}



.profile-card a.profile-link:hover::after {

  transform: translateX(4px);

}



/* =====================================================

   POPUP

===================================================== */



.profile-popup-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.5);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  visibility: hidden;

  opacity: 0;

  transition: opacity 0.3s ease;

  perspective: 1200px;

}



.profile-popup-overlay.active {

  visibility: visible;

  opacity: 1;

}



.profile-popup {

  width: 800px;

  max-height: 80vh;

  background: #fff;

  padding: var(--hsb-space-lg);

  overflow-y: auto;

  transform: rotateY(90deg);

  transform-origin: center;

  transition: transform 0.5s ease;

  position: relative;

}



.profile-popup-overlay.active .profile-popup {

  transform: rotateY(0);

}



.popup-close {

  position: absolute;

  top: 15px;

  right: 20px;

  cursor: pointer;

  font-weight: var(--hsb-font-bold);

  font-size: var(--hsb-text-md);

}



/* =====================================================

   FILTER

===================================================== */



.hsb-filter-container {

  margin-bottom: var(--hsb-space-md);

  background: var(--hsb-green-light);

}



.hsb-filter-area {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--hsb-space-xl);

  margin-bottom: var(--hsb-space-xl);

}



.hsb-filter-group {

  display: flex;

  flex-direction: column;

  gap: var(--hsb-space-sm);

  position: relative;

}



.hsb-filter-title {

  font-size: var(--hsb-text-lg);

  font-weight: var(--hsb-font-medium);

  display: flex;

  align-items: center;

  gap: var(--hsb-space-xs);

}



/* =====================================================

   SELECT

===================================================== */



.hsb-filter-group select {

  width: 100%;

  padding: var(--hsb-space-sm) calc(var(--hsb-space-lg) * 2) var(--hsb-space-sm)

    var(--hsb-space-sm);



  border: 1px solid var(--hsb-green-soft);

  background-color: #fff;

  font-size: var(--hsb-text-md);

  color: var(--hsb-text);

  border-radius: var(--hsb-radius-sm);



  appearance: none;

  -webkit-appearance: none;

  -moz-appearance: none;



  cursor: pointer;

  transition: border 0.2s ease;



  background-image:

    linear-gradient(var(--hsb-green-soft), var(--hsb-green-soft)),

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%231f3b34' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");



  background-repeat: no-repeat, no-repeat;

  background-position:

    right 44px center,

    right 18px center;

  background-size:

    1px 24px,

    12px 8px;

}



.hsb-filter-group select:hover {

  border-color: #bfcac5;

}



.hsb-filter-group select:focus {

  outline: none;

  border-color: var(--hsb-green);

}



/* =====================================================

   CHECKBOX

===================================================== */



.hsb-checkbox {

  display: flex;

  align-items: center;

  gap: var(--hsb-space-xs);

  font-size: var(--hsb-text-sm);

  cursor: pointer;

}



.hsb-checkbox input[type="checkbox"] {

  width: 18px;

  height: 18px;

  cursor: pointer;

  accent-color: var(--hsb-green);

}



/* =====================================================

   ACTIONS

===================================================== */



.hsb-filter-area-actions {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--hsb-space-xl);

  margin-top: var(--hsb-space-md);

  align-items: center;

}



.hsb-reset {

  font-size: var(--hsb-text-md);

  max-width: 200px;

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

}



/* =====================================================

   PAGINATION

===================================================== */



.hsb-pagination {

  display: flex;

  gap: var(--hsb-space-xs);

  margin-top: var(--hsb-space-xl);

  justify-content: center;

}



.hsb-pagination button {

  padding: 10px 14px;

  border: 1px solid var(--hsb-green-soft);

  background: #fff;

  cursor: pointer;

  border-radius: var(--hsb-radius-sm);

  transition: all 0.2s ease;

}



.hsb-pagination button:hover {

  border-color: var(--hsb-green);

}



.hsb-pagination button.active {

  background: #fff;

  border-color: #fff;

}



/* =====================================================

   POPUP CTA

===================================================== */



.profile-popup .popup-mail {

  margin-top: var(--hsb-space-lg);

  padding-top: var(--hsb-space-md);

  border-top: 1px solid var(--hsb-green-soft);

}



.profile-popup .popup-mail-link {

  display: inline-flex;

  align-items: center;

  gap: var(--hsb-space-xs);

  background: var(--hsb-gold);

  color: #fff !important;

  padding: 12px 26px;

  font-size: var(--hsb-text-md);

  font-weight: var(--hsb-font-medium);

  text-decoration: none !important;

  border-radius: var(--hsb-radius-sm);

  transition: all 0.25s ease;

}



.hsb-mail-icon {

  font-size: clamp(18px, 1.2vw, 24px);

}



.profile-popup .popup-mail-link:hover {

  transform: translateY(-2px);

}



/* =====================================================

   RESPONSIVE

===================================================== */



@media (max-width: 1024px) {

  .profile-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .hsb-filter-area {

    grid-template-columns: 1fr;

    gap: var(--hsb-space-lg);

  }

}



@media (max-width: 640px) {

  .profile-grid {

    grid-template-columns: 1fr;

  }



  .profile-popup {

    width: 90%;

    height: 80%;

  }

}

@media (max-width: 768px) {

  .hsb-filter-area-actions {

    grid-template-columns: 1fr;

    gap: var(--hsb-space-sm);

  }



  .hsb-cost-popup-trigger {

    width: 100%;

  }



  .hsb-reset {

    width: 100%;

  }

}