/* ============================================================
   projects.css - "tool rack" cards in a grid
   ============================================================ */

/* geist-mono-latin-wght-normal - same font the generator app uses */
@font-face{
  font-family:'Geist Mono Variable';
  src:url('/assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* cabin-latin-wght-normal - used by the A.I.O.B logo-card buttons */
@font-face{
  font-family:'Cabin';
  src:url('/assets/fonts/cabin-latin-wght-normal.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

.projects-page{
  --ink:#fff;
  --ink-2:rgba(255,255,255,.84);
  --ink-3:rgba(255,255,255,.6);
  --ink-4:rgba(255,255,255,.4);
  --hair:rgba(255,255,255,.14);
  --hair-2:rgba(255,255,255,.26);
  --glass:rgba(6,12,20,.42);
  --glass-2:rgba(6,12,20,.6);
  --accent:#f5c26b;
  --frost:blur(14px) saturate(140%);
  max-width:960px; padding-top:96px;
}
.dark .projects-page{ --glass:rgba(3,7,13,.56); --glass-2:rgba(3,7,13,.72); }

/* ---------------- hero ---------------- */
.proj-hero{
  position:relative;
  margin-bottom:34px;
  padding-bottom:34px;
  border-bottom:1px solid var(--hair);
}
.proj-hero-title{
  font-family:var(--font-sonx);
  font-size:clamp(64px, 13vw, 128px);
  font-weight:700; line-height:.95;
  letter-spacing:-.02em;
  color:var(--ink);
  text-shadow:
    0 0 14px rgba(245,194,107,.4),
    0 0 40px rgba(245,194,107,.16),
    2px 2px 0 rgba(160,110,20,.5),
    5px 5px 0 rgba(100,60,10,.32);
}
.proj-hero-sub{
  margin-top:14px;
  font-family:var(--font-postdate);
  font-size:clamp(17px, 3vw, 21px);
  font-style:italic;
  color:var(--ink-3);
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* ---------------- toolbar ---------------- */
.projects-page .toolbar{ margin:0 0 30px; }
.projects-page .search-input{
  border-radius:14px;
  border-color:rgba(245,194,107,.22);
}
.projects-page .search-input:focus{
  border-color:rgba(245,194,107,.6);
  box-shadow:0 0 0 4px rgba(245,194,107,.12);
}
.projects-page .search-input:focus ~ .search-icon{ color:var(--accent); }

/* ---------------- card grid ---------------- */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(285px, 1fr));
  gap:18px;
  align-items:start;
}

.tile{
  /* per-card accent: defaults to the site gold, then overridden per project
     (from projects.json) or sampled from the card's content image */
  --tile-accent:var(--accent);
  position:relative;
  display:flex; flex-direction:column;
  padding:0;
  border-radius:18px;
  border:1px solid var(--hair);
  background:var(--glass);
  backdrop-filter:var(--frost); -webkit-backdrop-filter:var(--frost);
  cursor:pointer;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 2px 0 rgba(0,0,0,.28);
  transition:transform .25s ease, background .25s, border-color .25s, box-shadow .25s;
}
.tile::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, transparent, var(--tile-accent), transparent);
  opacity:.4; transition:opacity .25s;
}
.tile:hover{
  transform:translateY(-3px);
  background:var(--glass-2);
  border-color:rgba(245,194,107,.4);
  border-color:color-mix(in srgb, var(--tile-accent) 40%, transparent);
  box-shadow:0 16px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.16);
}
.tile:hover::before{ opacity:1; }

/* ---------------- cover (custom title card) ---------------- */
.tile-cover{
  position:relative;
  height:112px;
  flex:none;
  overflow:hidden;
  background:
    radial-gradient(120% 160% at 88% -30%, var(--cover-b,#a8d8ff) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(150% 180% at -12% 115%, var(--cover-a,#f5c26b) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0) 42%);
  transition:filter .3s;
}
.tile-cover::before{ /* fade into the card body */
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 42%, rgba(6,12,20,.72) 100%);
  pointer-events:none;
}
.tile-cover::after{ /* pattern overlay */
  content:''; position:absolute; inset:0;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:screen;
}
.tile-cover.pat-grid::after{
  background-image:
    linear-gradient(var(--cover-b,#a8d8ff) 1px, transparent 1px),
    linear-gradient(90deg, var(--cover-b,#a8d8ff) 1px, transparent 1px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 78%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 78%);
}
.tile-cover.pat-dots::after{
  background-image:radial-gradient(var(--cover-a,#f5c26b) 1.6px, transparent 1.6px);
  background-size:17px 17px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,1), rgba(0,0,0,0) 80%);
  mask-image:radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,1), rgba(0,0,0,0) 80%);
}
.tile-cover.pat-diag::after{
  background-image:repeating-linear-gradient(45deg, var(--cover-a,#f5c26b) 0 1.5px, transparent 1.5px 14px);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 75%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 75%);
}
.tile-cover.pat-waves::after{
  background-image:repeating-radial-gradient(circle at 50% 130%, var(--cover-b,#a8d8ff) 0 2px, transparent 2px 26px);
  background-size:38px 38px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 72%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 72%);
}
.tile-cover-glyph{
  position:absolute; right:12px; bottom:-34px;
  z-index:1;
  font-family:var(--font-sonx);
  font-size:100px; font-weight:700; line-height:1;
  color:rgba(255,255,255,.06);
  -webkit-text-stroke:1.5px rgba(255,255,255,.34);
  text-shadow:0 0 26px var(--cover-a,#f5c26b);
  user-select:none; pointer-events:none;
  transform:rotate(-7deg);
  transition:color .3s, transform .3s, text-shadow .3s;
}

/* ---------------- cover with a screenshot snapshot ---------------- */
.tile-cover-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
  opacity:.85;
  transition:opacity .3s, transform .3s;
}
.tile-cover.cover-shot::after{ display:none; }
.tile-cover.cover-shot::before{
  background:linear-gradient(to bottom, rgba(0,0,0,0) 32%, rgba(6,12,20,.8) 100%);
}
.tile:hover .tile-cover-img{ opacity:1; }

/* ---------------- tile rendered as a solid title card ---------------- */
.tile-titlecard{
  min-height:220px;
  align-items:center;
  justify-content:flex-start;
  padding:24px 22px;
  background:#121212;
}
.tile-titlecard:hover{ background:#161616; }
.tile-titlecard-label{
  font-family:var(--title-font, var(--font-sonx));
  font-size:clamp(20px, 3vw, 26px);
  font-weight:700; line-height:1.15; letter-spacing:-.01em;
  color:#fff; text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  transition:color .25s, text-shadow .25s;
  margin-bottom:4px;
}
.tile:hover .tile-titlecard-label{
  /* fallback for browsers without color-mix() */
  background:linear-gradient(180deg, #ffe6ad, var(--accent) 55%, #cf8f22);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--tile-accent) 55%, #fff),
    var(--tile-accent) 55%,
    color-mix(in srgb, var(--tile-accent) 70%, #000));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}
.tile-titlecard-go{
  font-family:var(--font-postdate);
  font-size:13px; font-style:italic;
  color:var(--ink-3); text-decoration:none;
  transition:color .2s;
}
.tile-titlecard-go:hover{ color:var(--tile-accent); }
.tile-titlecard-note{
  font-family:var(--font-postdate);
  font-size:12px; font-style:italic; line-height:1.3;
  color:var(--ink-4);
  text-align:center;
  margin-bottom:12px;
}
.tile-titlecard-foot{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  margin-top:auto;
}
.tile-titlecard-box{
  width:100%;
  height:44px;
  display:flex; align-items:center;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  /* cylinder shading: the ends curve away from the light, a specular band
     sits near the top, and the base falls into shadow */
  background:
    linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.45) 0%,
      rgba(255,255,255,.20) 16%,
      rgba(255,255,255,.05) 44%,
      rgba(0,0,0,.30) 72%,
      rgba(0,0,0,.62) 100%),
    rgba(0,0,0,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -4px 8px rgba(0,0,0,.5),
    0 3px 8px rgba(0,0,0,.45);
  margin-top:10px;
  margin-bottom:16px;
}
.tile-titlecard-track{
  flex:none;
  display:flex; flex-wrap:nowrap; gap:12px;
  padding:0 16px;
  transition:transform .8s cubic-bezier(.15,.85,.25,1);
}
.tile-titlecard-name{
  font-family:'Geist Mono Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-2);
  white-space:nowrap;
  /* cylinder mapping: JS rotates each name around the box's vertical axis,
     so the flat row reads as a strip wrapped around a drum */
  transform-origin:center center;
  backface-visibility:hidden;
  transition:color .3s, text-shadow .3s;
}
.tile-titlecard-name.is-active{
  color:#fff;
  text-shadow:0 0 12px var(--tile-accent);
  text-shadow:0 0 12px color-mix(in srgb, var(--tile-accent) 65%, transparent);
}
.tile-titlecard .tile-panel{ width:100%; }

/* ---------------- tile rendered as a logo card ---------------- */
.tile-logocard{
  position:relative;
  min-height:220px;
  padding:0;
  background:#121212;
  overflow:hidden;
}
.tile-logocard:hover{ background:#161616; }
.tile-logo{
  position:absolute;
  inset:0;
  overflow:hidden;
  /* optional sky/photo backdrop behind the logo (set via --logo-bg),
     with a soft scrim on the right so the buttons stay readable */
  background-image:
    linear-gradient(to right, rgba(6,12,20,0) 50%, rgba(6,12,20,.45) 100%),
    var(--logo-bg, none);
  background-size:cover, cover;
  background-position:center, center;
  transition:filter .3s;
}
.tile:hover .tile-logo{ filter:brightness(1.1) saturate(1.1); }
.tile-logo svg, .tile-logo img{
  position:absolute;
  top:50%;
  left:14px;
  /* keep the logo inside the left half so it can never run under the
     buttons, however narrow the card gets (phones, or the 2-column
     desktop grid where each card is only ~330px wide) */
  height:auto;
  width:auto;
  max-height:88%;
  max-width:calc(50% - 22px);
  object-fit:contain;
  transform:translateY(-50%);
}
.tile-logo-actions{
  position:relative; z-index:1;
  flex:1;
  margin-left:auto;
  width:50%;
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:22px;
}
.tile-btn{
  position:relative; z-index:0;
  overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:#0e1622;
  color:#fff;
  font-family:'Cabin', var(--font-sonx, sans-serif);
  font-size:14px; font-weight:700; letter-spacing:.01em;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px rgba(0,0,0,.28);
  transition:background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.tile-btn-icon{
  width:17px; height:17px; flex:none;
  object-fit:contain;
}
.tile-btn:hover{
  background:#16202e;
  border-color:rgba(245,194,107,.65);
  border-color:color-mix(in srgb, var(--tile-accent) 65%, transparent);
  color:var(--tile-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 12px 26px rgba(0,0,0,.36);
}
.tile-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.tile-search-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.tile:hover .tile-cover{ filter:brightness(1.14) saturate(1.15); }
.tile:hover .tile-cover-glyph{
  transform:rotate(-4deg) translateY(-4px);
  text-shadow:0 0 22px var(--cover-a,#f5c26b);
}

.tile-main{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  flex:1;
  padding:20px 22px 18px;
}

.tile-title{
  font-family:var(--title-font, var(--font-sonx));
  font-size:clamp(21px, 3.4vw, 26px);
  font-weight:600; line-height:1.2;
  padding-right:36px;
  transition:color .25s, text-shadow .25s;
}
.tile:hover .tile-title{
  background:linear-gradient(180deg, #ffe6ad, var(--accent) 55%, #cf8f22);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--tile-accent) 55%, #fff),
    var(--tile-accent) 55%,
    color-mix(in srgb, var(--tile-accent) 70%, #000));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

.tile-desc{
  margin-top:10px;
  font-size:15px; line-height:1.65; color:var(--ink-3);
  font-family:var(--desc-font, inherit);
}

.tile-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  margin-top:auto;
  padding-top:16px;
}
.tile-open{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--ink-3);
  text-decoration:none;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.05);
  transition:color .2s, border-color .2s, gap .2s, background .2s;
}
.tile:hover .tile-open,
.tile-open:hover{
  color:var(--tile-accent);
  border-color:rgba(245,194,107,.5);
  border-color:color-mix(in srgb, var(--tile-accent) 50%, transparent);
  background:rgba(245,194,107,.1);
  background:color-mix(in srgb, var(--tile-accent) 10%, transparent);
  gap:10px;
}
.tile-open:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.tile-info{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.05);
  color:var(--ink-3);
  font-family:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.tile-info:hover{
  color:var(--tile-accent);
  border-color:rgba(245,194,107,.5);
  border-color:color-mix(in srgb, var(--tile-accent) 50%, transparent);
  background:rgba(245,194,107,.1);
  background:color-mix(in srgb, var(--tile-accent) 10%, transparent);
}
.tile-info:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.tile-info-arrow{ transition:transform .3s ease; }
.tile.is-open .tile-info-arrow{ transform:rotate(45deg); }

/* ---------------- info panel (accordion) ---------------- */
.tile-panel{
  max-height:0; overflow:hidden;
  transition:max-height .45s cubic-bezier(.4,.1,.2,1);
}
.tile-panel-inner{
  margin-top:16px; padding:16px 18px;
  border-radius:14px;
  border:1px solid rgba(245,194,107,.2);
  border-color:color-mix(in srgb, var(--tile-accent) 20%, transparent);
  background:rgba(245,194,107,.05);
  background:color-mix(in srgb, var(--tile-accent) 5%, transparent);
}
.tile-panel-inner h3{
  font-family:var(--font-postdate);
  font-size:14px; font-weight:400; font-style:italic;
  letter-spacing:.06em; color:var(--tile-accent);
  margin-bottom:8px;
}
.tile-panel-inner p{ font-size:14px; line-height:1.6; color:var(--ink-2); margin-bottom:12px; }
.tile-panel-inner ul{
  margin:0; padding-left:18px; list-style:disc;
  display:flex; flex-direction:column; gap:7px;
  font-size:13.5px; line-height:1.55; color:var(--ink-2);
}
.tile-panel-inner strong{ color:var(--ink); font-weight:600; }

/* ---------------- responsive ---------------- */
@media (max-width:768px){
  .projects-page{ padding-top:88px; }
  .proj-hero{ margin-bottom:26px; padding-bottom:24px; }
  .tiles{ grid-template-columns:1fr; gap:14px; }
  .tile{ border-radius:16px; }
  /* keep the title card's inset: the base .tile padding is already 0, so
     re-asserting it here would collapse the card's own padding to the edge */
  .tile-titlecard{ padding:20px 18px; }
  .tile-cover{ height:96px; }
  .tile-cover-glyph{ right:10px; bottom:-30px; font-size:96px; }
  .tile-main{ padding:18px 18px 16px; }
  .tile:hover{ transform:none; }
}
/* logo card: the side-by-side layout needs a wide card, otherwise the
   logo runs under the buttons. Below this width, stack the logo above
   the buttons and let them span the full card. */
@media (max-width:560px){
  .tile-logocard{ min-height:0; }
  .tile-logo{
    position:relative; inset:auto;
    flex:none;
    height:160px;
    background-image:
      linear-gradient(to bottom, rgba(6,12,20,0) 62%, rgba(6,12,20,.55) 100%),
      var(--logo-bg, none);
    background-size:cover, cover;
    background-position:center, center;
  }
  .tile-logo img, .tile-logo svg{
    left:50%; top:50%;
    width:auto; height:auto;
    max-height:82%; max-width:88%;
    transform:translate(-50%,-50%);
  }
  .tile-logo-actions{
    width:100%; margin-left:0;
    padding:16px 18px 18px;
    gap:10px;
  }
}

@media (prefers-reduced-motion:reduce){
  .tile,.tile-title,.tile-cover,.tile-cover-img,.tile-cover-glyph,.tile-info-arrow,.tile-panel,.tile-open{ transition:none !important; }
  .tile:hover{ transform:none; }
}

/* backdrop-filter is dropped on touch/small screens (see base.css); bump the
   glass a little so the cards stay readable without the frost. */
@media (max-width:768px), (hover:none){
  .projects-page{ --glass:rgba(6,12,20,.72); --glass-2:rgba(6,12,20,.82); }
  .dark .projects-page{ --glass:rgba(3,7,13,.82); --glass-2:rgba(3,7,13,.9); }
}