/* =================================================================== */
/* COMPONENT: Circular Layered Image                                   */
/* FILE:      circular-layered-image.css                               */
/* =================================================================== */

/* * TABLE OF CONTENTS
 * -------------------------------------------------------------------
 * 1.1 .c-layered-image (Variables & Container)
 * 1.2 Shared Layer Styles (.c-layered-image__bg, .c-layered-image__frame)
 * 1.3 Background Layer (.c-layered-image__bg)
 * 1.4 Frame Layer (.c-layered-image__frame)
 * 1.5 Image (.c-layered-image__img)
 */

/* =================================================================== */
/* 1.1 .c-layered-image (Variables & Container)                        */
/* =================================================================== */

/*
 * The main container.
 * Default variables are defined here (encapsulated or self-contained rather than at the :root level where it would affect everything on the page).
 * Container size is calculated to fit the offset elements perfectly.
 */
.c-layered-image {
  /*
    * --bg-size is for the large green/rainbow circle.
    * --frame-size is for the smaller image circle.
    */
  --bg-size: 249.318px;
  --frame-size: 236.196px;
  --element-border-radius: 50%;

  /* Offsets are 0 to make the top/right edges align */
  --offset-block: 0px;
  --offset-inline: 0px;

  position: relative;
  width: calc(var(--bg-size) + var(--offset-inline));
  height: calc(var(--bg-size) + var(--offset-block));
  margin: 0 auto;
}
/* Tablet / Small Desktop */
@media screen and (min-width: 768px) {
  .c-layered-image {
    --bg-size: 307.8px;
    --frame-size: 291.6px;
  }
}

/* Large Desktop */
@media screen and (min-width: 1920px) {
  .c-layered-image {
    --bg-size: 380px;
    --frame-size: 360px;
  }
}
/* =================================================================== */
/* 1.2 Shared Layer Styles (.c-layered-image__bg, .c-layered-image__frame) */
/* =================================================================== */

.c-layered-image__bg,
.c-layered-image__frame {
  position: absolute;
  border-radius: var(--element-border-radius);
  box-sizing: border-box;
}

/* =================================================================== */
/* 1.3 Background Layer (.c-layered-image__bg)                         */
/* =================================================================== */

/*
 * The background layer (the green gradient circle)
 * Positioned at the bottom-left of the container.
 */
.c-layered-image__bg {
  width: var(--bg-size);
  height: var(--bg-size);
  /* bottom: 0;
  left: 0; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  /* Prevent sub-pixel bleed */
  backface-visibility: hidden;
}
/* Apply the Rainbow Gradient to Board Members */
.board-member .c-layered-image__bg {
  background: linear-gradient(
    188deg,
    #38499c 16.06%,
    #5f3c9b 40.65%,
    #306852 72.48%,
    #e7ab49 91.63%
  );
}
/* Apply the Blue Gradient to Community Voices Members */
.community-member .c-layered-image__bg {
  background: linear-gradient(
    135deg,
    #eceef6 34.82%,
    #ccd0e6 51.96%,
    #adb4d6 69.1%,
    #8f99c8 86.23%
  );
}
/* Apply the Green Gradient to Team Members and Working Group */
.team-member .c-layered-image__bg,
.working-group-member .c-layered-image__bg,
.part-time-member .c-layered-image__bg {
  background: linear-gradient(
    180deg,
    #51e78d 12%,
    #31b063 49%,
    #156836 81%,
    #0f4625 100%
  );
}

/* =================================================================== */
/* 1.4 Frame Layer (.c-layered-image__frame)                           */
/* =================================================================== */

/*
 * The foreground layer (the image)
 * Positioned at the top-right of the container.
 */
.c-layered-image__frame {
  width: var(--frame-size);
  height: var(--frame-size);
  top: 0;
  right: 0;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* =================================================================== */
/* 1.5 Image (.c-layered-image__img)                                   */
/* =================================================================== */

/* The image itself, set to fill its circular frame */
.c-layered-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the circle */
  display: block;
}
.c-layered-image__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}