/* =========================================
   GLOBAL
========================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #ffffff;
  color: #222222;
  font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   NAVIGATION
========================================= */

nav {
  width: 100%;
  padding: 28px 6%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background: #ffffff;

  position: relative;
  z-index: 100;
}


/* Abby Araniego — top left */

.site-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 700;

  color: #000000;
  text-decoration: none;

  white-space: nowrap;
}


/* Right navigation */

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-links a {
  font-family: Arial, Helvetica, sans-serif;

  font-size: 18px;
  font-weight: 700;

  color: #000000;
  text-decoration: none;

  /* IMPORTANT:
     No transform here.
     This prevents the double/ghost text problem.
  */

  transition: opacity 0.2s ease;
}

.nav-links a:hover {
  opacity: 0.5;
}


/* =========================================
   HERO IMAGE
========================================= */

header {
  width: 100%;
  height: 650px;

  padding: 0;
  margin: 0;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
}


/* If your HTML uses:
   <img class="hero-image" ...>
*/

.hero-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}


/* =========================================
   MAIN CONTENT
========================================= */

main {
  width: 100%;
  margin: 0 auto;
}


/* =========================================
   PORTFOLIO CATEGORY SECTION
========================================= */

#portfolio {
  padding: 100px 5%;
}


/* Prints + Sculptures side by side */

.category-grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 50px;
}


/* Each image + title */

.category-item {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}


/* Clickable image */

.category-card {
  width: 100%;

  display: block;

  text-decoration: none;

  overflow: hidden;

  border-radius: 12px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


/* Portfolio image */

.category-card img {
  width: 100%;
  height: 520px;

  display: block;

  object-fit: contain;

  background: #ffffff;
}


/* POP EFFECT */

.category-card:hover {
  transform: translateY(-10px) scale(1.015);

  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.15);
}


/* Prints / Sculptures words */

.category-title {
  margin-top: 20px;

  font-size: 32px;
  font-weight: 700;

  text-align: center;

  color: #000000;
}


/* =========================================
   INFORMATION SECTIONS
   ABOUT / CONTACT / RESUME
========================================= */

.information-section,
#about,
#contact,
#resume {
  padding: 80px 6%;
  margin: 0;
}


/* Section titles */

.information-section h2,
#about h2,
#contact h2,
#resume h2 {
  margin: 0 0 24px;

  font-size: 42px;
  font-weight: 700;

  color: #111111;
}


/* Section text */

.information-section p,
#about p,
#contact p,
#resume p {
  margin: 0 0 18px;

  font-size: 22px;
  line-height: 1.7;
}


/* Links inside About / Contact */

#contact a,
#about a,
#resume a {
  color: #111111;
  text-decoration: none;

  font-weight: 600;

  transition: opacity 0.2s ease;
}

#contact a:hover,
#about a:hover,
#resume a:hover {
  opacity: 0.55;
}


/* =========================================
   PRINTS + SCULPTURES PAGES
========================================= */

/*
   Use this structure:

   <main class="collection-page">

     <div class="art-grid">

       <img class="artwork"
            src="images/uploads/Print1.jpg">

       <img class="artwork"
            src="images/uploads/Print2.jpg">

     </div>

   </main>
*/


.collection-page {
  width: 100%;

  padding: 70px 5% 120px;
}


/* Artwork grid */

.art-grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 50px;

  align-items: start;
}


/* Individual artwork */

.artwork {
  width: 100%;
  height: auto;

  display: block;

  object-fit: contain;

  border-radius: 8px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


/* Artwork pop effect */

.artwork:hover {
  transform: translateY(-10px) scale(1.015);

  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.15);
}


/* =========================================
   OPTIONAL COLLECTION HEADING
========================================= */

/*
   If Prints.html or Sculptures.html still
   contains a collection heading, this styles it.
*/

.collection-heading {
  margin: 0 0 50px;

  font-size: 52px;
  font-weight: 700;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  nav {
    padding: 24px 4%;
  }

  .site-name {
    font-size: 27px;
  }

  .nav-links {
    gap: 20px;
  }

  .nav-links a {
    font-size: 16px;
  }

  header {
    height: 520px;
  }

  .category-card img {
    height: 420px;
  }

  .art-grid {
    gap: 30px;
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 750px) {

  nav {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

    padding: 22px 5%;
  }

  .site-name {
    font-size: 28px;
  }

  .nav-links {
    width: 100%;

    display: flex;
    flex-wrap: wrap;

    gap: 14px 22px;
  }

  .nav-links a {
    font-size: 15px;
  }


  /* HERO */

  header {
    height: 420px;
  }

  .hero-image {
    object-position: center;
  }


  /* PORTFOLIO */

  #portfolio {
    padding: 60px 5%;
  }

  .category-grid {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .category-card img {
    height: auto;
  }

  .category-title {
    font-size: 27px;
  }


/* =========================================
   PRINTS + SCULPTURES GALLERY
========================================= */

.collection-page {
  width: 100%;
  max-width: 1400px;

  margin: 0 auto;
  padding: 80px 6% 120px;
}

.art-grid {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 60px;

  align-items: center;
}

.artwork {
  width: 100%;
  max-height: 700px;

  display: block;

  object-fit: contain;

  margin: 0 auto;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.artwork:hover {
  transform: translateY(-10px) scale(1.02);

  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
}


/* MOBILE */

@media (max-width: 750px) {

  .art-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

}
  /* ABOUT / CONTACT / RESUME */

  .information-section,
  #about,
  #contact,
  #resume {
    padding: 60px 5%;
  }

  .information-section h2,
  #about h2,
  #contact h2,
  #resume h2 {
    font-size: 34px;
  }

  .information-section p,
  #about p,
  #contact p,
  #resume p {
    font-size: 19px;
  }
}