/************************

Base / typography

************************/

html {
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--step-4);
  font-weight: 700;
}

h2 {
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--color-muted);
}

a {
  transition: color var(--dur-fast) var(--ease-standard);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/************************

Topbar

************************/

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  /* 1rem gap; same as the intra-icon gap so all icons are evenly spaced even
     though the Info icon is a separate topbar child (for the mobile layout) */
  gap: var(--space-sm);
  /* 3rem top, 2rem bottom */
  padding: var(--space-xl) 0 var(--space-lg);
  background-color: var(--color-bg);
}

/* Left brand block: wordmark stacked over the location; its auto margin pushes
   the icons to the right. Icons stay vertically centered via the topbar's
   align-items:center regardless of this block's height. */
.topbar-brand {
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.topbar-name {
  font-size: calc(var(--step-1) * 1.5);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.topbar-location {
  font-size: calc(var(--step--1) * 0.9); /* was *0.75, +20% */
  color: var(--color-muted);
  white-space: nowrap;
}

.topbar-contact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 2rem; /* icons render at 32px (.icon is 1em) */
  line-height: 1;
  color: var(--color-text);
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Only on hover-capable pointers, so it doesn't stick on touch after a tap */
@media (hover: hover) {
  .topbar-icon:hover {
    color: var(--color-muted);
  }
}

/* Inline SVG icons scale with the element's font-size and take its colour */
.icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
}

/* Deter casual image saving (drag-to-save + selection). NOTE: only a deterrent —
   screenshots, devtools and the network tab still expose the files. */
.photograph-img,
.about-photo {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS: no long-press "save image" menu */
}

/* Mobile: brand (left) + WhatsApp & Info (right); Instagram, Email and the
   location move into the About overlay instead. Tablet keeps the full desktop
   topbar. */
@media (max-width: 640px) {
  .topbar-location,
  .topbar-icon--instagram,
  .topbar-icon--email {
    display: none;
  }

  /* mobile: 2rem top to match the bottom (desktop keeps 3rem) */
  .topbar {
    padding-top: var(--space-lg);
  }
}

/************************

Page layout

Two modes:
- Fallback (no JS / touch / reduced-motion): a normal scrollable page with the
  static masonry and a visible footer.
- Enhanced (`html.js-enhanced`, added by JS on desktop pointer + motion-ok):
  the app is locked to one dynamic-viewport screen; the gallery fills the space
  under the topbar and auto-scrolls; the footer is hidden (no scroll room).

************************/

/* --- Fallback layout --- */
.portfolio {
  padding: var(--space-md) 0 var(--space-2xl);
}

.site-footer {
  border-top: 1px solid var(--color-line);
  padding: var(--space-lg) 0;
}

/* --- Enhanced (viewport-locked app) layout ---
   Applies at every width. The column COUNT is responsive (JS: 1 on mobile,
   3 at >=640px); the locked layout + auto-scroll stay the same throughout. */
.js-enhanced,
.js-enhanced body {
  height: 100%;
}

.js-enhanced body {
  height: 100dvh; /* accounts for mobile browser chrome */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.js-enhanced .topbar {
  flex: 0 0 auto;
}

.js-enhanced .portfolio {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.js-enhanced .gallery {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden; /* the auto-scroll columns are clipped to this window */
  /* fade the photos into the black at the top only (keeps full gallery height) */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2%);
  mask-image: linear-gradient(to bottom, transparent, #000 2%);
}

.js-enhanced .site-footer {
  display: none;
}

/* Every filter uses the auto-scroll columns (rebuilt by JS from the matching
   subset); the static grid stays hidden. */
.js-enhanced .gallery-columns {
  display: flex;
}

.js-enhanced .portfolio-container {
  display: none;
}

/************************

Auto-scroll columns (built by JS)

************************/

.gallery-columns {
  display: none; /* shown in enhanced mode (see above) */
  gap: var(--col-gap);
  height: 100%;
  align-items: flex-start;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out); /* filter cross-fade */
}

.gallery-column {
  flex: 1 1 0;
  min-width: 0;
  will-change: transform;
}

/************************

About panel (overlay dialog)

Grows from the bottom of the topbar to cover the gallery; closed with the
close button, the Portfolio button, or Esc.

************************/

.about-panel {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-dialog);
  padding: var(--space-lg) 0; /* full-bleed like the rest of the site */
  background-color: var(--color-bg);
  overflow-y: auto;
  visibility: hidden;
  clip-path: inset(0 0 100% 0); /* clipped to nothing at the top */
  transition:
    clip-path var(--dur-mid) var(--ease-out),
    visibility 0s linear var(--dur-mid);
}

.about-panel.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path var(--dur-mid) var(--ease-out),
    visibility 0s;
}

.about-close {
  position: sticky;
  top: 0;
  display: block;
  margin-left: auto; /* top-right */
  padding: 0;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--color-text);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.about-close:hover {
  color: var(--color-muted);
}

.about-content {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  max-width: 64rem;
}

/* Text column takes the rest; keep a readable measure */
.about-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--measure);
}

/* Photo — right side, ~1/3 width on desktop */
.about-photo {
  flex: 0 0 33%;
  width: 33%;
  height: auto;
  align-self: flex-start;
}

/* Mobile: stack, photo last (below everything) */
@media (max-width: 640px) {
  .about-content {
    flex-direction: column;
  }

  .about-photo {
    flex: none;
    width: 100%;
  }
}

.about-title {
  font-size: var(--step-2);
  font-weight: 700;
  margin-bottom: var(--space-md);
}

/* Contact links live in the topbar on desktop/tablet; on mobile they move here */
.about-contact {
  display: none;
  margin-bottom: var(--space-lg);
  font-size: var(--step--1);
  color: var(--color-muted);
}

.about-contact--item {
  margin-bottom: var(--space-2xs);
}

.about-contact--item a {
  color: var(--color-text);
}

@media (max-width: 640px) {
  .about-contact {
    display: block;
  }
}

/* Lock background scroll while the panel is open (fallback mode) */
body.about-open {
  overflow: hidden;
}

/* Visually hidden but available to screen readers and SEO */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/************************

Portfolio container style

************************/

.portfolio-container,
.mixed {
  width: 100%;
}

/************************

Portfolio filters

************************/

.portfolio-filters {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-sm);
  /* no top margin; small gap below so the buttons sit close to the images */
  margin: 0 0 var(--space-3xs);
}

/* Plain text buttons: no padding/border/background — sentence-case display face.
   Equal min-width so the row doesn't shift when the (shorter) active label is
   hidden. */
.portfolio-filter {
  min-width: 5.5rem;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  text-align: left;
  color: var(--color-text);
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Show only the two inactive filters: hide the button for the active view */
.portfolio[data-filter='all'] .portfolio-filter[data-filter='all'],
.portfolio[data-filter='portrait'] .portfolio-filter[data-filter='portrait'],
.portfolio[data-filter='product'] .portfolio-filter[data-filter='product'] {
  display: none;
}

/* Filter the gallery by photo type via the section's data-filter state */
.portfolio[data-filter='portrait'] .photograph-product,
.portfolio[data-filter='product'] .photograph-portrait {
  display: none;
}

/************************

Portfolio masonry

CSS multi-column masonry: true variable-height columns that respect each
photo's aspect ratio, works with no JS, and doubles as the mobile /
reduced-motion / no-JS fallback the auto-scroll will later enhance.
Responsive: 1 -> 2 -> 3 columns.

************************/

.photographs-mixed {
  column-count: 1;
  column-gap: var(--col-gap);
}

@media (min-width: 40rem) {
  .photographs-mixed {
    column-count: 2;
  }
}

@media (min-width: 64rem) {
  .photographs-mixed {
    column-count: 3;
  }
}

.photograph {
  /* keep each photo whole within its column */
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: var(--col-gap);
  /* the auto-scroll columns hold <li>s inside <div>s, so kill the marker here */
  list-style: none;
}

.photograph-link {
  display: block;
  position: relative;
  overflow: hidden;
}

.photograph-link picture {
  display: block;
}

.photograph-img {
  width: 100%;
  height: auto; /* natural aspect ratio (true masonry) */
  transition:
    transform var(--dur-mid) var(--ease-out),
    filter var(--dur-mid) var(--ease-out);
}

/* Cyan inset frame element (only becomes visible on hover — see media query) */
.photograph-link::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0 var(--color-accent);
  transition: box-shadow var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

/* Hover effects ONLY on devices with a real pointing device that can hover
   (mouse / trackpad / hover-capable stylus). This avoids "sticky hover" on
   touchscreens, where a tap would trigger and hold these effects. */
@media (hover: hover) and (pointer: fine) {
  /* zoom the photo within its frame (clipped by the link's overflow) */
  .photograph-link:hover .photograph-img {
    transform: scale(1.04);
  }

  /* cyan inset frame over the hovered photo */
  .photograph-link:hover::after {
    box-shadow: inset 0 0 0 2px var(--color-accent);
  }

  /* spotlight: hovering one photo dims the others */
  .gallery-columns:has(.photograph-link:hover)
    .photograph-link:not(:hover)
    .photograph-img {
    filter: brightness(0.4);
  }
}

/************************

Aside / About (provisional — revisited with the topbar + About rewrite)

************************/

.contact-info {
  font-size: var(--step--1);
  color: var(--color-muted);
}

.about-me--info {
  max-width: var(--measure);
  margin-bottom: var(--space-sm);
}

/* "Hi, I'm Fede." lead line */
.about-lede {
  max-width: var(--measure);
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Links in the About text use the cyan accent */
.about-content a {
  color: var(--color-accent);
}

.about-content a:hover {
  color: var(--color-text);
}

/************************

Lightbox (PhotoSwipe) theming
PhotoSwipe exposes CSS variables on `.pswp` — override them to match the site.

************************/

.pswp {
  --pswp-bg: var(--color-bg); /* backdrop */
  --pswp-icon-color: var(--color-text); /* control icons */
  --pswp-icon-color-secondary: #000; /* icon outline/shadow */
  --pswp-error-text-color: var(--color-muted);
}

/* Cyan accent on hovered / focused controls */
.pswp__button:hover .pswp__icn,
.pswp__button:focus-visible .pswp__icn {
  color: var(--color-accent);
  fill: var(--color-accent);
}