/***************************/
/* Fonts                   */
/***************************/

@font-face {
    font-family: 'Manrope';
    src: url('./assets/fonts/Manrope/Manrope-VariableFont_wght.ttf')
        format('truetype');
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

/***************************/
/* Reset                   */
/***************************/

/* https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core body defaults */
body {
    margin: 0;
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

/***************************/
/* Base                    */
/***************************/

:root {
    /* colors */
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-neutral-200: hsl(210, 46%, 95%);
    --clr-neutral-400: hsl(212, 23%, 69%);
    --clr-neutral-500: hsl(214, 17%, 51%);
    --clr-neutral-900: hsl(217, 19%, 35%);

    /* font sizes */
    --fs-400: 0.8125rem;
    --fs-700: 1.25rem;

    /* font weights */
    --fw-regular: 500;
    --fw-bold: 700;

    /* line-heights */
    --lh-140: 1.4;
    --lh-130: 1.3;

    /* letter spacing */
    --ls-0012-em: 0.0012em;
    --ls-025-em: 0.25em;
    --ls-025-px: 0.25px;
}

body {
    margin-inline: clamp(1.25rem, -4.2308rem + 23.3846vw, 6rem);

    display: grid;
    place-items: center;

    font-family: 'Manrope', sans-serif;
    font-weight: var(--fw-regular);
    font-size: var(--fs-400);

    background-color: var(--clr-neutral-200);
}

/***************************/
/* Layout                  */
/***************************/

.grid {
    --row-gap: 2rem;
    --column-gap: 0;

    display: grid;
}

.author-details-wrapper {
    padding-inline: 2rem;
    padding-block: 1rem;
    display: flex;
}

.article.grid {
    row-gap: var(--row-gap);

    grid-template-rows: clamp(12.5rem, 3.7547rem + 37.3134vw, 17.1875rem) 1fr;
}

.content-wrapper.grid {
    --row-gap: 1.5rem;

    grid-template-columns: 2rem 1fr 2rem;
    row-gap: var(--row-gap);

    & > *:not(:last-child) {
        grid-column: 2 / 2;
    }

    & > *:last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 43.75rem) {
    .article.grid {
        row-gap: var(--row-gap);
    
        grid-template-columns: clamp(10.9375rem, -10.4514rem + 48.8889vw, 17.8125rem) 1fr;
        grid-template-rows: none;
    }

    .content-wrapper.grid {
        --row-gap: 1.5rem;
    
        grid-template-columns: 1fr;
        padding-block: 2.5rem;
        padding-inline: 2rem;

        & > *:not(:last-child), > *:last-child {
            grid-column: unset;
        }
    }

    .author-details-wrapper {
        padding: 0;
        display: flex;
    }
}

@media (min-width: 58rem) {
    .content-wrapper.grid {
        padding-inline: 2.5rem;
        padding-block: 1.875rem;
    }
}

/***************************/
/* Components              */
/***************************/

.article {
    box-shadow: 0 2.5rem 2.5rem -10px hsl(210, 29%, 84%, 50.34%);
    max-width: 45.625rem;
    background-color: var(--clr-neutral-100);
    border-radius: 0.625rem;
}

.article__image {
    border-start-start-radius: 0.625rem;
    border-start-end-radius: 0.625rem;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: left 50% top -0.75rem;

    @media (min-width: 43.75rem) {
        object-position: right -5rem top 50%;
        border-start-end-radius: unset;
        border-end-start-radius: 0.625rem;
    }

    @media (min-width: 57.5rem) {
        object-position: left;
    }
}

.article__title {
    font-size: var(--fs-700);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-900);
    line-height: var(--lh-130);
    letter-spacing: var(--ls-025-px);
}

.article__content {
    color: var(--clr-neutral-500);
    line-height: var(--lh-140);
    letter-spacing: var(--ls-0012-em);
}

.article__author-avatar {
    width: 2.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;

    margin-inline-end: 1rem;
}

.article__author-name,
.article__authored-date {
    font-size: var(--fs-400);
    line-height: var(--lh-140);
    letter-spacing: var(--ls-0012-em);
}

.article__author-name {
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-900);
}

.article__authored-date {
    color: var(--clr-neutral-400);
}

.article__author-social-links {
    gap: 1rem;
    align-items: center;
    color: var(--clr-neutral-400);
    background-color: var(--clr-neutral-900);
    
    padding-inline-start: 2rem;
    
    @media (min-width: 43.75rem) {
        padding-inline-start: unset;
    }
    
    & p {
        line-height: var(--lh-140);
        letter-spacing: var(--ls-025-em);
        text-transform: uppercase;
    }
    
    &[data-visible='false'] {
        display: none;
    }
    
    &[data-visible='true'] {
        display: flex;
        position: absolute;
        border-end-start-radius: 0.625rem;
        border-end-end-radius: 0.625rem;;
        
        width: 100%;
        height: 100%;

        z-index: 1;
        left: 0; bottom: 0;

        @media (min-width: 43.75rem) {
            width: 15.5rem;
            height: 4.1875rem;
            justify-content: center;
            border-radius: 0.5rem;
            
            left:unset; bottom: unset;
            right: -6.75rem; top: -5.75rem;

            &:after {
                position: absolute;
                content: '';
                width: 16px;
                height:16px;
                background-color: inherit;
                bottom: -8px;
                transform: rotate(45deg);
            }
        }
    }
}

.author-details-wrapper {
    position: relative;
}

.author-details-wrapper > button {
    margin-inline-start: auto;
    align-self: center;
    z-index: 2;

    border-radius: 50%;
    border-style: none;

    background-color: var(--clr-neutral-200);

    width: 2rem;
    height: 2rem;

    & img {
        display: inline-flex;
        align-self: center;
    }

    &[aria-expanded="true"] {
        background-color: var(--clr-neutral-500);
        img {
            filter: brightness(100);
        }
    }
}

.attribution {
    position: absolute;
    left: 50%; bottom: 1rem;
    transform: translateX(-50%);
    font-size: 11px;
    text-align: center;
}
.attribution a {
    color: hsl(228, 45%, 44%);
}



/***************************/
/* Utilities               */
/***************************/
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}