/* =================================================================== */
/* 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 circle.
    * --frame-size is for the smaller image circle.
    */
  --bg-size: 375px;
  --frame-size: 357px;
  --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));
}

/* =================================================================== */
/* 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;
  background: linear-gradient(
    180deg,
    #51e78d 12%,
    #31b063 49%,
    #156836 81%,
    #0f4625 100%
  );
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
}

/* =================================================================== */
/* 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;
}