/* ============================================================
1. CSS Reset
2. Variables
3. Base Tag Styles (typography, font scale)
– body
– text
– icons
– lists
– images
– inputs
text
email
phone
text area
select
radio
checkbox
– buttons
– decorative rules
4. Layout Utilities
– sections
– containers
– cards
– grids
– flex boxes
– margins
5. Components
– accent line (eyebrow)
— badges, tags
– cards
— dividers
— forms
6. Sections (HTML + CSS)
– Navbar
– Footer
– Hero
– Other
7. JavaScript
============================================================ */

/* ============================================================
   1. CSS RESET – disables all browsers default styles
============================================================ */

*, /* every element */
*::before,
*::after {
    box-sizing: border-box; /* makes padding part of width */
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%; /* prevents font size from changing when phone rotates to landscape */
    scroll-behavior: smooth; /* smooth scroll when clicking nav anchor links */
}

/* FONTS — self hosted */

@font-face {
    font-family: "SF Pro Display";
    src: url("/fonts/SF Pro Display Regular 400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("/fonts/SF Pro Display Bold 700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap; /* shows fallback font instantly, and swaps to the custom font when loaded */
}

/* ============================================================
   2. VARIABLES – use them via var(--name)
============================================================ */

:root {
    /* ----------------------------------------------------------
     – COLORS
     command F, type – COLORS, and you scroll right away to the group of elements you want to edit

     hsl(0deg 100% 33% / 1);
     hue (red 0, apple bg 240)
     saturation (apple 11)
     light (around 33 is optimal)
     opacity
  ---------------------------------------------------------- */

    /* Brand color - darker to lighter  */

    --color-brand: hsl(0deg 100% 33% / 1); /* buttons */
    --color-brand1: hsl(0deg 100% 33% / 0.75); /* icons and colored text */
    --opacity: 0.85; /* for logo to a make it a bit muted compared to the button */
    --color-brand2: hsl(0deg 100% 33% / 0.05); /* cards on hover */

    /* BG - parent to child, darker to lighter  */

    --color-card: hsl(240deg 0% 100%); /* + inputs BG */
    --color-section-alt: hsl(240deg 11% 97%);
    --color-section: hsl(240deg 11% 94%);

    --color-nav: hsl(0deg 0% 0% / 0.9);
    --color-footer: hsl(0deg 0% 0% / 0.9);
    --color-body: hsl(0deg 0% 0% / 1);

    /* Text */

    --color-text1: hsl(0deg 0% 20%); /* h1-6, nav a */
    --color-text2: hsl(0deg 0% 30%); /* p */
    --color-text3: hsl(0deg 0% 40%); /* placeholders #666666 */
    --color-text4: hsl(0deg 0% 100%); /* icons, buttons */

    --color-text-body1: hsl(0deg 0% 90%); /* nav hero footer */
    --color-text-body2: hsl(0deg 0% 50%); /* nav hero footer */

    /* ----------------------------------------------------------
     – TRANSITIONS
    ease – starts slow, speeds up in the middle, slows down at the end, default, feels most natural
    ease-in – starts slow, ends fast, good for elements leaving the screen
    ease-out – starts fast, ends slow, good for elements entering the screen
    ease-in-out - starts slow, speeds up, ends slow, smoother than ease, symmetric
    linear – constant speed throughout, feels robotic, rarely used for UI
  ---------------------------------------------------------- */
    --transition: 300ms ease-in-out;
    --transition-delay: 300ms;
}

/* ============================================================
   3. BASE STYLES - applied to all html tags
============================================================ */

/* ----------------------------------------------------------
     – BODY – every element on the page inherits these unless overridden.
  ---------------------------------------------------------- */

body {
    /* font-family: 'SF Pro Display', sans-serif; – if font fails to load, browser uses the fallback font, the system sans-serif */
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.001em;
    font-weight: 500;
    color: var(--color-text-body1);
    background-color: var(--color-body);
    padding-top: 72px; /* navbar height */

    /* Improves font rendering on Mac/retina screens.
     Makes text look sharper and thinner — more polished. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Disable body scroll when mobile menu is open */

body.menu-open {
    overflow: hidden;
}

/* TEXT SELECTION */

::selection {
    background-color: var(--color-brand);
    color: var(--color-text4);
}

/* ----------------------------------------------------------
     – FONTS
     add in html style="max-width: px;" – to adjust text width
  ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800;
    color: var(--color-text1);
    text-wrap: balance; /* balances text across lines — no awkward single word on last line */
}

p,
.p-smaller {
    font-weight: 500;
    color: var(--color-text2);
    text-wrap: balance;
}
.p-uppercase {
    font-weight: 700;
    color: var(--color-brand1);
    text-transform: uppercase;
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span,
p span {
    color: var(--color-brand1);
}
@media (min-width: 1024px) {
    h1 {
        font-size: 60px;
        line-height: 64px;
        letter-spacing: -0.02em;
    }
    h2 {
        font-size: 48px;
        line-height: 52px;
        letter-spacing: -0.02em;
    }
    h3 {
        font-size: 40px;
        line-height: 44px;
        letter-spacing: -0.01em;
    }
    h4 {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.01em;
    }
    h5 {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: 0.01em;
    }
    h6 {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.01em;
    }
    p {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.001em;
    }
    .p-uppercase {
        font-size: 15px;
        line-height: 20px;
        letter-spacing: 0.04em;
    } /* 1px smaller than p otherwise looks too bulcky */
}
@media (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 40px;
        line-height: 44px;
        letter-spacing: -0.02em;
    }
    h2 {
        font-size: 40px;
        line-height: 44px;
        letter-spacing: -0.02em;
    }
    h3 {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.01em;
    }
    h4 {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.01em;
    }
    h5 {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: 0.01em;
    }
    h6 {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.01em;
    }
    p {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.001em;
    }
    .p-uppercase {
        font-size: 15px;
        line-height: 20px;
        letter-spacing: 0.04em;
    }
}
@media (max-width: 767px) {
    h1 {
        font-size: 40px;
        line-height: 44px;
        letter-spacing: -0.02em;
    }
    h2 {
        font-size: 40px;
        line-height: 44px;
        letter-spacing: -0.02em;
    }
    h3 {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.01em;
    }
    h4 {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.01em;
    }
    h5 {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: 0.01em;
    }
    h6 {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.01em;
    }
    p {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.001em;
    }
    .p-uppercase {
        font-size: 15px;
        line-height: 20px;
        letter-spacing: 0.04em;
    }
}

/* Break word

in flex containers when there's not enough space allows long words like emails to break exactly where we need, 
add <wbr> before the letter you want to go from a new line, ex info@<wbr>sixbitsmedia.com = info@ sixbitsmedia.com
in non-flex containers just <wbr> is enough */

.break-word {
    overflow-wrap: break-word;
    min-width: 0;
}

/* Line break 

hide & show on different devices

<br class=" "> */

@media (min-width: 768px) {
    .br-m {
        display: none;
    }
}

@media (max-width: 767px) {
    .br-dt {
        display: none;
    }
}

/* ----------------------------------------------------------
     – LINKS - a inherits the base style and contact us links don't show with color brand, we make color branded just links inside p 
  ---------------------------------------------------------- */

/* ALL links — text lightens on hover */

a {
    text-decoration: none; /* removes default underline from links. */
    color: inherit; /* links inherit the color of their parent by default */
    transition: var(
        --transition
    ); /* transition must live on the element being animated — not on the hover state */
    display: inline-flex;
    /* needed for transform to work on inline elements 
  By default <a> tags are inline elements –they flow inside text like a word. 
  CSS transform (like moving or scaling) doesn't work on pure inline elements — the browser ignores it.
  To make transform work, the element needs to be block, flex, or inline-flex. 
  We use inline-flex because:
  block would make the link take full width
  inline-flex keeps it shrunk to content width but enables transforms
  */
}

@media (min-width: 1024px) {
    a:hover {
        transform: translateY(-2px);
        /* transform moves, rotates, or scales an element without affecting the layout around it, other elements don't shift when you transform something
  translateY moves along the Y axis, positive value moves DOWN, negative value → moves UP
  */
    }
}

/* LINKS — only inline text links inside paragraphs */

p a {
    color: var(--color-brand);
}

/* ----------------------------------------------------------
   – ICONS
   if you need different icon variantions create additional classes, 
   classes related for the icon add directly to the icon if icon sits alone, and to the icons' parent in case of same style icons' block, 
   classes related to the icon's bg can be added to the icon's bg only
---------------------------------------------------------- */

/* Icon */

i {
    display: inline-flex; /* prevents icons from affecting line-height, and adding unexpected spacing */
    line-height: 1; /* prevents extra vertical space */
    flex-shrink: 0; /* prevents icon from squishing inside flex containers */
    font-size: 18px;
    color: transparent; /* removes the fill */
    -webkit-text-stroke: 1.5px var(--color-text4); /* adds stroke */
}

.fa-envelope,
.fa-clock,
.fa-instagram,
.fa-check,
.fa-chevron-right,
.fa-arrow-right {
    color: var(--color-text4);
    -webkit-text-stroke: unset;
}

.no-stroke {
    color: var(--color-brand1);
    -webkit-text-stroke: unset;
}

.fa-instagram {
    font-size: 20px;
}

.fa-check,
.fa-circle-dot,
.fa-chevron-right,
.fa-arrow-right {
    font-size: 16px;
}

/* Icon BG */

div:has(> i:only-child) {
    /* target only divs that have exclusively an i tag as their only child */
    display: inline-flex; /* flex takes full width of parent, inline-flex fits content */
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* prevents from squishing inside flex containers */
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: var(--color-brand1);
}

/* Bigger icons */

.i-bigger {
    font-size: 20px;
}

div:has(> .i-bigger:only-child) {
    width: 44px;
    height: 44px;
    border-radius: 999px;
}

/* ----------------------------------------------------------
   – LISTS
---------------------------------------------------------- */

ul,
ol {
    list-style: none; /* removes default bullets and numbers */
}

/* ORDERED LIST — numbered items styled like icon backgrounds */

ol {
    counter-reset: list-counter; /* resets counter at the start of each list */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

ol li {
    counter-increment: list-counter; /* increments by 1 for each item */
    display: flex;
    align-items: center;
    gap: 12px;
}

ol li::before {
    content: counter(list-counter); /* shows the number */
    display: inline-flex; /* flex takes full width of parent, inline-flex fits content */
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* prevents from squishing inside flex containers */
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background-color: var(--color-brand);
    color: var(--color-text4);
    font-size: 16px;
    font-weight: 500;
}

/* ----------------------------------------------------------
   – IMAGES 
----------------------------------------------------------*/

/* Images CSS reset */

img {
    display: block; /* makes images behave like blocks (not inline, which adds an invisible gap below them) */
    max-width: 100%; /* makes images never overflow their container */
    height: auto; /* maintains aspect ratio */
    object-fit: cover; /* fills container without distortion */
    user-select: none; /* prevents image selection */
    -webkit-user-select: none; /* Safari */
    -webkit-user-drag: none; /* prevents dragging — Safari/Chrome */
}

/* BG images */

.bg-img {
    position: relative;
    /* Position: relative anchors the absolutely positioned BG image overlay (::after) to the BG image (.bg-img). 
    Absolutely positioned elements anchor to the nearest positioned (relative, absolute, fixed, or sticky) ancestor (parent or above). 
    All elements by default have position: static, so does the BG image, 
    therefore, if we don't add position: relative to the BG image, 
    then the absolute BG overlay would start looking for a positioned ancestor, 
    could not find any, and evetualy stick to the body, 
    as a result covering the entire page instead of just the BG image */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; /* default is repeat which tiles the image if it's smaller than the container, since using cover it won't tile, but setting no-repeat is safer */
}

/* BG image overlay */

.bg-img::after {
    content: "";
    position: absolute;
    inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
}

/* Hero BG image */

.hero-bg-img {
    height: calc(100vh - 72px); /* 72px navbar height */
}

@media (min-width: 1024px) {
    .hero-bg-img {
        background-image: url("/images/d-hero-img.jpg");
    }
} /* D – 1920 x 1080 16:9 */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-bg-img {
        background-image: url("/images/t-hero-img.jpg");
    }
} /* T – 1024 x 1366 3:4 */
@media (max-width: 767px) {
    .hero-bg-img {
        background-image: url("/images/m-hero-img.jpg");
        height: 100vh;
    }
} /* M – 768 x 1334 9:16 */

/* Hero BG image overlay */

.hero-bg-img::after {
    background: linear-gradient(
        90deg,
        hsl(0deg 0% 3% / 0.95) 0%,
        hsl(0deg 0% 3% / 0.9) 30%,
        hsl(0deg 0% 3% / 0.8) 50%,
        hsl(0deg 0% 3% / 0.35) 70%,
        hsl(0deg 0% 3% / 0.2) 100%
    );
}

/* ----------------------------------------------------------
   – INPUTS
----------------------------------------------------------*/

/* Inputs CSS Reset */

input,
select,
textarea {
    font: inherit; /* they don't inherit font by default, this forces them to */
    border: none;
    background: none;
    outline: none;
}

/* Form */

.form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--color-brand2) !important;
}

/* Form button */

.form .btn {
    align-self: flex-start;
    /* when parent has display: flex; flex-direction: column; by default align-items: stretch; 
    which makes all children stetch to 100% width, 
    align-self: flex-start / center / flex-end; makes the child fit content, and aligns it
    OR just wrap the button into a div and the div will be the one stretch to 100% */
}

/* Input group wrapper — label + input(s) */

.input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Input label — above inputs */

.input-label {
    color: var(--color-text2);
}

/* INPUT BASE — text, email, tel, textarea */

.input {
    width: 100%;
    font-size: 16px;
    line-height: 24px; /* cause in text area users type multiple lines */
    padding: 16px;
    /* border: 1px solid transparent; transparent by default — visible on focus */
    border-radius: 8px;
    /* transition: var(--transition); */
    background-color: var(--color-card);
    color: var(--color-text2);
}

.input::placeholder {
    /* placeholder */
    color: var(--color-text3);
}

/*
.input:focus {
  border-color: var(--color-brand1);
}
*/

/* TEXTAREA */

textarea.input {
    resize: none; /* both - default, user can resize in both directions; vertical - user can resize height only; none - resize disabled */
    min-height: 120px; /* minimum height before user resizes */
}

/* SELECT DROPDOWN */

select.input {
    appearance: none; /* removes browsers' default arrow */
    -webkit-appearance: none; /* for Safari */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    /*  if you want to change icon size, 
    change width, hieght, viewBox, and ask from claude the new values for d=' ', 
    cause the icon must be redrawn using the new coordinates
    fill=' ' – color, we don't need cause its stroked icon
    stroke='%23' add just hex digits */

    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
    /* space so text doesn't overlap the arrow, 
    = background-position (16px) + icon width (16px) + breathing room (16px) */
    cursor: pointer;
}

/* Select placeholder — shows when no valid option selected */

select.input:invalid {
    color: var(--color-text3);
}

/* RADIO + CHECKBOX */

/* Radio / check box groups */

.radio-groups,
.checkbox-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.radio-groups label,
.checkbox-groups label {
    line-height: 20px;
}

.radio-group,
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: var(--color-text2);
}

/* Hide default browser input */

.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none; /* removes browser's default completely */
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: var(--color-card);
    /* border: 1.5px solid var(--color-text3); */
    cursor: pointer;
    /* transition: var(--transition); */
}

/* Radio — circle shape */

.radio-group input[type="radio"] {
    border-radius: 50%;
}

/* Checkbox — rounded square */

.checkbox-group input[type="checkbox"] {
    border-radius: 4px;
}

/* Checked state — radio */

.radio-group input[type="radio"]:checked {
    background-color: var(--color-brand1);
    /* border-color: var(--color-brand1); */
    box-shadow: inset 0 0 0 4px var(--color-card); /* creates the inner dot when checked, to cover the whole change to 0px  */
}

/* Checked state — checkbox */

.checkbox-group input[type="checkbox"]:checked {
    background-color: var(--color-brand1);
    /* border-color: var(--color-brand1); */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
    /* checkbox uses an inline SVG checkmark when checked — same technique as the select arrow */
    background-repeat: no-repeat;
    background-position: center;
}

/* ----------------------------------------------------------
   – BUTTONS
   to make 2 button of equal width add in the HTML min-width equal to width of the bigger button
----------------------------------------------------------*/

/* BUTTON CSS Reset –disables browsers default styles */

button {
    cursor: pointer; /* ads finger cursor on hover button to show they are clickable */
    font: inherit; /* does not inherit font by default, this forces to */
    border: none;
    background: none;
    outline: none;
}

/* BUTTONS BASE — shared by all buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap; /* never wraps to two lines */
    font-size: 15px; /* 1px smaller than p, looks better, at 16px looks too bulcky */
    line-height: 16px;
    color: var(--color-text4);
    padding: 14px;
    background-color: var(--color-brand);
    border: none;
    border-radius: 999px;
}

@media (min-width: 1024px) {
    .btn:hover {
        transform: translateY(-2px);
    }
}

.btn2 {
    background-color: transparent;
    color: var(--color-text-body1);
    padding: 12px;
    border: 2px solid var(--color-text-body1);
}

.btn2 i {
    -webkit-text-stroke-color: var(--color-text-body1);
}

/* ----------------------------------------------------------
   – DECORATIVE RULES - properties that you apply selectively, like shadows, on hover effects etc
---------------------------------------------------------- */

/* Text shadow 

    text-shadow: x y blur color;
    x    — horizontal offset, positive moves right, negative moves left 
    y    — vertical offset, positive moves down, negative moves up 
    blur — blur radius */

.text-shadow {
    text-shadow:
        1px 0 1px rgba(0, 0, 0, 0.4),
        -1px 0 1px rgba(0, 0, 0, 0.4),
        0 1px 1px rgba(0, 0, 0, 0.4),
        0 -1px 1px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   4. LAYOUT UTILITIES – reusable structural classes
============================================================ */

/* ----------------------------------------------------------
   – SECTIONS
---------------------------------------------------------- */

.section {
    background-color: var(--color-section);
}

@media (min-width: 1024px) {
    .section {
        padding: 80px 32px;
    }
}
@media (max-width: 1023px) {
    .section {
        padding: 64px 16px;
    }
}

section {
    /* targets <section>...</section> */
    scroll-margin-top: 72px; /* scroll offset, 72px – navbar height */
}

/* SECTION ALT - alternating lighter background color for visual separation between consecutive sections. */

.section-alt {
    background-color: var(--color-section-alt);
}

/* ----------------------------------------------------------
   – CONTAINERS
---------------------------------------------------------- */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto; /* centers */
}

/* add max-width and all other classes like grid, flex to .container */

.max1 {
    max-width: 960px;
}
.max2 {
    max-width: 1024px;
}
.max3 {
    max-width: 1140px;
}
.max4 {
    max-width: 1200px;
}
.max5 {
    max-width: 1280px;
}
.max6 {
    max-width: 1440px;
}
.max7 {
    max-width: 1600px;
}

/* ----------------------------------------------------------
   – COLUMNS
---------------------------------------------------------- */

/* Cards BG color & radius */

.card {
    background-color: var(--color-card);
    border-radius: 16px;
    transition: var(--transition);
}

@media (min-width: 1024px) {
    .card:hover {
        background-color: var(--color-brand2);
    }
}

/* Paddings: */

/* - card pading */

@media (min-width: 1024px) {
    .pad-card {
        padding: 32px;
    }
}

@media (max-width: 1023px) {
    .pad-card {
        padding: 32px 24px;
    }
}

/* - column padding */

@media (max-width: 1023px) {
    .pad-col {
        padding: 0 16px;
    }
}

/* Sticky */

.sticky {
    position: sticky;
    top: calc(72px + 16px);
}

/* ----------------------------------------------------------
   – GRIDS
   
display: 
block;        full width, stacks vertically — div, p, h1 default
inline;       flows with text, no width/height control — span, a default
inline-block; flows with text but accepts width/height
none;         removes element from page
flex;         when applied to a parent arranges its children into just a row, or just a column, never both like grid does, and fills the width of its own parent
inline-flex;  same as flex but shrinks to content width

grid;         when applied to a parent arranges its children into rows and columns and takes full width of its own parent
inline-grid;  same as grid but shrinks to its content width

grid-template-columns: 
200px 300px;             – column width = px
25% 75%;                 – column width = % of parent width
1fr 2fr;                 – column width = #fr, in this example 1fr = 100% / total fr = 100% / 3 
auto auto;               – each column sizes to the width of its own content first, then total leftover space is shared equally between all columns
max-content max-content; – column fits its content, if it's text stops to maintain text in one line
min-content min-content; – if it's text wraps it into words and stops at the longest word
200px 1fr max-content;   – can also mix values
repeat(3, 1fr);          – is a shorthand for 1fr 1fr 1fr, can use not just fr but any other values mentioned above

grid-template-rows:      – everythign is the same as for columns, is rarely used, auto is default, meaning each row height adjusts to fit the tallest item in that row

gap: 24px;                                          – 24px gaps for rows and columns
gap: 24px 48px; OR row-gap: 24px; column-gap: 48px; – 24px between rows, 48px between columns

By default grid places items automatically left to right, top to bottom, but you can manually place any child in a specific cell using grid-column and grid-row

grid-column: 1 / 3;  – child starts at line 1, ends at line 3, meaning spans 2 columns, is placed in column 1 and 2
grid-column: span 2; – spans 2 columns from current position, shorthand for the one from above
grid-row:            – same as column

justify-items: 
stretch; start; center; end; – controls how the content inside each cell aligns horizontally within its cell boundaries
justify-self:                – same as justify-items but applied to only one child

align-items: 
stretch; start; center; end; – cell content vertical alignment, stretch is default
align-self:                  – same as align-items but applied to only one child

justify-content: 
start; end; center; space-between; space-around; space-evenly; – controls how the the cells align horizontally inside the grid, has effect only if all cells width is smaller than container
align-content                                                  – same as justify-content but on the vertical axis

---------------------------------------------------------- */

.d2-t2-m1-g-fr,
.d2-t2-m2-g-fr,
.d3-t3-m1-g-fr,
.d4-t2-m2-g-fr,
.d4-t2-m1-g-fr,
.d4-t4-m2-g-fr {
    display: grid;
}
.d4-t2-m2-ig-fr,
.d4-t2-m2-ig-max,
.d3-t1-m1-ig-max,
.d2-t2-m2-ig-max,
.d2-t2-m1-ig-max,
.d3-t3-m1-ig-max {
    display: inline-grid;
}

@media (min-width: 1024px) {
    .d2-t2-m1-g-fr,
    .d2-t2-m2-g-fr {
        grid-template-columns: repeat(2, 1fr);
    }
    .d3-t3-m1-g-fr {
        grid-template-columns: repeat(3, 1fr);
    }
    .d4-t2-m2-ig-fr,
    .d4-t2-m2-g-fr,
    .d4-t2-m1-g-fr,
    .d4-t4-m2-g-fr {
        grid-template-columns: repeat(4, 1fr);
    }

    .d2-t2-m2-ig-max,
    .d2-t2-m1-ig-max {
        grid-template-columns: repeat(2, max-content);
    }
    .d3-t1-m1-ig-max,
    .d3-t3-m1-ig-max {
        grid-template-columns: repeat(3, max-content);
    }
    .d4-t2-m2-ig-max {
        grid-template-columns: repeat(4, max-content);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .d4-t4-m2-g-fr {
        grid-template-columns: repeat(4, 1fr);
    }
    .d2-t2-m1-g-fr,
    .d4-t2-m2-ig-fr,
    .d4-t2-m2-g-fr,
    .d4-t2-m1-g-fr,
    .d2-t2-m2-g-fr {
        grid-template-columns: repeat(2, 1fr);
    }
    .d3-t3-m1-g-fr {
        grid-template-columns: repeat(3, 1fr);
    }

    .d3-t1-m1-ig-max {
        grid-template-columns: repeat(1, max-content);
    }
    .d4-t2-m2-ig-max,
    .d2-t2-m2-ig-max,
    .d2-t2-m1-ig-max {
        grid-template-columns: repeat(2, max-content);
    }
    .d3-t3-m1-ig-max {
        grid-template-columns: repeat(3, max-content);
    }
}

@media (max-width: 767px) {
    .d2-t2-m1-g-fr,
    .d3-t3-m1-g-fr,
    .d4-t2-m1-g-fr {
        grid-template-columns: repeat(1, 1fr);
    }
    .d4-t2-m2-ig-fr,
    .d4-t2-m2-g-fr,
    .d4-t4-m2-g-fr,
    .d2-t2-m2-g-fr {
        grid-template-columns: repeat(2, 1fr);
    }

    .d3-t1-m1-ig-max,
    .d3-t3-m1-ig-max,
    .d2-t2-m1-ig-max {
        grid-template-columns: repeat(1, max-content);
    }
    .d4-t2-m2-ig-max,
    .d2-t2-m2-ig-max {
        grid-template-columns: repeat(2, max-content);
    }
}

/* ----------------------------------------------------------
   – FLEX BOXES
   
   use media query to override if needs to be different on other devices
   
   in flex box there are two axes, 
   main axis is dictated by flex-direction and controlled by justify-content, 
   cross axis is perpendicular to the main axis, and controlled by align-items, 
   when setting first think of direction, then of align items, then of justify content
   
   display: flex; – takes full width
   display: inline-flex; – fits content width, and there is no point to set any values for justify-content cause it always looks like flex-start
   
   flex-wrap – controls whether flex children are forced onto one line or can wrap to multiple lines
   flex-wrap: nowrap; – default, children on one line and will overflow if they don't fit
   flex-wrap: wrap; – wraps to next line when items don't fit, use it for flex boxes that don't fit on mobile
   
   flex-grow – controls how much a flex child expands to fill available space, the value is a ratio
   .child-a flex-grow: 2; – takes takes 2x more space than the other
   .child-b flex-grow: 1; – takes 1x
   
   flex-shrink – controls how much a flex child shrinks when there isn't enough space, by default all children shrink to fit content
   flex-shrink: 1; – add it to each child and they will shrink equally, but in this case flex-wrap: wrap; won't work cause it will be in conflit with flex-shrink: 1;
   flex-shrink: 0; – never shrinks, keeps its defined size
   
   when parent has display: flex; flex-direction: column; 
   all children go by default to 100% width because align-items: stretch; is default
   add align-self: flex-start / center / flex-end; to make the child fit content, and align it

   align-items: flex-start / center / flex-end; - children fit their content, and get aligned
---------------------------------------------------------- */

.row-center-left {
    display: flex; /* container takes full width*/
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.row-center-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.row-center-space-between {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.col-left-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.col-stretch-top {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* default, children stretch 100% */
    justify-content: flex-start; /* default */
}
.col-center-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.row-fit-center {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

.col-fit-left {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Gaps */

.gap-4 {
    gap: 4px;
}
.gap-8 {
    gap: 8px;
}
.gap-12,
.gap-i,
.gap-line {
    gap: 12px;
}
.gap-16,
.gap-i-bigger,
.gap-cards {
    gap: 16px;
}
.gap-24 {
    gap: 24px;
}
.gap-32 {
    gap: 32px;
}
.gap-48 {
    gap: 48px;
}
.gap-64 {
    gap: 64px;
}

@media (min-width: 1024px) {
    .gap-d24-t32-m48 {
        gap: 24px;
    }
    .gap-d48-t32-m24 {
        gap: 48px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .gap-d24-t32-m48 {
        gap: 32px;
    }
    .gap-d48-t32-m24 {
        gap: 32px;
    }
}
@media (max-width: 767px) {
    .gap-d24-t32-m48 {
        gap: 48px;
    }
    .gap-d48-t32-m24 {
        gap: 24px;
    }
}

/* ----------------------------------------------------------
   – MARGINS
---------------------------------------------------------- */

/* margin-top */

.mt-4 {
    margin-top: 4px;
}
.mt-8 {
    margin-top: 8px;
}
.mt-12 {
    margin-top: 12px;
}
.mt-16 {
    margin-top: 16px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-24 {
    margin-top: 24px;
}
.mt-32 {
    margin-top: 32px;
}
.mt-48 {
    margin-top: 48px;
}
.mt-64 {
    margin-top: 64px;
}

/* ============================================================
   5. COMPONENTS
============================================================ */

/* ----------------------------------------------------------
   Eyebrow / accent line

   sits next to small uppercase text, 
   add it in html using this code <div class="line"></div> 
   ---------------------------------------------------------- */

.line {
    width: 12px;
    height: 2px;
    background-color: var(--color-brand);
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   TAGS 
   
   – non-clickable labels

<div class="row-fit-center gap-4">
    <span class="tag">Solo</span>
    <span class="tag">Team</span>
</div>
---------------------------------------------------------- */

.tag {
    display: flex;
    align-items: center;
    background-color: var(--color-brand1);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 16px;
    color: var(--color-text4);
    white-space: nowrap;
    max-width: 52px;
}

/* ----------------------------------------------------------
   – RIBBON

   floating label on top of card

   parent (card) – add style="position: relative;"
   <div class="ribbon">Featured Review</div>

   position: 

   – static
   default positon for every element, normal flow, 
   does not accept offsets (top, bottom, left, right), 
   does not anchor absolute children
   z-index doesn't work on static elements, works only on positioned elements (relative, absolute, fixed, sticky)

   – relative
   normal flow, but accepts top, right, bottom, left
   doesn't visually move the card, if you don't set any offsets, 
   it just creates an anchor for absolute children inside it

   – absolute
   removed from flow, 
   when you add position: absolute to an element it positions itself relative 
   to the nearest positioned ancestor (has position relative, absolute, fixed, or sticky)
   thus we add position: relative to the parent (card) in order to postion the absolute element relatively it, 
   if no positioned ancestor exists, it anchors to the body, 
   CONCLUSION – when you make a child absolute, make it's parent relative

   – fixed
   removed from flow, 
   positioned relative to viewport, 
   stays in place when scrolling

   – sticky
   behaves as relative until scroll reaches a threshold, 
   then sticks in place
---------------------------------------------------------- */

.ribbon {
    position: absolute;
    top: 8px;
    right: 8px;
    /* how to center 
    left: 50%; moves its left edge to the card's horizontal middle
    transform: translate(-50%, -50%);
    -50% on X – pulls it back by half its own width (now perfectly centered)
    -50% on Y → pulls it up by half its own height (now half overlapping the card border) */
    background-color: var(--color-brand1);
    padding: 8px 8px;
    border-radius: 8px;
    color: var(--color-text4);
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.001em;
    white-space: nowrap;
    z-index: 1;
}

/* ----------------------------------------------------------
   AVATAR

– badge with initials 

<div class="avatar">MT</div>
---------------------------------------------------------- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* prevents the avatar from squishing inside flex containers */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-brand1);
    color: var(--color-text4);
    font-weight: 800;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.01em;
}

/* ============================================================
   6. SECTIONS SHARED BETWEEN PAGES
============================================================ */

/* ----------------------------------------------------------
   – NAVBAR
---------------------------------------------------------- */

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: var(--color-nav);
    backdrop-filter: blur(12px); /* blurs content underneath */
    -webkit-backdrop-filter: blur(12px); /* Safari */
}

.nav-inner {
    display: flex;
    align-items: stretch; /* stretches children to full height */
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    height: 72px;
}

@media (min-width: 1024px) {
    .nav-inner {
        padding: 0 32px;
    }
}
@media (max-width: 1023px) {
    .nav-inner {
        padding: 0 16px;
    }
}

/* Logo link with the image inside */

.nav-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Right side */

.nav-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Active nav link */

.nav-links a.active,
.nav-mobile-links a.active {
    color: var(--color-text-body2);
}

/* Nav links — desktop only */

.nav-links {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.nav-links li {
    display: flex;
    align-items: stretch;
}

.nav-links a {
    display: flex;
    align-items: center;
    padding: 0 16px;
    /* color: var(--color-text-body1); disabled because is inherited from body */
    white-space: nowrap;
    /* by default text wraps to the next line when there's not enough horizontal space, 
  white-space: nowrap forces text to stay on one single line no matter what, it never wraps, 
  add white-space: nowrap to any text that must always stay on one line */
}

/* Phone */

.nav-phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 0 32px 0 16px;
    white-space: nowrap;
}

/* Hamburger — hidden on desktop */

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    width: 20px;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 16px;
    margin-right: -16px; /* pulls it to navbar edge */
    box-sizing: content-box; /* padding adds to width, doesn't shrink spans */
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-body1);
    /* must set color does not inherit from body */
    border-radius: 0; /* if it does nothing don't write any units */
    transition: var(--transition);
}

/* Hamburger → X when menu is open */

#navbar.menu-open .hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
#navbar.menu-open .hamburger span:nth-child(2) {
    opacity: 0;
}
#navbar.menu-open .hamburger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Hide nav-inner button when mobile menu is open */

.nav-inner .btn {
    opacity: 1;
    transition:
        transform var(--transition),
        opacity var(--transition);
}

#navbar.menu-open .nav-inner .btn {
    opacity: 0;
    pointer-events: none; /* prevents clicking when invisible */
}

/* ----------------------------------------------------------
   RESPONSIVE — tablet and mobile
---------------------------------------------------------- */

@media (max-width: 1023px) {
    .nav-links {
        display: none;
    } /* hide nav links on tablet & mobile */
    .nav-phone {
        display: none;
    } /* hide phone on tablet & mobile */
    .hamburger {
        display: flex;
    } /* show hamburger on tablet & mobile */
    .nav-right {
        gap: 0;
    } /* removes gap between button and hamburger */
}

/* Mobile menu — hidden by default */

.nav-mobile {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 0;
    padding: 0 28px;
    overflow: hidden;
    opacity: 0; /* hides it */
    transition:
        max-height var(--transition),
        padding var(--transition),
        opacity var(--transition) var(--transition-delay);
    scrollbar-width: none; /* hides scrollbar — Firefox */
}

.nav-mobile::-webkit-scrollbar {
    display: none; /* hides scrollbar — Chrome, Safari */
}

/* Show mobile menu when menu-open class is added */

.nav-mobile.menu-open {
    max-height: calc(
        100vh - 72px
    ); /* we use use max-height to show it because transition doesn't work on height if we use calc */
    padding-top: 44px;
    padding-right: 28px;
    padding-left: 28px;
    padding-bottom: calc(932px - 472px + 48px + env(safe-area-inset-bottom));
    /* height goes to fit content, to make it fill the entire screen, we add some extra bottom padding
  932px - maximum screen height possible as of today
  472px - menu-open height with no padding bottom
  48px - bottom padding we need 
  env(safe-area-inset-bottom) – ads device's safe area to bottom padding for scroll to the very bottom */

    overflow-y: auto; /* enables vertical scroll when content overflows */
    opacity: 1;
}

/* Mobile nav links */

.nav-mobile-links {
    display: flex;
    flex-direction: column;
}

.nav-mobile-links a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px;
    /* color: var(--color-text-body1); disabled because is inherited from body */
    font-weight: 700;
    font-size: 28px;
    line-height: 28px;
    letter-spacing: -0.01em;
}

/* Mobile phone */

.nav-mobile-phone {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 4px;
}

/* Mobile button */

.nav-mobile .btn {
    align-self: flex-start; /* .nav-mobile's flex-direction: column;  makes the button 100% width, this makes it fit content, and aligns it with flex-start, center, or flex-end */
}

/* ----------------------------------------------------------
   – FOOTER
---------------------------------------------------------- */

/* Footer */

#footer {
    background-color: var(--color-footer);
}

/* Footer inner */

.footer-inner {
    display: grid;
    max-width: 1600px;
    margin: 0 auto;
    gap: 48px;
}

@media (min-width: 1024px) {
    .footer-inner {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}
@media (max-width: 1023px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 767px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    .footer-inner {
        padding: 80px 32px;
    }
}
@media (max-width: 1023px) {
    .footer-inner {
        padding: 64px 32px;
    }
}