/**
 * All Stars Plugin - Public Styles
 *
 * This file contains styling for elements related to the All Stars plugin
 * on the front-end (public-facing) portion of the website.
 */

 /* ==========================================
   Responsive Bootstrap‑like Grid System
   ========================================== */

/* ROW: Flex container for columns */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  
  /* Base column styles: apply to all columns */
  [class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
  
  /* Extra small devices (portrait phones, <576px)
     Use the default col- classes */
  .col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-3 { flex: 0 0 25%; max-width: 25%; }
  .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-6 { flex: 0 0 50%; max-width: 50%; }
  .col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-9 { flex: 0 0 75%; max-width: 75%; }
  .col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-12 { flex: 0 0 100%; max-width: 100%; }
  
  /* Small devices (landscape phones, ≥576px) */
  @media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  }
  
  /* Medium devices (tablets, ≥768px) */
  @media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  }
  
  /* Large devices (desktops, ≥992px) */
  @media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  }
  
  /* Extra large devices (large desktops, ≥1200px) */
  @media (min-width: 1200px) {
    .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
  }
  

/* Basic styling for contributor listing */
.all-stars-page .all-stars-header {
    margin: 20px 0;
}

.all-stars-page-content {
    margin: 30px 0;
}

.all-stars-contributors {
    margin: 20px 0;
}

.all-stars-contributors h2 {
    margin-bottom: 10px;
    font-size: 1.5em;
}

/* Example style for an unordered list of contributors */
.all-stars-contributors ul {
    list-style-type: disc;
    padding-left: 20px;
}

.all-stars-contributors li {
    margin-bottom: 5px;
}

/* Basic styling for contributions listing */
.all-stars-contributions {
    margin: 20px 0;
}

.all-stars-contributions h2 {
    margin-bottom: 10px;
    font-size: 1.5em;
}

.all-stars-contributions ul {
    list-style-type: circle;
    padding-left: 20px;
}

.all-stars-contributions li {
    margin-bottom: 5px;
}

.all-stars-star {
    position: relative;
    top: -1px;
    display: inline-block;
    margin-right: 10px;
    height: 15px;
    width: 15px;
    vertical-align: middle;
    background: url(images/star.svg) no-repeat center center / contain;
}
.all-stars-block-title {
    display: inline-block;
    padding: 5px 10px 7px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 16px;
    border-radius: 20px;
    background-color: #951b81;
}
.contributor-media h1.entry-title,
.contributor-media h2.entry-title {
    display: block;
    margin: 15px 0 10px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}
.contributor-media .contributor-photo img {
    display: block;
    border-radius: 20px;
    box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
}
.contributor-media .company-logo img {
    display: block;
    margin: 0 auto;
    height: auto;
    max-width: 150px;
}
.contributor-links .main-links {
    display: flex;
    justify-content: center;
    margin: 15px 0 10px;
}
.contributor-links .main-links a {
    display: block;
    padding: 5px 10px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: all 200ms ease-in-out;
}
.contributor-links .main-links a.profile {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    background-color: #f08466;
}
.contributor-links .main-links a.contributions {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #c694c2;
}
.contributor-links .linkedin-link {
    text-align: center;
}
.contributor-links .linkedin-link a.linkedin span:before {
    display: inline-block;
    content: '';
    height: 20px;
    width: 100px;
    background: url(images/linkedin.svg) no-repeat center center / contain;
    opacity: 0.6;
    transition: all 200ms ease-in-out;
    transform-origin: center;
}
.contributor-links .main-links a.profile.active,
.contributor-links .main-links a.profile:hover {
    background-color: #e30613;
}
.contributor-links .main-links a.contributions.active,
.contributor-links .main-links a.contributions:hover {
    background-color: #951b81;
}
.contributor-links .linkedin-link a.linkedin:hover span:before {
    opacity: 1;
    transform: scale(1.2);
}

.all-stars-info {
    padding: 0 15px;
}
.all-stars-info article {
    padding: 20px 20px 1px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
}
.all-stars-info article .entry-content {
    font-size: 18px;
    line-height: 1.5;
}

.contributor-contributions .contributions-list .post-item {
    background-color: #fff;
    box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
}
.contributor-contributions .contributions-list .post-item + .post-item {
    margin-top: 15px;
}
.contributor-contributions .contributions-list .post-item .post-title a {
    display: block;
    padding: 10px 0;
    font-size: 18px;
}
.contributor-contributions-page .contributor-contributions .contributions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.contributor-contributions-page .contributor-contributions .contributions-list .post-item {
    margin: 0;
    width: calc((100% / 3) - 14px);
}

/* LIST */
.star-contributors-archive .contributors-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.star-contributors-archive .contributors-list article {
    width: calc((100% / 6) - 34px);
}
.star-contributors-archive .contributor-links .main-links a.profile {
    background-color: #e30613;
}
.star-contributors-archive .contributor-links .main-links a.contributions {
    background-color: #951b81;
}
.star-contributors-archive .contributor-links .linkedin-link a.linkedin span:before {
    opacity: 1;
}

/* FILTER */
.all-stars-filter {
    margin: 20px 0;
}
.all-stars-filter .sort-switcher {
    width: 30%;
}
.all-stars-filter .sort-switcher span {
    padding: 0 3px;
    color: #e30613;
    font-size: 20px;
}
.all-stars-filter .sort-switcher label {
    display: block;
    width: 100%;
}
.all-stars-filter .sort-switcher label,
.all-stars-filter .sort-switcher button {
    color: #9d9d9c;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
}
.all-stars-filter .sort-switcher button {
    appearance: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.all-stars-filter .sort-switcher button.active {
    color: #e30613;
}
.all-stars-filter .sort-switcher {}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .contributor-contributions-page .contributor-contributions .contributions-list .post-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 500px) {
    .contributor-contributions-page .contributor-contributions .contributions-list .post-item {
        width: 100%;
    }
}