/* Shared site shell styles: header + intro/about dropdown + testimonials + footer */

/* ========================================================================
   STYLE GUIDE (READ ME FIRST)
   ------------------------------------------------------------------------
   1) Foundations (theme variables, layout, header, toggle)
   2) Intro Frame & Intro Dropdown (hero/above-grid)
   3) Testimonials Carousel (inside Intro)
   4) Controls & FLYOUT MENU (filters UI)
      - Base flyout structure
      - Tag Pane (generated list of tags)
      - Flyout footer actions & backdrop
      - Light mode variants for flyout
      - Responsive overrides for flyout (mobile & desktop)
   5) Gallery Grid (cards, hovers, title overlays)
   6) Dropdown Panels (opened under a grid row)
   7) Responsive Layout (breakpoints + mobile polish)
   8) Utilities & Misc (figures, split layout, wide thumbs, headings)
   ======================================================================== */

:root {

    --bg:#2d2d2d;
   --text:#f7f7f7;
   --muted:#aaa;
   --border:#555;

    --radius:10px;
   --wrap:1400px;
   --panel-min-h:420px;
   --edge-pad:3rem;

    --panel-bg:rgba(255,255,255,.06);

    /* stable mobile flyout anchor */
    --flyout-top: calc(env(safe-area-inset-top, 0px) + 68px);

    --flyout-left: 42%;

}

body.light {
   --bg:#ececec;
   --text:#111;
   --muted:#555;
   --border:#bbb;
   --panel-bg:#dcdcdc;

}

html,body {
  height:100%
}

body {
  font-family:Georgia,serif;
   background:var(--bg);
   color:var(--text);
   margin:0;
   padding:0;
   transition:background .4s ease,color .4s ease;
   display:flex;
   flex-direction:column
}

.container {
  max-width:var(--wrap);
   margin:0 auto;
   padding:0 var(--edge-pad)
}

header {
  padding:1.5rem 0;
   border-bottom:1px solid var(--border)
}

.header-inner {
  display:flex;
   justify-content:space-between;
   align-items:center;
   gap:1rem
}

h1 {
  margin:0;
   font-size:1.85rem;
   letter-spacing:.5px
}

.site-title-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

.site-title-link:visited {
  color: inherit;
}


.toggle {
  position:relative;
   width:60px;
   height:30px;
   border-radius:999px;
   background:#888;
   cursor:pointer;
   transition:background .3s
}

.knob {
  position:absolute;
   top:3px;
   left:3px;
   width:24px;
   height:24px;
   border-radius:50%;
   background:#fff;
   transition:transform .3s
}

body.light .toggle {
  background:#333
}
 body.light .knob {
  transform:translateX(30px);
   background:#111
}

.main-wrap {
  padding:1rem 0
}

main {
  display:flex;
   flex-wrap:wrap;
   gap:1rem;
   align-items:flex-start
}

/* ==================== INTRO FRAME (separate from grid/filters) ==================== */

.intro {
  flex:0 0 100%;
   width:100%;

}

.intro-frame{
  position:relative;
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0; /* top corners only */
  overflow:hidden;
  background:var(--panel-bg);
  cursor:pointer;
}


.intro-bg {
  display:block;
   width:100%;
   height:200px;
   object-fit:cover;
   filter:saturate(1) contrast(1);
   transition:opacity .25s ease;

}

.intro-bar {
  position:absolute;
   left:0;
   right:0;
   bottom:0;
   padding:.85rem 1rem;
   background:none;
   font-weight:700;
   letter-spacing:.2px;
   display:block;
   pointer-events:none
}

.intro-bar .eyebrow {
  font-size:.85rem;
   opacity:.9
}

.intro-bar .title {
  font-size:.85rem;
   display:block;
   font-weight:600
}

.intro-bg-alt {

    position:absolute;
   inset:0;

    width:100%;
   height:200px;
   object-fit:cover;

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

    transition:opacity .25s ease, transform .35s ease;

    filter:saturate(1) contrast(1);

}

.intro-frame.hovering .intro-bg-alt,
.intro-frame.selected .intro-bg-alt {
   opacity:1;
   transform:translateY(0);

}

.intro-frame.hovering .intro-bg,
.intro-frame.selected .intro-bg {
   opacity:0;

}

.intro-frame.hovering .intro-title,
.intro-frame.selected .intro-title {
  opacity:1
}

/* ==================== INTRO DROPDOWN (independent of gallery panels) ==================== */

.intro-dropdown{
  position:relative;
  display:block;
  grid-column:1/-1;
  border:1px solid var(--border);
  border-top:0;
  border-radius:0;
  background:var(--panel-bg);
  overflow:hidden;
  box-sizing:border-box;

  height:0;
  opacity:0;
  transform:translateY(-8px);
  transition:height .45s ease, opacity .35s ease, transform .35s ease;
  will-change:height, transform, opacity;
}


/* Keep a comfortable intro min-height only here */
.intro-dropdown .dropdown-inner {
  padding:1.5rem;
   min-height:var(--panel-min-h);
   box-sizing:border-box
}

/* Intro grid */
.intro-grid {
  flex:3;
   display:grid;
   grid-template-columns:1.5fr 3fr 2fr;
   gap:30px;
   align-items:start
}

.intro-photo img {
  width:100%;
   object-fit:cover;
   border-radius:10px;
   display:block
}

.intro-col h4 {
  margin:.2rem 0 .6rem;
   font-size:1.25rem
}

.intro-about p {
  margin:.65rem 0;

}

/* SOCIAL ROW (between intro and gallery) */
.social-box{
  flex:0 0 100%;
  display:block;
  border:1px solid var(--border);
  border-top:0;                                  /* merge upward */
  border-radius:0 0 var(--radius) var(--radius); /* bottom corners only */
  background:var(--panel-bg);
  padding:.85rem;
  margin:0;                                      /* no gap */
  box-sizing:border-box;
}


.social-row{
  display:flex;
  flex-wrap:wrap;         /* wrap so it never overflows */
  justify-content:flex-start; /* left-justify the row */
  align-items:center;
  gap:16px 18px;          /* a little further apart */
  padding:0;              /* padding handled by .social-box */
  border-bottom:0;        /* fixes stray 'px' bug and underline */
  margin:0;
}

.social-row a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  border-radius:8px;
  background:transparent;
}
.social-row a:hover{ background:rgba(255,255,255,.08); }
body.light .social-row a:hover{ background:rgba(0,0,0,.06); }

.social-row img{
  width:36px;             /* smaller icons */
  height:36px;
  display:block;
  border-radius:6px;
}

/* light/dark icon swap */
.social-row img[data-theme="light"]{ display:none; }
body.light .social-row img[data-theme="light"]{ display:block; }
body.light .social-row img[data-theme="dark"]{ display:none; }

/* Mobile polish */
@media (max-width:560px){
  .social-box{ padding:.65rem; }

  /* Equal spacing across full width on mobile */
  .social-row{
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
  }
  .social-row a{
    flex: 1 1 0;
    display: inline-flex;
    justify-content: center;
  }

  .social-row img{ width:26px; height:26px; }
}

/* ==================== TESTIMONIALS CAROUSEL (inside Intro) ==================== */

.intro-testimonials {
  display:flex;
   flex-direction:column;
   gap:0rem
}

.t-carousel {

    position: relative;

    display: flex;

    flex-direction: column;

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

    border-radius: 10px;

    background: var(--panel-bg);

    overflow: hidden;

    min-height: 350px;

}

body.light .t-carousel {

    background: #eeeeee;
   /* ← pick a slightly darker shade than #dcdcdc */

}

/* Scroller container */
.t-body {

    position: relative;

    flex: 1 1 auto;

    overflow-y: auto;

    box-sizing: border-box;

    max-height: 300px;

}

/* Single testimonial “page” (animated) */
.t-page {

    display: grid;

    grid-template-columns: 72px 1fr;

    gap: 12px;

    padding: 14px;

    will-change: transform, opacity;

}

.t-photo {
  width:72px;
   height:72px;
   border-radius:50%;
   object-fit:cover;
   display:block
}

.t-quote {
  margin:0;
   line-height:1.5;
   font-style:italic
}

.t-credit {
  margin:.25rem 0 0;
   font-size:.9rem;
   color:var(--muted)
}

.t-nav {
  position:absolute;
   inset:auto 0 0 0;
   display:flex;
   justify-content:space-between;
   padding:8px;
   border-top:1px solid var(--border);
   background:linear-gradient(to top, rgba(0,0,0,.08), rgba(0,0,0,0))
}

.t-btn {
  border:1px solid var(--border);
   background:var(--panel-bg);
   border-radius:8px;
   padding:.35rem .6rem;
   cursor:pointer
}

.t-btn {

    color: #ffffff;
   /* ← change this hex value to your preferred color */

}

body.light .t-btn {

    color: #000000;
   /* lighter mode version */

}

.t-index {
  align-self:center;
   font-size:.85rem;
   color:var(--muted)
}

/* Testimonials directional animations */
.t-body {
   will-change: transform, opacity;

}

@keyframes tOutLeft {

    to {
     transform: translateX(-16px);
     opacity: 0;

  }

}

@keyframes tInRight {

    from {
     transform: translateX(16px);
     opacity: 0;

  }

    to {
     transform: translateX(0);
      opacity: 1;

  }

}

@keyframes tOutRight {

    to {
     transform: translateX(16px);
     opacity: 0;

  }

}

@keyframes tInLeft {

    from {
     transform: translateX(-16px);
     opacity: 0;

  }

    to {
     transform: translateX(0);
         opacity: 1;

  }

}

.t-page.anim-out-left {
   animation: tOutLeft  180ms ease both;

}

.t-page.anim-in-right {
   animation: tInRight  220ms ease both;

}

.t-page.anim-out-right {
   animation: tOutRight 180ms ease both;

}

.t-page.anim-in-left {
   animation: tInLeft  220ms ease both;

}

/* Responsive for intro grid */
@media (max-width:980px) {
   .intro-grid {
     grid-template-columns:1fr 1fr;

  }
   .intro-testimonials {
     grid-column:1 / -1;

  }

}

@media (max-width:640px) {
   .intro-grid {
     grid-template-columns:1fr;

  }

}

/* Larger intro hover title on mobile */
@media (max-width:560px){
  /* ------- FLYOUT (mobile overrides) -------------------------------- */


    .intro-title {

        font-size: 5rem;
      /* bump up from 1.1rem */
        line-height: 1.2;

  }

}

/* Hide when collapsed; remove extra gap on load */
.intro-dropdown[hidden] {
  display:none;
   margin-top:0
}

/* ==================== FOOTER / (Sidebar removed) ==================== */

/* aside removed by request; grid can take full width */
footer {
  color:var(--muted);
   padding:1.5rem 0;
   border-top:1px solid var(--border)
}



/* Footer layout: left links + right copyright */
footer .footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
footer .footer-links{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
}
footer .footer-links a{
  color:var(--muted);
  text-decoration:none;
}
footer .footer-links a:hover{
  text-decoration:underline;
}
footer .footer-copy{
  margin:0;
  text-align:right;
  margin-left:auto;
}