/* == the Brand Settings == 
:root holds "variables": named values that are reused everywhere. 
changing the colour once updates across the whole site */
:root {
    --black: #0b0a0b;
    /* page background */
    --surface: #151214;
    /* used for product cards */
    --white: #f6f1f2;
    /* main text colour */
    --muted: #b3a7ac;
    /* greyish text for less important */
    --red: #d42a3c;
    /* red from the logo */
    --line: #2e2629;
    /* thin divider lines */

    --display: "Marcellus", Georgia, serif;
    /* this is the heading font. If Marcellus fails then use Georgia, then if thats missing any serif font */
    --body: "Karla", Arial, sans-serif;
    /* colours are written as "hex codes": then 6 characters. */
}

/* == the Whole Pahe == */
* {
    box-sizing: border-box;
    /* '*' means every element. makes widths include the padding, making sizes behave as expected */
}

html {
    scroll-behavior: smooth;
    /* NEW: html = the whole page.
       Whenever a link jumps somewhere on the same page (like href="#hire"),
       the page glides there instead of snapping instantly. */
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
        /* NEW: some people turn on "Reduce motion" on their phone or Mac
           because animations make them feel unwell. This respects that setting. */
    }
}

[hidden] {
    display: none !important;
    /* NEW: anything with the hidden attribute is ALWAYS hidden,
       even if another rule tries to give it a display value.
       This keeps the filter working reliably. */
}

body {
    margin: 0;
    /* this removes the browsers default gap around the page */
    background: var(--black);
    color: var(--white);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    /* space between the lines is 1.6 times the text size */
}

/* == Headings == */
h1,
h2,
h3 {
    /* by adding a comma it means to apply this rule to all of these */
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.15;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 22px;
}

/* == Links == */
a {
    color: var(--white);
}

a:hover {
    color: var(--red);
}

/* == Header == */
header {
    display: grid;
    /* turns the header into columns. logo, name and menu each get one */
    grid-template-columns: 1fr auto 1fr;
    /* left and right columns are equal widths
    middle column is only as wide as the name (auto)
    name will sit exactly in the centre of page */
    align-items: center;
    /* lines up logo, name and meny through their middle names */
    padding: 12px 24px;
    border-bottom: 1px solid var(--line);

}

nav a {
    /* space between selectors name means inside only <a> tags that are inside <nav> */
    color: var(--muted);
    text-decoration: none;
}

/* Name in the middle of page */
.site-name {
    margin: 0;
    font-family: var(--display);
    font-size: 30px;
    letter-spacing: 0.04em;
}

nav {
    justify-self: end;
    /* moves the menu to the right hand edge of its column */
    display: flex;
    /* links in a row */
    gap: 20px;
    /* space between links */
}

nav a {
    color: var(--muted);
    text-decoration: none;
}

/* == Main Content == */
main {
    max-width: 1100px;
    /* content will never get wider than this */
    margin: 0 auto;
    /* 0 top and bottom, auto left and right means it will centre it. */
    padding: 0 24px;
    /* keeps text of screen edges on phones */
}

section {
    padding: 64px 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 24px;
    /* NEW: when the page glides to a section, stop 24px above it
       so the heading isn't squashed against the top edge of the screen */
}

/* == Small Label == */
.eyebrow {
    color: var(--red);
    text-transform: uppercase;
    /* shows in capitals without retyping the text */
    letter-spacing: 0.15em;
    /* spreads letters a little, em means relative to its size */
    font-size: 13px;
}

/* == Buttons == */
.btn {
    display: inline-block;
    /* lets a link have padding like a box, while staying on the same line */
    background: var(--red);
    color: var(--white);
    padding: 12px 22px;
    border-radius: 6px;
    /* this rounds the corners */
    text-decoration: none;
    font-weight: 700;
}

.btn:hover {
    color: var(--white);
    filter: brightness(1.15);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--white);
}

/* == Images == */
img {
    max-width: 100%;
    /* makes an image never wider than its container */
    height: auto;
    /* keeps proportion so images dont get stretched */
    border-radius: 6px;
}

/* == Product Cards == */


article {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 16px;
    transition: transform 0.2s, border-color 0.2s;
    overflow: hidden;
}


article:hover {
    transform: translateY(-4px);
    border-color: var(--red);
}


article:hover img {
    transform: scale(1.1);
}

.price {
    font-weight: 700;
    color: var(--white);
}

/* == Footer == */
footer {
    text-align: center;
    padding: 32px;
    color: var(--muted);
    font-size: 14px;
}

/* == Hero Layout == */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* this gives two equal columns with text on the left and photo on the right */

    gap: 48px;
    align-items: center;
}

.hero img {
    width: 100%;
    /* fill the whole right hand column */
}

.buttons {
    display: flex;
    /* the two buttons sit in a row */
    flex-wrap: wrap;
    /* if there isnt room the second one will go to a new line */
    gap: 12px;
}

/* == Product grid == */
.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    /* each column is atleast 260px wide, and stretches to share any extra space 
    then fits as many columns as the screen will allow
    then repeats that patters across the row. */
    gap: 24px;
}

article img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    /* contain shows the whole photo inside the frame, with nothing cut off */
    background: #000;
    /* NEW: black behind the photo, so any empty space beside a tall photo
       blends into your black velvet backgrounds */
    transition: transform 0.3s, opacity 0.15s;
    /* NEW: opacity added, so photos fade smoothly when you click the arrows */
}

article img.fading {
    opacity: 0;
    /* NEW: the arrows add this class for a split second to fade the old photo out */
}

/* == Photo gallery == */
.gallery {
    position: relative;
    /* "relative" makes this box the reference point
       for anything inside it positioned "absolute" (the arrows) */
    overflow: hidden;
    /* keeps the hover-zoomed photo inside the box */
    border-radius: 6px;
}

.arrow {
    position: absolute;
    /* lifts the button out of the normal flow so it can sit on top of the photo */
    top: 50%;
    transform: translateY(-50%);
    /* top: 50% puts the button's top edge at the middle;
       translateY(-50%) nudges it up by half its height so its centre is in the middle */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* a circle */
    border: none;
    background: rgba(0, 0, 0, 0.6);
    /* 60% solid black, so it shows up on any photo */
    color: var(--white);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.arrow:hover {
    background: var(--red);
}

.arrow-prev {
    left: 8px;
}

.arrow-next {
    right: 8px;
}

.photo-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    /* sits in the bottom-right corner of the photo */
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
}

article[data-category="bridal"] img {
    /* this reads as the article product card, 
    then the data in the category of bridal, 
    then the photo inside that card,
    square brackets select the element by an attribute and its value */
    aspect-ratio: 3 / 4;
}

.options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.option {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 28px;
    border-radius: 6px;
}

.option ul {
    color: var(--muted);
}

.rent {
    border-color: var(--red);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.filter-btn {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--body);
    cursor: pointer;
}

.filter-btn.active {
    background: var(--red);
    border-color: var(--red);
}

.sub-filters {
    margin-top: -12px;
    /* NEW: pulls the second row of filters a little closer to the first */
}

.sub-filters .filter-btn {
    font-size: 13px;
    padding: 6px 14px;
    /* slightly smaller buttons, so they read as a sub-group of Jewellery */
}

.booking-form {
    display: grid;
    gap: 8px;
    max-width: 560px;
    margin-top: 32px;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
    background: var(--surface);
    color: var(--white);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
    font-family: var(--body);
    font-size: 16px;
}

.booking-form label {
    margin-top: 12px;
    color: var(--muted);
}

.booking-form input[type="radio"] {
    accent-color: var(--red);
    /* NEW: colours the selected radio button red */
    padding: 0;
    margin-right: 6px;
    /* undoes the box padding from the rule above, and adds a gap before the word */
}

.booking-form fieldset label {
    margin-right: 16px;
    /* space between Rent, Buy and Not sure */
}

.booking-form fieldset {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 16px;
    margin-top: 12px;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    border-color: var(--red);
    outline: none;
}

.booking-form .btn {
    justify-self: start;
    margin-top: 16px;
}

.booking-form .privacy {
    font-size: 13px;
    color: var(--muted);
}

/* == Phones and small screens == 
this is for smaller screens less than 760px wide as its at the bottom this overides rules above it */
@media (max-width: 760px) {
    header {
        grid-template-columns: 1fr;
        /* one column: logo, menu, name will stack ontop of eachother */
        justify-items: center;
        /* centre each one horizontally */
        gap: 8px;
    }

    nav {
        justify-self: center;
        /* undo the 'push right' from the desktop rule */
    }

    .hero {
        grid-template-columns: 1fr;
        /* one column text first then photos below */
    }

    h1 {
        font-size: 36px;
    }

    .options {
        grid-template-columns: 1fr;
    }
}