/* Miha CSS styles */

/* -----------------
--- BASIC ABSTRACT
--------------------*/

/* Forms basic */
::placeholder {
  font-weight: 600;
  color: #1e293b;
  opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
  font-weight: 600;
  color: #1e293b;
}

/* -----------
--- LAYOUTS
--------------*/

/* Custom aka Boostrap for com_user */
.rrow {
  display: flex;
}
.rrow .ccol {
  width: 100%;
}
.rrow .ccol-9 {
  width: 70%;
}
.rrow .ccol-3 {
  width: 30%;
}

/* Offcanvas layout */
.offcanvas-layout {
  display: flex;
}
.offcanvas-panel {
  background: #1e293b;
  padding: 20px;
  font-size: 12px;
  font-weight: 300;
  color: #fff;
}
.offcanvas-panel a {
  color: #fff;
}
.offcanvas-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.offcanvas-panel ul li {
  margin-bottom: 20px;
}

/* Two columns layout - with sidebar */
.sidebar-layout {
  display: flex;
  padding: 0 30px;
  gap: 20px;
}
.sidebar-layout .main-page {
  flex: 1;
}
.sidebar-layout .sidebar {
  width: 25%;
}
.sidebar-layout .sidebar:empty {
  display: none;
}

/* -----------
--- MODULES
--------------*/

/* mod--sidebar-news */
.mod--sidebar-news {
  padding-top: 30px;
}
.mod--sidebar-news h3 {
  font-size: 40px;
  padding-left: 15px;
}
.mod--sidebar-news ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mod--sidebar-news ul li {
  margin: 0 0 30px;
  padding: 0;
}
.mod--sidebar-news .mod-articles-item-content {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.mod--sidebar-news .mod-articles-item-content:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
}
.mod--sidebar-news .mod-articles-title {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0 15px;
  z-index: 1;
}
.mod--sidebar-news .mod-articles-title,
.mod--sidebar-news .mod-articles-title a {
  color: #fff;
}
.mod--sidebar-news .mod-articles-image {
  margin-bottom: 0;
}

/* --------------------------
--- com-users - profile
----------------------------- */
.page.com_users {
  background: #eee;
}
.user-profile-area {
  background: #fff;
  border-top-right-radius: 10px;
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.05);
}
.user-profile-sidebar {
  padding: 0 20px;
}

/* ----------------
--- com_userlist
------------------- */

.com_userlist .header-main .container-wrapper {
  width: 100%;
  padding: 0 30px;
}

/* ----------------------------------
--- TALENT DATABASE listing (users)
------------------------------------- */

/* Core joomla form listing */
.talent-database .page-body form {
  display: none;
}

.talent-name h2 span {
  display: block;
  font-size: 12px;
  color: grey;
}

/* Article: item-talent search */
.item-talent .talent-search-container {
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05);
  padding: 20px;
  border-radius: 10px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.item-talent .talent-search-form .search-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Form Talent search */
.talent-search-container {
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05);
  padding: 20px;
  border-radius: 10px;
  margin: 0 auto;
}
.talent-search-form {
  width: 100%;
}
.talent-search-form input,
.talent-search-form select {
    width: 100%;
}
.input-field,
.select-field {
  flex: 1;
  min-width: 160px;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  height: 52px;
}
.select-field {
  font-weight: 600;
  color: #1e293b;
}
.field.search {
  position: relative;
}
.field.search .fa-solid {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 24px;
}

/* search-grid */
.search-grid {
  display: grid;
  gap: 1rem;
  align-items: end;

  /* basic */
  grid-template-columns:
      2fr   /* Search */
      1fr   /* Country */
      1fr   /* Workplace */
      auto; /* Buttons */
}
.search-grid .skills,
.search-grid .age,
.search-grid .languages,
.search-grid .experience {
  display: none;
}
.search-grid.detailed {
  grid-template-columns: repeat(3, 1fr);
}

/* Search full width */
.search-grid.detailed .search {
  grid-column: 1 / -1;
}

/* display additional fields */
.search-grid.detailed .skills,
.search-grid.detailed .age,
.search-grid.detailed .languages,
.search-grid.detailed .experience {
  display: block;
}

/* buttons - bottom right */
.search-grid.detailed .actions {
  grid-column: 2 / 4;
  justify-self: end;
}

/* basic: btn Search left */
.search-grid .actions {
  display: flex;
  gap: 0.5rem;
}

/* detailed: btn Search right */
.search-grid.detailed .actions {
  flex-direction: row-reverse;
}

/* -----------------------
--- TALENT PROFILE page
-------------------------- */

/* Labels */
.com_userlist label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1D293B;
  margin-bottom: 10px;
}
.com_userlist .looking-for label {
  color: #fff;
}
.com_userlist label.grey {
  color: #6B7280;
}
.t-value {
  font-weight: 600;
}

.talent-profile .main-page {
  padding: 10px;
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  background: #fff;
}
.talent-profile .page-header {
  text-align: right;
}
.btn-back-close {
  font-size: 64px;
}

.talent-fields-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 20% auto;
}
.talent-left-sidebar {
  overflow: hidden;
}
.profile-img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}
.looking-for {
  background: #EF4444;
  color: #fff;
  padding: 30px 20px;
  min-height: 200px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-bottom: 30px;
}
.looking-for-jobs {
  margin-bottom: 30px;
}
.cta-contact .btn {
  width: 100%;
  margin-bottom: 15px;
}
.talent-section {
  padding-top: 20px;
  padding-bottom: 30px;
  border-bottom: 1px solid #D3D4D8;
  width: 90%;
}
.talent-section.description {
  display: grid;
  grid-template-columns: 70% auto;
  gap: 60px;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.years-of-experience .t-value {
  font-size: 24px;
  font-weight: 600;
}

.birthday-age,
.current-job-country {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
}
.current-job-and-company .current-company {
  font-size: 12px;
  color: #6B7280;
}

.com_userlist .talent-section.experience label {
  margin-bottom: 25px;
}
.talent-section.experience .exp-item {
  display: grid;
  grid-template-columns: 100px auto;
  margin-bottom: 20px;
  font-weight: 600;
}
.talent-section.experience .exp-item .year-range {
  font-size: 12px;
  color: #6B7280;
}
.talent-section.experience .exp-item .company {
  font-size: 12px;
  color: #6B7280;
}

.talent-section.photos-videos {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  margin-top: 20px;
  padding-top: 0;
  border-bottom: 0;
}
.talent-section.photos-videos:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #ccc;
  transform: translateX(-0.5px);
}