/* =========================================================
   SHALIN STUDIO — DESIGN TOKENS
   ========================================================= */

:root{
  --ink:        #2A1712;
  --maroon:     #6B1E2B;
  --maroon-dark:#4A121C;
  --gold:       #C6A15B;
  --gold-soft:  #E4D3AA;
  --ivory:      #F8F2E7;
  --ivory-2:    #F1E8D8;
  --blush:      #C98F82;

  --display: "Fraunces", ui-serif, Georgia, serif;
  --body: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --container: 1160px;
  --radius: 2px;
}


/* =========================================================
   RESET
   ========================================================= */

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

html{
  scroll-behavior:smooth;
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

h1,
h2,
h3{
  font-family:var(--display);
  font-weight:500;
  margin:0;
}

p{
  margin:0;
}

ul{
  margin:0;
  padding:0;
  list-style:none;
}

button{
  font-family:inherit;
  cursor:pointer;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.eyebrow{
  font-family:var(--body);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--maroon);
  font-weight:700;
  margin:0 0 0.9rem;
}

.eyebrow.center{
  text-align:center;
}

.section-title{
  font-size:clamp(2rem, 4vw, 2.8rem);
  letter-spacing:-0.01em;
  margin-bottom:2.6rem;
}

.section-title.center{
  text-align:center;
}


/* =========================================================
   PAPER GRAIN
   ========================================================= */

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  opacity:0.035;
  mix-blend-mode:multiply;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


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

.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(248,242,231,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(42,23,18,0.08);
}

.nav-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.5rem;
  height:76px;

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

.nav-brand{
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:500;
  letter-spacing:0.01em;
  color:var(--maroon);
}

.nav-brand span{
  color:var(--ink);
  font-style:italic;
  font-weight:400;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:2.1rem;
}

.nav-links a{
  font-size:0.86rem;
  font-weight:600;
  color:var(--ink);
  position:relative;
  padding:0.3rem 0;
}

.nav-links a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-2px;
  height:1px;
  background:var(--maroon);
  transition:right 0.28s ease;
}

.nav-links a:not(.nav-cta):hover::after{
  right:0;
}

.nav-cta{
  background:var(--maroon);
  color:var(--ivory) !important;
  padding:0.6rem 1.1rem !important;
  border-radius:var(--radius);
  transition:background 0.2s ease;
}

.nav-cta:hover{
  background:var(--maroon-dark);
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:8px;
}

.nav-toggle span{
  width:22px;
  height:2px;
  background:var(--ink);
  display:block;
  transition:0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}


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

.hero{
  position:relative;
  overflow:hidden;
  padding:5.5rem 1.5rem 5rem;

  background:
    radial-gradient(
      ellipse 80% 60% at 82% 8%,
      rgba(201,143,130,0.16),
      transparent 60%
    ),
    var(--ivory);
}

.hero-inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:2;
}

.hero-eyebrow{
  font-size:0.74rem;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--maroon);
  font-weight:700;
  margin-bottom:1.6rem;
}

.hero-title{
  font-size:clamp(2.3rem, 6vw, 4.1rem);
  line-height:1.12;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.hero-title em{
  color:var(--maroon);
  font-style:italic;
  font-weight:500;
}

.hero-brush{
  width:220px;
  height:22px;
  margin:1.6rem auto 1.7rem;
  display:block;
}

.hero-sub{
  max-width:520px;
  margin:0 auto;
  font-size:1.05rem;
  color:#4a352e;
}

.hero-sub strong{
  color:var(--ink);
}

.hero-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:2.4rem;
}

.hero-mark{
  position:absolute;
  right:-140px;
  top:50%;
  transform:translateY(-50%);
  width:420px;
  height:420px;
  z-index:1;
  opacity:0.55;
}

.hero-mark svg{
  width:100%;
  height:100%;
}

.hero-mark circle{
  fill:none;
  stroke:var(--gold);
  stroke-width:0.6;
  opacity:0.5;
}


/* =========================================================
   BRUSH UNDERLINE
   ========================================================= */

.brush-underline path{
  fill:none;
  stroke:var(--gold);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:640;
  stroke-dashoffset:640;
  animation:draw 1.4s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:0.3s;
}

@keyframes draw{
  to{
    stroke-dashoffset:0;
  }
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;

  padding:0.95rem 1.7rem;

  font-size:0.88rem;
  font-weight:700;
  letter-spacing:0.02em;

  border-radius:var(--radius);
  border:1px solid transparent;

  transition:all 0.22s ease;
}

.btn-primary{
  background:var(--maroon);
  color:var(--ivory);
}

.btn-primary:hover{
  background:var(--maroon-dark);
  transform:translateY(-1px);
}

.btn-ghost{
  border-color:rgba(42,23,18,0.22);
  color:var(--ink);
}

.btn-ghost:hover{
  border-color:var(--maroon);
  color:var(--maroon);
}

.ig-icon{
  width:17px;
  height:17px;
  fill:currentColor;
  flex:none;
}


/* =========================================================
   MARQUEE STRIP
   ========================================================= */

.strip{
  background:var(--maroon);
  color:var(--gold-soft);
  overflow:hidden;
  white-space:nowrap;
  padding:0.85rem 0;
}

.strip-track{
  display:inline-flex;
  gap:0.8rem;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.04em;
  animation:scroll 32s linear infinite;
}

.strip-track span:nth-child(2n){
  color:var(--blush);
}

@keyframes scroll{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}


/* =========================================================
   ABOUT
   ========================================================= */

.about{
  padding:6.5rem 1.5rem;
  max-width:var(--container);
  margin:0 auto;
}

.about-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:4.5rem;
  align-items:center;
}

.about-frame{
  aspect-ratio:4/5;
  border-radius:var(--radius);

  background:
    linear-gradient(
      160deg,
      var(--maroon) 0%,
      var(--maroon-dark) 100%
    );

  position:relative;
  display:flex;
  align-items:flex-end;
  padding:2rem;

  box-shadow:14px 14px 0 var(--gold-soft);
  overflow:hidden;
}

.about-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.about-copy h2{
  font-size:clamp(1.6rem,3vw,2.2rem);
  line-height:1.3;
  margin-bottom:1.3rem;
}

.about-copy p{
  color:#4a352e;
  margin-bottom:1.1rem;
  max-width:52ch;
}

.about-stats{
  display:flex;
  gap:2.4rem;
  margin-top:2rem;
  padding-top:1.8rem;
  border-top:1px solid rgba(42,23,18,0.14);
  flex-wrap:wrap;
}

.about-stats div{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

.about-stats strong{
  font-family:var(--display);
  font-size:1.15rem;
  color:var(--maroon);
}

.about-stats span{
  font-size:0.78rem;
  color:#6b5850;
}


/* =========================================================
   LIPEE CREDIT
   ========================================================= */

.stat-credit{
  margin-top:2.5rem !important;
  padding-top:1.5rem;
  border-top:1px solid rgba(0,0,0,0.1);
  max-width:none !important;
}

.stat-credit-name{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:700;
  color:#2a1a1a;
}

.stat-credit-title{
  font-size:1rem;
  color:#6b5f52;
}


/* =========================================================
   SERVICES
   ========================================================= */

.services{
  background:var(--ivory-2);
  padding:6.5rem 1.5rem;
}

.services-list{
  max-width:1000px;
  margin:0 auto;
}
/* =========================================================
   gap between
   ========================================================= */
.services-header,
.service-row {
  display: grid;
  grid-template-columns: 30% 45% 25%;
  gap: 0;
  align-items: baseline;
}

.services-header {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #8a7a63;
  padding-bottom: 12px;
  border-bottom: 1px solid #d8cdbb;
}

.services-header div:nth-child(1) {
  text-align: left;
  padding-left: 1.4rem;
}
.services-header div:nth-child(2) { text-align: left; }
.services-header div:nth-child(3) { text-align: left; }

.service-price {
  text-align: right;
}

.service-row {
    display: grid;
    grid-template-columns: 30% 45% 25%;
    gap: 0;
    padding: 2.1rem 0;
    border-top: 1px solid rgba(42,23,18,0.14);
    align-items: baseline;
}

.services-list article:last-child{
  border-bottom:1px solid rgba(42,23,18,0.14);
}

.service-row h3{
  font-size:1.35rem;
  color:var(--maroon);
  position:relative;
  padding-left:1.4rem;
  padding-right:1rem;
}

.service-row h3::before{
  content:"";
  position:absolute;
  left:0;
  top:0.45em;

  width:7px;
  height:7px;

  background:var(--gold);
  border-radius:50%;
}

.service-row p{
  color:#4a352e;
  max-width:48ch;
  padding-right:1.5rem;
}

.service-price{
  color:var(--maroon);
  font-family:var(--display);
  font-size:1.05rem;
  font-weight:600;
  white-space:nowrap;
  text-align:left;
}


/* =========================================================
   WORK / PORTFOLIO
   ========================================================= */

.work{
  padding:6.5rem 1.5rem;
  max-width:var(--container);
  margin:0 auto;
}

.work-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  flex-wrap:wrap;
  margin-bottom:2.6rem;
}

.work-head .section-title{
  margin-bottom:0;
}

.work-note{
  max-width:34ch;
  color:#6b5850;
  font-size:0.9rem;
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:1.1rem;
}


/* Portfolio card is now an <a> */
.work-card{
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  background:var(--ivory-2);
  display:block;
  cursor:pointer;
  text-decoration:none;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.work-card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 30px rgba(42,23,18,0.16);
}

.work-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.45s ease;
}

.work-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 25px rgba(42,23,18,0.15);
}

.work-card:hover img{
  transform:scale(1.04);
}

.work-card .work-caption{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  padding:1rem;

  background:
    linear-gradient(
      0deg,
      rgba(42,23,18,0.72),
      transparent 70%
    );

  color:var(--ivory);

  font-size:0.82rem;
  font-weight:600;

  opacity:0;
  transform:translateY(6px);

  transition:all 0.25s ease;
}

.work-card:hover .work-caption{
  opacity:1;
  transform:translateY(0);
}


/* =========================================================
   INSTAGRAM
   ========================================================= */

.instagram{
  background:var(--maroon);
  color:var(--ivory);
  padding:6.5rem 1.5rem;
  text-align:center;
}

.instagram .eyebrow{
  color:var(--gold-soft);
}

.instagram .section-title{
  color:var(--ivory);
}

.ig-brush{
  width:220px;
  height:22px;
  margin:0 auto 1.6rem;
  display:block;
}

.ig-brush path{
  stroke:var(--gold);
}

.instagram-copy{
  max-width:480px;
  margin:0 auto 2.2rem;
  color:var(--gold-soft);
  font-size:1.02rem;
}

.btn-ig{
  background:var(--gold);
  color:var(--maroon-dark);
}

.btn-ig:hover{
  background:var(--gold-soft);
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact{
  padding:6.5rem 1.5rem;
}

.contact-inner{
  max-width:620px;
  margin:0 auto;
}

.contact-copy{
  color:#4a352e;
  margin:1rem 0 2.4rem;
  max-width:50ch;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.form-row label{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.03em;
  color:var(--maroon);
}

.form-row input,
.form-row textarea{
  font-family:var(--body);
  font-size:0.95rem;

  padding:0.85rem 1rem;

  border:1px solid rgba(42,23,18,0.22);
  border-radius:var(--radius);

  background:var(--ivory);
  color:var(--ink);

  resize:vertical;
}

.form-row input:focus,
.form-row textarea:focus{
  outline:2px solid var(--maroon);
  outline-offset:1px;
  border-color:var(--maroon);
}

.contact-form .btn{
  align-self:flex-start;
  border:none;
}

.form-note{
  font-size:0.85rem;
  color:var(--maroon);
  min-height:1.2em;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  background:var(--ink);
  color:var(--ivory-2);
  padding:3rem 1.5rem 2rem;
}

.footer-inner{
  max-width:var(--container);
  margin:0 auto;

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

  flex-wrap:wrap;
  gap:1.4rem;

  padding-bottom:1.8rem;

  border-bottom:1px solid rgba(248,242,231,0.14);
}

.footer-brand{
  color:var(--gold-soft);
}

.footer-brand span{
  color:var(--ivory-2);
}

.footer-links{
  display:flex;
  gap:1.6rem;
  flex-wrap:wrap;
}

.footer-links a{
  font-size:0.85rem;
  font-weight:600;
  color:var(--ivory-2);
  opacity:0.85;
}

.footer-links a:hover{
  opacity:1;
  color:var(--gold-soft);
}

.footer-fine{
  max-width:var(--container);
  margin:1.6rem auto 0;
  font-size:0.78rem;
  color:#a89184;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--maroon);
  outline-offset:2px;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width:860px){

  .about-grid{
    grid-template-columns:1fr;
    gap:2.6rem;
  }

  .about-frame{
    aspect-ratio:16/10;
  }

  .service-row{
    grid-template-columns:1fr 1fr;
    gap:0.8rem 1.5rem;
  }

  .service-row h3{
    grid-column:1;
    grid-row:1;
  }

  .service-row p{
    grid-column:1 / -1;
    grid-row:2;
    padding-right:0;
  }

  .service-price{
    grid-column:2;
    grid-row:1;
    text-align:right;
    align-self:center;
  }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width:720px){

  .nav-links{
    position:fixed;
    inset:76px 0 0 0;

    background:var(--ivory);

    flex-direction:column;
    align-items:flex-start;

    padding:2rem 1.5rem;
    gap:1.6rem;

    transform:translateX(100%);
    transition:transform 0.3s ease;
  }

  .nav-links.is-open{
    transform:translateX(0);
  }

  .nav-links a{
    font-size:1.1rem;
  }

  .nav-toggle{
    display:flex;
  }

  .hero{
    padding:3.6rem 1.3rem 3.5rem;
  }

  .hero-mark{
    display:none;
  }

  .work-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .work-grid{
    grid-template-columns:repeat(2,1fr);
    gap:0.7rem;
  }

  .work-card{
    aspect-ratio:4/5;
  }

  .service-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:0.7rem 1rem;
    padding:1.6rem 0;
  }

  .service-row h3{
    grid-column:1;
    grid-row:1;
    padding-left:1.4rem;
    padding-right:0;
    font-size:1.2rem;
  }

  .service-price{
    grid-column:2;
    grid-row:1;
    font-size:0.95rem;
    text-align:right;
    align-self:start;
  }

  .service-row p{
    grid-column:1 / -1;
    grid-row:2;
    padding-right:0;
    max-width:none;
    font-size:0.92rem;
  }

  .about{
    padding:5rem 1.3rem;
  }

  .services{
    padding:5rem 1.3rem;
  }

  .work{
    padding:5rem 1.3rem;
  }

  .instagram{
    padding:5rem 1.3rem;
  }

  .contact{
    padding:5rem 1.3rem;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:430px){

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

  .hero-title{
    font-size:2.25rem;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-actions .btn{
    justify-content:center;
  }

  .service-row h3{
    font-size:1.08rem;
  }

  .service-price{
    font-size:0.88rem;
  }

  .about-stats{
    gap:1.5rem;
  }

}

/* =========================================================
   PHOTO LIGHTBOXs
   ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;

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

  background: rgba(20, 10, 8, 0.94);

  padding: 30px;
}

.lightbox.is-open {
  display: flex;
}


/* IMAGE */
/* =========================================================
   VIDEO SECTION
   ========================================================= */

.video-section{
  padding:6.5rem 1.5rem;
  max-width:var(--container);
  margin:0 auto;
  text-align:center;
}

.video-thumb{
  position:relative;
  max-width:640px;
  aspect-ratio:16/9;
  margin:0 auto;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  box-shadow:10px 10px 0 var(--gold-soft);
}

.video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.4s ease;
}

.video-thumb:hover img{
  transform:scale(1.03);
}

.video-play-btn{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;

  width:64px;
  height:64px;
  margin:auto;

  background:var(--maroon);
  color:var(--ivory);
  border-radius:50%;

  box-shadow:0 8px 24px rgba(42,23,18,0.35);
  transition:background 0.2s ease, transform 0.2s ease;
}

.video-thumb:hover .video-play-btn{
  background:var(--maroon-dark);
  transform:scale(1.08);
}

/* MODAL */

.video-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(20,10,8,0.94);
  padding:30px;
}

.video-modal.is-open{
  display:flex;
}

.video-modal-inner{
  width:100%;
  max-width:900px;
  aspect-ratio:16/9;
}

.video-modal-inner iframe{
  width:100%;
  height:100%;
  border-radius:3px;
}

.video-modal-close{
  position:fixed;
  top:20px;
  right:25px;
  width:48px;
  height:48px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:42px;
  line-height:1;
  cursor:pointer;
  z-index:10001;
}

@media (max-width:750px){
  .video-modal{
    padding:15px;
  }
}

.lightbox-content {
  position: relative;

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

  max-width: 90vw;
  max-height: 90vh;
}

#lightboxImg {
  display: block;

  max-width: 82vw;
  max-height: 82vh;

  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 3px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}


/* COUNTER */

#lightboxCounter {
  margin-top: 15px;

  color: #f8f2e7;

  font-family: var(--body);

  font-size: 0.85rem;

  letter-spacing: 0.12em;
}


/* CLOSE */

.lightbox-close {

  position: fixed;

  top: 20px;
  right: 25px;

  width: 48px;
  height: 48px;

  border: none;

  background: transparent;

  color: #fff;

  font-size: 42px;

  line-height: 1;

  cursor: pointer;

  z-index: 10001;
}


/* PREVIOUS / NEXT */

.lightbox-prev,
.lightbox-next {

  position: fixed;

  top: 50%;

  transform: translateY(-50%);

  width: 55px;
  height: 65px;

  border: none;

  background: rgba(255,255,255,0.08);

  color: #fff;

  font-size: 32px;

  cursor: pointer;

  z-index: 10001;

  transition: 0.2s ease;
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--maroon);
}


/* MOBILE */

@media (max-width: 750px) {

  .lightbox {
    padding: 15px;
  }

  #lightboxImg {

    max-width: 92vw;
    max-height: 80vh;

  }

  .lightbox-prev,
  .lightbox-next {

    width: 42px;
    height: 52px;

    font-size: 25px;
  }

  .lightbox-prev {
    left: 5px;
  }

  .lightbox-next {
    right: 5px;
  }

  .lightbox-close {
    top: 10px;
    right: 10px;
  }

}

/* =========================================================
   BRIDAL GALLERY
   ========================================================= */

.bridal-gallery {
    width: 100%;
    max-width: 1100px;
    margin: 40px auto 80px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.bridal-gallery .work-card {
    width: 100%;
    margin: 0;
}

.bridal-gallery .gallery-image {
    display: block;
    width: 100%;
    height: 550px;
    object-fit: cover;
    cursor: pointer;

    transition: transform 0.3s ease;
}

.bridal-gallery .gallery-image:hover {
    transform: scale(1.02);
}


/* MOBILE */

@media (max-width: 700px) {

    .bridal-gallery {
        width: 90%;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bridal-gallery .gallery-image {
        height: auto;
        max-height: none;
    }

}
/* =========================================================
   BRIDAL GALLERY PAGE
   ========================================================= */

#bridalGallery .bridal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}


/* Individual photo box */

#bridalGallery .work-card {
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}


/* Gallery thumbnail */

#bridalGallery .gallery-image {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.4s ease;
}


/* Small zoom effect */

#bridalGallery .work-card:hover .gallery-image {
    transform: scale(1.03);
}


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

@media (max-width: 900px) {

    #bridalGallery .bridal-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    #bridalGallery .gallery-image {
        height: 350px;
    }

}


@media (max-width: 600px) {

    #bridalGallery .bridal-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #bridalGallery .gallery-image {
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
    }

}

#bridalGallery .gallery-image {
    width: 100%;
    height: 420px;
    object-fit: cover;
}