:root {
  /* Color */
  --color-heading: #48556a;
  --color-text: #6e8098;
  --color-body-bg: #ecf2f8;
  --color-text-light: #9daec2;
  --color-article-bg: #ffffff;
}

/* Typography */
.manrope {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h1 {
  font-weight: bold;
  /* clamp functions reach maximum at 768px (tablet breakpoint) */
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  line-height: clamp(1.5rem, 3.64vw, 1.75rem);
  letter-spacing: clamp(0.2px, 0.0325vw, 0.25px);
  color: var(--color-heading);
}

h2 {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  letter-spacing: 0.12px;
  font-weight: bold;
  color: var(--color-heading);
}

p {
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  letter-spacing: 0.12px;
}

.text-wrapper > p {
  color: var(--color-text);
}

.author-details p {
  color: var(--color-text-light);
}

/* Layout */
body {
  margin: 0;
  background-color: var(--color-body-bg);
}

main {
  padding: 74px 24px;
}

.component {
  max-inline-size: 20.5rem;
  box-sizing: content-box;
  margin-inline: auto;
  background-color: var(--color-article-bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 40px 40px -10px rgba(201, 213, 225, 0.5034);
}

.text-wrapper {
  padding-inline: 32px;
  padding-block: 36px 0;
}

.text-wrapper > p {
  margin-block: 12px 0;
}

.author-section {
  padding-block-start: 12px;
}

/* :where doesn't increase specificity and is suitable for later
   when I want to override the padding-inline property in desktop layout
*/
:where(.author-details, .social-share-panel) {
  padding-inline: 32px;
}

.author-details {
  padding-block: 17px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.author-details > img {
  max-inline-size: 40px;
  max-block-size: 40px;
  border-radius: 50%;
}

.share-btn-container {
  margin-left: auto;
}

.share-btn {
  border: none;
  border-radius: 50%;
  padding: 9px;
}

.share-btn--light {
  background-color: rgba(236, 242, 248, 1);
}

.share-btn--light:hover {
  background-color: var(--color-text);
  cursor: pointer;
}

.share-btn--light:hover path {
  fill: var(--color-article-bg);
}

.social-share-panel {
  padding-block: 20px;
  background-color: var(--color-heading);
  display: flex;
  align-items: center;
  gap: 16px;
}

.social-share-panel > p {
  margin-inline-end: 5px;
  letter-spacing: 5px;
  color: var(--color-text-light);
}

.social-share-panel__down-arrow {
  display: none;
}

.share-btn--dark {
  background-color: var(--color-text);
}

.share-btn--dark:hover {
  cursor: pointer;
  background-color: #ecf2f8;
}

.share-btn--dark:hover path {
  fill: var(--color-text);
}

/* utility classes */
.mb-0 {
  margin-block: 0;
}

.fade-toggle {
  transition: opacity 0.45s;
  opacity: 1;
  visibility: visible;
  overflow: hidden;
}

.fade-toggle.hide {
  opacity: 0;
  visibility: hidden;
  height: 0;
  pointer-events: none;
  padding: 0;
}

/* Desktop Breakpoint */

/* 64em = 1024px assuming 1em = 16px */
@media (min-width: 64em) {
  main {
    height: 100vh;
    padding: 0;
    display: flex;
    align-items: center;
  }

  .component {
    display: flex;
    max-inline-size: fit-content;
    /* overflow must be visible so the social share panel can overflow it */
    overflow: visible;
  }

  .img-wrapper {
    overflow: hidden;
    border-start-start-radius: 10px;
    border-end-start-radius: 10px;
  }

  .img-wrapper img {
    height: 100%;
  }

  .content {
    max-inline-size: 27.8125rem;
  }

  .text-wrapper {
    padding-inline: 40px;
    padding-block: 32px 0;
  }

  .author-section {
    padding-block-start: 0;
  }

  .author-details {
    padding-block: 20px 32px;
    padding-inline: 40px;
  }

  .author-details > .share-btn-container {
    /* Position social share panel relative to the share button in author-details */
    position: relative;
  }

  .social-share-panel {
    border-radius: 10px;
    padding-inline: 36px;
    padding-block: 18px;
    box-shadow: 0 10px 10px 0 rgba(201, 213, 225, 0.5034);
    /* positions relative to #author-profile-btn */
    position: absolute;
    z-index: 1;
    bottom: calc(100% + 28px);
    right: 50%;
    transform: translateX(50%);
  }

  .social-share-panel > .share-btn-container {
    display: none;
  }

  .social-share-panel__down-arrow {
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid var(--color-heading);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    position:absolute;
    bottom:-11px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* If omitted, share panel won't be able to overflow in desktop on top of 
     author profile button    
  */
  .fade-toggle {
    overflow: visible;
  }
}