/* ===== OpsArtica — Redesign (SDT Explore) — rev07 =====
   - Mobile-responsive SDT grid (falls back to card grid)
   - Title + tagline tooltips (auto-size, right-aligned on desktop)
   - Transparent icons + soft shadow + strict clamp
   - Hovers always on top, overflow allowed
   - Header/Hero/Contact/Footer preserved
*/

/* Tokens */
:root{
  --bg:#0b0c0e; --panel:#111318; --fg:#e9eaee; --muted:#b7bcc6;
  --burgundy:#770737; --radius:16px; --max:1120px; --header-h:64px;
  --bgx:50%; --bgy:50%; /* SDT background micro-nudge */
}

/* Base + layout */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(800px 500px at 85% -10%, rgba(119,7,55,.25), transparent 60%),
    radial-gradient(600px 400px at 10% 100%, rgba(184,144,46,.18), transparent 60%),
    var(--bg);
  line-height:1.65;
  padding-top:var(--header-h);
}
img{max-width:100%; display:block}
a{color:var(--fg); text-decoration:none}

/* Header */
.oa-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:10000;
  display:flex; align-items:center; justify-content:space-between; padding:0 20px;
  background:linear-gradient(180deg, rgba(15,17,22,.85), rgba(15,17,22,.65));
  -webkit-backdrop-filter:blur(8px) saturate(130%); backdrop-filter:blur(8px) saturate(130%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.oa-header .brand{display:flex; align-items:center; gap:12px}
.oa-header .brand img{height:28px; width:auto; border-radius:8px}
.oa-header nav{margin-left:auto}
.oa-header nav ul{display:flex; gap:14px; list-style:none; margin:0; padding:0}
.oa-header nav a{display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12)}
.oa-header nav a.btn{background:linear-gradient(180deg,var(--burgundy),#5a062b); border-color:rgba(255,255,255,.18)}

/* Container + hero */
.container{width:min(var(--max),92vw); margin-inline:auto}
.wrap.hero,.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; margin:8px 0 24px}
.hero h1{font-family:Rajdhani,sans-serif; font-size:clamp(4rem,8.8vw,7.2rem); line-height:1.05; margin:.25em 0}
.hero h2{color:#d7dbe2; font-size:1.05rem; margin:0 0 8px}
.card img{max-width:320px; width:100%; height:auto; border-radius:18px; box-shadow:0 16px 34px rgba(0,0,0,.5)}
@media(max-width:900px){.wrap.hero,.hero{grid-template-columns:1fr}}

/* Badges + resume CTA */
.hero-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px}
.tag{display:inline-block; padding:4px 10px; border-radius:6px; font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px}
.tag.gold{background:linear-gradient(180deg,#d4af37,#a67c00); color:#fff; border:1px solid rgba(0,0,0,.25); box-shadow:0 2px 4px rgba(0,0,0,.25)}
.tag.burgundy{background:linear-gradient(180deg,var(--burgundy),#5a062b); color:#fff; border:1px solid rgba(255,255,255,.18); box-shadow:0 2px 4px rgba(255,255,255,.18)}
.tag .code{display:inline-block; width:10px; height:10px; margin-left:6px; background:currentColor; border-radius:50%}
.btn-gold-engraved{
  --gold1:#f4e08a; --gold2:#d7b74a; --gold3:#b38a12;
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:14px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#f7f2da;
  background:linear-gradient(180deg,var(--gold1),var(--gold2) 42%,var(--gold3));
  border:1px solid rgba(0,0,0,.35);
  box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.35);
  text-shadow:0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.25)
}

/* Explore heading */
#explore h2,.hero-copy h1{font-family:Rajdhani,sans-serif}
#explore h2{font-size:clamp(1.6rem,3vw,2.2rem); margin:24px 0 8px}
.muted{color:#d7dbe2}

/* ===== SDT grid — DESKTOP (positioned icons over background) ===== */
.sdt-grid{
  position:relative; margin:8px 0 40px; aspect-ratio:1563 / 768;
  background-image:url('../assets/landing_Portfolio.redesign.explore.png');
  background-repeat:no-repeat; background-size:cover; background-position:var(--bgx) var(--bgy);
  border:1px solid rgba(255,255,255,.08); border-radius:16px;
  overflow: visible;
}

/* Accessibility: hide screen-reader-only text */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Icons: transparent background, soft shadow, strict clamp */
.sdt-icon{
  position:absolute; z-index:1;
  width:86px; height:86px; display:grid; place-items:center;
  border-radius:50%; background:transparent; border:none; box-shadow:none;
  text-decoration:none; cursor:pointer; outline:none; transition:transform .18s ease, filter .18s ease;
}
.sdt-icon::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,.28), rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 75%);
  filter:blur(1px); opacity:.9; pointer-events:none;
}
.sdt-icon img{
  width:60px !important; height:60px !important; max-width:none !important; max-height:none !important;
  object-fit:contain !important; display:block !important;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));
}
.sdt-icon:hover{transform:translateY(-2px); filter:saturate(1.05); z-index:9999}
.sdt-icon:focus-within, .sdt-icon:focus-visible{z-index:9999}
.sdt-icon:focus-visible{outline:3px solid rgba(119,7,55,.45); outline-offset:3px}

/* Tooltip: to the right, vertically centered, auto-sized (title + tagline) */
.sdt-icon .caption{
  position:absolute;
  top:50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  display:inline-block;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(15,17,22,.92);
  color:#e9eaee;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  z-index:10000;
  white-space: nowrap;
  max-width: none;
  line-height:1.35;
}
.sdt-icon .caption strong{display:block; font-weight:800; margin-bottom:4px; letter-spacing:.2px}
.sdt-icon .caption em{display:block; font-style:italic; color:#d7dbe2}

.sdt-icon .caption::before{
  content:"";
  position:absolute;
  top:50%;
  left:-6px;
  transform:translateY(-50%);
  width:0; height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-right:6px solid rgba(15,17,22,.92);
  filter: drop-shadow(-1px 0 0 rgba(255,255,255,.15));
}

/* Show tooltip on hover or keyboard focus */
.sdt-icon:hover .caption,
.sdt-icon:focus-visible .caption{ opacity:1; }

/* Icon placements — DESKTOP */
.icon-competence-1{top:30%; left:58%}
.icon-competence-2{top:44%; left:58%}
.icon-autonomy-1{top:30%; left:83%}
.icon-autonomy-2{top:44%; left:83%}
.icon-relatedness-1{top:66%; left:72%}
.icon-relatedness-2{top:79%; left:72%}

/* ===== SDT grid — MOBILE (card grid fallback) ===== */
@media (max-width: 768px) {
  .sdt-grid {
    /* Remove background image and aspect ratio */
    background-image: none;
    aspect-ratio: unset;
    
    /* Convert to CSS grid */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px;
    background: var(--panel);
  }
  
  /* Hide the sr-only column headers on mobile */
  .sdt-grid > .sr-only {
    display: none;
  }
  
  /* Reset icon positioning — now flow in grid */
  .sdt-icon {
    position: relative;
    top: unset !important;
    left: unset !important;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    transition: background .2s ease, transform .18s ease;
  }
  
  .sdt-icon::before {
    display: none; /* Remove the shadow pseudo-element */
  }
  
  .sdt-icon:hover,
  .sdt-icon:focus-visible {
    background: rgba(255,255,255,.06);
    transform: translateY(-2px);
  }
  
  .sdt-icon img {
    width: 52px !important;
    height: 52px !important;
    margin-bottom: 10px;
  }
  
  /* Show caption always on mobile (no hover needed) */
  .sdt-icon .caption {
    position: static;
    transform: none;
    opacity: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    text-align: center;
    white-space: normal;
    pointer-events: auto;
  }
  
  .sdt-icon .caption::before {
    display: none; /* Hide the arrow */
  }
  
  .sdt-icon .caption strong {
    font-size: 0.95rem;
    margin-bottom: 2px;
  }
  
  .sdt-icon .caption em {
    font-size: 0.8rem;
    line-height: 1.3;
  }
}

/* Even smaller screens: single column */
@media (max-width: 420px) {
  .sdt-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  
  .sdt-icon {
    flex-direction: row;
    gap: 14px;
    padding: 14px;
    text-align: left;
  }
  
  .sdt-icon img {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  
  .sdt-icon .caption {
    text-align: left;
  }
}

/* Contact: logo next to OpsAdvising */
#contact{margin-top:30px}
.contact-brand{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.contact-logo{height:48px; width:auto; display:block}
.contact-title{margin:0; font-weight:800; line-height:1.2}
.contact-tagline{margin:0; color:#b7bcc6; line-height:1.2}
@media(max-width:560px){.contact-tagline{flex-basis:100%}}

.contact .form{display:grid; gap:16px; max-width:var(--max); width:100%; margin-inline:auto}
.contact .form input,.contact .form textarea{
  width:100%; background:#0f1116; color:#e6e8ee;
  border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:12px 14px; font-size:1.1rem; line-height:1.4
}
.btn{display:inline-block; padding:8px 16px; border-radius:10px; font-weight:600; border:1px solid rgba(255,255,255,.18); color:#fff;
  background:linear-gradient(180deg,var(--burgundy),#5a062b); cursor:pointer; transition:background .2s ease, transform .15s ease}
.btn:hover,.btn:focus-visible{background:linear-gradient(180deg,#8c0a3f,#660529); transform:translateY(-2px); outline:none}

/* Footer */
.oa-footer{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:65px; padding:0 20px 40px; width:min(var(--max),92vw); margin-inline:auto}
.foot-card{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px; color:#b7bcc6}
.footer-brand{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.footer-logo{height:24px; width:auto; display:block}

/* Footer responsive */
@media (max-width: 600px) {
  .oa-footer {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}