/* -----------------------------------
   1) GLOBAL RESET & ROOT VARIABLES
   ----------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ---- COLORS from style guide ---- */
    --clr-yellow: hsl(47, 88%, 63%);
    --clr-white: hsl(0, 0%, 100%);
    --clr-gray-500: hsl(0, 0%, 42%);
    --clr-gray-950: hsl(0, 0%, 7%);

    /* ---- TYPOGRAPHY ---- */
    --ff-body: "Figtree", sans-serif;
    --fs-paragraph: 1rem;
    /* 16px */
    --fs-date: 0.75rem;
    /* 12px */
    --fs-category: 0.75rem;
    /* 12px */
    --fs-title: 1.5rem;
    /* 24px */
    --fs-author: 0.875rem;
    /* 14px */

    /* ---- SPACING & SHADOWS ---- */
    --radius-card: 1rem;
    /* 10px */
    --radius-pill: 0.25rem;
    /* 4px */

    /* box-shadow offsets are 10px each → 0.625rem each */
    --shadow-x: 0.625rem;
    --shadow-y: 0.625rem;

    --shadow-card: var(--shadow-x) var(--shadow-y) 0 var(--clr-gray-950);
    --transition-speed: 0.25s;
}



/* -----------------------------------
   2) BODY & CONTAINER
   ----------------------------------- */
html {
    font-size: 100%;
    /* 1rem = 16px */
}

body {
    min-height: 100vh;
    background-color: var(--clr-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* 16px */
    font-family: var(--ff-body);
    color: var(--clr-gray-500);
    /* default body color = Gray 500 */
}

/* Container stays at exactly 375px (23.4375rem) maximum */
.container {
    max-width: 23.4375rem;
    /* 375px ÷ 16 = 23.4375rem */
    width: 100%;
}

/* -----------------------------------
   3) CARD STYLING (MOBILE-FIRST)
   ----------------------------------- */
.card {
    background-color: var(--clr-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    /* clip children to that 0.625rem radius */
    display: flex;
    flex-direction: column;

    border: 1px solid black;

    transition: transform 0.25s ease-in-out;

}

.card:hover {

    transform: translateY(-0.3125rem);
    /* -5px → -0.3125rem */

}

/* -----------------------------------
   4) IMAGE WRAPPER WITH PADDING
   ----------------------------------- */
.card__image {
    /* Clip to the same top-radius as the card */
    overflow: hidden;
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);

    /* Add 1.5rem padding (24px) on top/left/right to create a white “frame” */
    padding: 1.5rem 1.5rem 0;
}

.card__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* -----------------------------------
   5) CONTENT AREA
   ----------------------------------- */
.card__content {
    padding: 1.5rem;
    /* 24px all around */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px between each child */
}

/* ----- CATEGORY PILL (“Learning”) ----- */
.card__category {
    display: inline-block;
    align-self: flex-start;
    /* prevents flex from stretching it */
    background-color: var(--clr-yellow);
    color: var(--clr-gray-950);
    /* Gray 950 for contrast */
    font-size: var(--fs-category);
    font-weight: 800;
    /* Figtree 800 */
    /* text-transform: uppercase; */
    letter-spacing: 0.0625rem;
    /* 1px → 0.0625rem */
    padding: 0.5rem 0.5rem;
    /* 4px 8px (0.25rem = 4px; 0.5rem = 8px) */
    border-radius: var(--radius-pill);
    margin-bottom: 0.25rem;
    /* 4px gap to the date */
    width: auto;
    /* ensure no accidental 100% width */
}

/* ----- DATE (“Published 21 Dec 2023”) ----- */
.card__date {
    font-size: var(--fs-date);
    /* 12px */
    color: rgb(0, 0, 0);

    opacity: 0.6;
    margin-bottom: 1rem;
    /* 16px gap before the H1 */
}

/* ----- TITLE (H1) ----- */
.card__title {
    font-size: 1.25rem;
    /* 24px on mobile */
    font-weight: 800;
    /* Figtree 800 */
    color: var(--clr-gray-950);
    /* Gray 950 (nearly black) */
    line-height: 1.3;


    transition: transform 0.25s ease-in-out;

}

.card:hover .card__title {
    color: var(--clr-yellow);
    /* turn gold on hover */
    cursor: pointer;
}

/* ----- DESCRIPTION PARAGRAPH ----- */
.card__description {
    font-size: var(--fs-paragraph);
    /* 16px */
    line-height: 1.5;
    color: var(--clr-gray-500);
    /* Gray 500 */
    opacity: 0.8;
}

/* ----- AUTHOR ROW (AVATAR + NAME) ----- */
.card__author {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* 16px between avatar & name */
    margin-top: auto;
    /* push author row to bottom */
}

.card__avatar {
    width: 2.5rem;
    /* 40px / 16 = 2.5rem */
    height: 2.5rem;
    /* 40px / 16 = 2.5rem */
    border-radius: 50%;
    object-fit: cover;
}

.card__author-name {
    font-size: var(--fs-author);
    /* 14px */
    font-weight: 800;
    /* Figtree 500 */
    color: black;
    /* Gray 500 */
}

/* -----------------------------------
   6) DESKTOP BEHAVIOR (MIN-WIDTH: 48rem = 768px)
   ----------------------------------- */
@media (min-width: 48rem) {
    .container {
        /* keep 23.4375rem (375px) here, so the card stays centered */
        max-width: 23.4375rem;
    }
}

/* -----------------------------------
   7) OPTIONAL LARGER SCREEN ADJUSTMENTS
      (MIN-WIDTH: 64rem = 1024px)
   ----------------------------------- */
@media (min-width: 64rem) {
    .card__title {
        font-size: 1.25rem;
        /* 28px on very large screens (optional) */
    }
}

/* -----------------------------------
   8) ATTRIBUTION FOOTER
   ----------------------------------- */
.attribution {
    margin-block-start: 2rem;
    /* 32px */
    font-size: 0.625rem;
    /* 10px */
    text-align: center;
    color: var(--clr-gray-500);
}

.attribution a {
    text-decoration: none;
}

/* Tone down the animation to avoid vestibular motion triggers. */
@media (prefers-reduced-motion: reduce) {

    :root {
        /* ---- COLORS from style guide ---- */
        --clr-yellow: hsl(47, 88%, 63%);
        --clr-white: hsl(0, 0%, 100%);
        --clr-gray-500: hsl(0, 0%, 42%);
        --clr-gray-950: hsl(0, 0%, 7%);

        /* ---- TYPOGRAPHY ---- */
        --ff-body: "Figtree", sans-serif;
        --fs-paragraph: 1rem;
        /* 16px */
        --fs-date: 0.75rem;
        /* 12px */
        --fs-category: 0.75rem;
        /* 12px */
        --fs-title: 1.5rem;
        /* 24px */
        --fs-author: 0.875rem;
        /* 14px */

        /* ---- SPACING & SHADOWS ---- */
        --radius-card: 0.625rem;
        /* 10px */
        --radius-pill: 0.25rem;
        /* 4px */

        /* box-shadow offsets are 10px each → 0.625rem each */
        --shadow-x: 0.625rem;
        --shadow-y: 0.625rem;

        --shadow-card: var(--shadow-x) var(--shadow-y) 0 var(--clr-gray-950);
        --transition-speed: 4s;
    }

    .card {
        background-color: var(--clr-white);
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-card);
        overflow: hidden;
        /* clip children to that 0.625rem radius */
        display: flex;
        flex-direction: column;
        border: 1px solid black;
        transition: transform 4s ease-in-out;

    }

    .card__title {
        font-size: 1.25rem;
        /* 24px on mobile */
        font-weight: 800;
        /* Figtree 800 */
        color: var(--clr-gray-950);
        /* Gray 950 (nearly black) */
        line-height: 1.3;


        transition: transform 0.25s ease-in-out;

    }
}