/* MARIA CALADO – FILM PORTFOLIO --------------------

PRIMARY DARK (Headings / Footer)
  Deep Plum        #2A2438

ACCENT (Buttons / Links / Hover)
  Dusty Violet     #7C6AA6

SOFT ACCENT (Highlights / Tags)
  Lavender Mist    #E6E2F3

BACKGROUND
  Film Ivory       #F8F7FB

CARD BACKGROUND
  Soft White       #FFFFFF

SUBTLE BORDER
  Cool Gray Tint   #D8D6E2

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

/* BOX MODEL FIX --------------------------*/
html {
  box-sizing: border-box;
  font-size: 62.5%; /* Set default to 10px */
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* GLOBAL STYLES -------------------------------------- */
body {
  height: 100%;
}
  
/* MARIA CALADO – FILM PORTFOLIO FONTS ---------------- */

body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: #2A2438;
  background-color: white;
  line-height: 1.6;
}

/* HERO / NAME */
.hero-name {
  color: #2A2438;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: 0.5px;
}

/* SECTION HEADINGS */

h1 {
  font-size: 2.5rem;
  color: #2A2438;
}

h2 {
  color: #2A2438;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

h3 {
  color: #2A2438;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

/* BODY TEXT */
p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
}

/* NAV + BUTTONS */
nav, button {
  font-family: "Inter", sans-serif;
  font-weight: 500;
}

/* LINKS ----------------------------------*/

/*  Rollover image styles  */
.figure {
  position: relative;
  /* width: 360px; can be omitted for a regular non-lazy image */
  max-width: 100%;
}

.figure img.Sirv.image-hover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}

.figure:hover img.Sirv.image-hover {
  opacity: 1;
}

a {
  color: #2A2438;
}

a:hover {
  color: #6d618d;
  text-decoration: none;
}

.btn {
  background: #5C5739;
  color:  white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.1rem;
  display: inline-block;
  padding: 5px;
  letter-spacing: 0.08em;
  line-height: 1;
  border-radius: 4px;
}

.btn:hover {
  background: #282204;
}

.content-wrapper {
  margin: 0 auto;
  max-width: 900px;
}

.content-wrapper-transp {
  margin: 0 auto;
  max-width: 900px;
  opacity: 1;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 75%; /* or any other percentage */
}


/* FOTO --------------------------------*/

.foto {
  color: black;
  display: flex;
  flex-direction: row;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-style: normal;
  font-size: 2.5rem;
  /* background-color: #bbce7f; */
  background-image: url("../images/NY-Film.jpg");
  /* border-radius: 12px; */
  margin-bottom: 15px;
  margin-top: -35px;
}


/* Projects ----------------------------------------- */
.project-spacer {
  height: 3rem;
}

.project-banner {
  margin: 1.5rem 0;
}

.project-banner img { 
  max-width: 40%;
  height: auto;
  display: block;
}

.project-article-image {
  width: 250px;
  height: auto;
  float: left;
  margin: 0 1.5rem 1rem 0;
  border: 1px solid #ddd;
  transition: transform 0.2s ease;
}

.project-article-image:hover {
  transform: scale(1.02);
}

.project-card {
  display: flex;
  gap: 2.4rem;
  margin-bottom: 5rem;
  align-items: flex-start;
}

.project-poster {
  flex: 0 0 220px;
  margin: 0;
}

.project-poster img {
  width: 100%;
  height: auto;
  display: block;
}

.project-content {
  flex: 1;
}

@media (max-width: 700px) {
  .project-card {
    flex-direction: column;
  }

  .project-poster {
    max-width: 240px;
  }
}

/* About page visual composition -------------------- */

.about-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 2rem;
}

.about-photo-row-camera-cinema {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 18px;
  align-items: stretch;
}

.about-photo-row-camera-cinema .about-photo {
  margin: 0;
  height: 250px;
  aspect-ratio: auto;
  overflow: hidden;
}

.about-photo-row-camera-cinema .about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* adjust crop */
.about-photo-camera img {
  object-position: 45% center;
}

.about-photo-cinema img {
  object-position: center 45%;
}

@media (max-width: 700px) {
  .about-photo-row-camera-cinema {
    grid-template-columns: 1fr;
  }

  .about-photo-row-camera-cinema .about-photo {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}
.about-photo {
  margin: 0;
  overflow: hidden;
  /* border-radius: 16px; */
  background-color: #E6E2F3;
  box-shadow: 0 16px 40px rgba(42, 36, 56, 0.12);
}

.about-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
  transition: transform 1.8s ease, filter 1.8s ease;
}

.about-photo:hover img {
  transform: scale(1.04);
  filter: saturate(0.95) contrast(1.05);
}

.about-photo-main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.about-photo:not(.about-photo-main):not(.about-photo-wide):not(.about-photo-camera):not(.about-photo-cinema) {
  aspect-ratio: 4 / 3;
}

.about-photo-wide {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}

@media (max-width: 700px) {
  .about-visual {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .about-photo-main,
  .about-photo-wide {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
}

/* VIDEOS-------------------------------*/

.video-embed {
  margin: 4rem 0;
}

.video-embed iframe {
  border: none;
  display: block;
  box-shadow: 0 16px 40px rgba(42, 36, 56, 0.12);
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin-bottom: 80px;
}

.work-card{
  display:block;
  /* border-radius:18px; */
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background:#fff;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#E6E2F3;
}

.media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform 2.2s ease, filter 1.8s ease;
}

/* ALWAYS visible overlay (plum-toned, subtle) */
.overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px;
  background: linear-gradient(
    to top,
    rgba(42,36,56,0.78) 0%,
    rgba(42,36,56,0.30) 45%,
    rgba(42,36,56,0.00) 78%
  );
}

.overlay h1{
  color: #7C6AA6;
  margin:0;
  font-family:"Cormorant Garamond", serif;
  font-weight:400;
  font-size:3rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

.overlay p{
  margin:6px 0 0;
  font-family:"Inter", sans-serif;
  font-weight:400;
  font-size:0.95rem;
  opacity:0.85;
  letter-spacing:0.02em;
}

/* Gentle “cinematic drift” hover */
.work-card:hover video{
  transform: scale(1.06);
  filter: contrast(1.05) saturate(0.95);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .media video{ transition:none; }
  .work-card:hover video{ transform:none; filter:none; }
}

.media::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("images/grain.png");
  background-size:320px 320px;
  opacity:0.05;
  pointer-events:none;
  mix-blend-mode:multiply;
}

/* MULTICONTENT ---------------------------------*/

.multicontent-section {
  margin-bottom: 50px;

}

.multicontent-section h2 {
  border-bottom: 2px dashed #aa9dd4;
}

.multicontent header::before {
  background-color: white;
  background-size: cover;
  content: "";
  display: block;
  height: 10px;
}

.multicontent-generic header::before {
  background-color: white;
  background-size: cover;
  content: "";
  display: block;
  height: 10px;
}

.multicontent header::after {
  background: url(../images/NY-Film.jpg) center top 15%;
  background-size: cover;
  content: "";
  display: block;
  height: 350px;
}

/* HEADER ---------------------------------*/

.tophead {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.tophead-item {
  margin-top: 20px;   
  font-weight: 300;
  font-style: normal;
  font-size: 1.4rem;
}

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

footer {
  background: white;
  color: #574937;
}

.socials {
  list-style-type: none;
  padding: 0;
}

.socials li {
  display: inline-block;
}

.socials img {
  width: 40px;
  padding-right: 10px;
}

.content-wrapper-footer {
  background: #584d75;
  color: #E6E2F3;
  margin: 0 auto;
}

/* MEDIA QUERIES --------------------------*/
@media screen and (max-width: 700px) {
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  h3 {
    font-size: 1.8rem;
  }

  p {
  font-size: 1.2rem;
  }
}

@media screen and (max-width: 450px) {
  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }

  p {
    font-size: 1rem;
  }
}

/* DROP DOWN MENU ---------------*/

/* Dropdown Button */
.dropbtn {
  color: #2A2438;
  background-color: white;
  padding-top: 20px;
  font-style: normal;
  font-size: 1.8rem;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  color: #2A2438;
  display: none;
  position: absolute;
  font-style: normal;
  font-size: 1.4rem;
  background-color: #ccc1ed;
  min-width: 160px;
  border: 1px solid #7C6AA6;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 0px #5f5384;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #2A2438;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #E6E2F3;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the dropdown button when the dropdown content is shown
.dropdown:hover .dropbtn {
  background-color: #000000;
}*/

.dropbtn a {
  text-decoration: none;
}

/* CONTACT FORM */

.contact-form {
  max-width: 650px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
}

.form-row input,
.form-row textarea {
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  padding: 12px 14px;
  border: 1px solid #d8d6e2;
  background: #f8f7fb;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: #7C6AA6;
}

.contact-submit {
  background: #5C5739;
  color: white;
  border: none;
  padding: 12px 18px;
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.contact-submit:hover {
  background: #282204;
}

.form-status {
  font-size: 1.4rem;
  margin-top: 8px;
}

.hidden-field {
  position: absolute;
  left: -9999px;
}

/* CONTACT FORM — visual polish only */

.contact-form {
  border-top: 1px solid rgba(92, 87, 57, 0.22);
  padding-top: 2.8rem;
}

.form-row label {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  color: #44402a;
}

.form-row input,
.form-row textarea {
  border: none;
  border-bottom: 1px solid rgba(42, 36, 56, 0.25);
  background: transparent;
}

.form-row input:focus,
.form-row textarea:focus {
  border-bottom: 1px solid #5C5739;
}

.contact-submit {
  /* background: transparent; */
  background: #dbd5b4;
  color: #5C5739;
  border: 1px solid #5C5739;
}

.contact-submit:hover {
  background: #5C5739;
  color: #fff;
}

/* contact success overlay */

.contact-success {
  position: fixed;
  inset: 0;
  background: rgba(20,20,20,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 999;
}

.contact-success.active {
  visibility: visible;
  opacity: 1;
}

.contact-success-box {
  background: #ffffff;
  padding: 40px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

.contact-success-box h2 {
  font-family: "Playfair Display", serif;
  margin-bottom: 10px;
}

.contact-success-box button {
  margin-top: 20px;
  border: 1px solid #5C5739;
  background: transparent;
  padding: 10px 18px;
  cursor: pointer;
}

.contact-success-box button:hover {
  background: #5C5739;
  color: #fff;
}

.contact-form {
  max-width: 900px;
  margin-top: 4rem;
  background: #eae7e3;
  padding: 3rem;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 20px 45px rgba(0,0,0,0.05);
  margin-bottom: 6rem;
}

.form-row input,
.form-row textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  color: #2A2438;
  background: #f1eeea;
  padding: 1.2rem 1.4rem;
  border: none;
  border-bottom: 1px solid rgba(42, 36, 56, 0.3);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #f1eeea inset;
  -webkit-text-fill-color: #2A2438;
}