/* =========================================================
   ABOUT_LEFT_CUSTOM — PARED DOWN (icon + title baseline)
   Component-only styles (uses vars from tokens.css)
   ========================================================= */

/* Frame */
.about-left{
  position:relative;
  width:100%;
  height:100%;
  border:10px solid var(--brand-cyan);
  box-sizing:border-box;
  overflow:hidden;

  /* Bottom blur band behind the overlay row (icon • title • year) */
  --overlay-band-pad: var(--overlay-offset, 12px);
  --overlay-band-bg: rgba(0,0,0,.35); /* default; overridden by .light-text/.dark-text */
}
@media (max-width:767px){ .about-left{ border-width:4px; } }

/* Background image */
.about-left .background-image-layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  z-index:1;
}

/* Floating foreground image */
.abt-thumb{ position:relative; z-index:3; }
.abt-thumb img{
  display:block; width:100%; height:auto; object-fit:cover;
  animation:floatUpDown 5s ease-in-out infinite;
}
@keyframes floatUpDown{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }

/* Bottom row: icon + title + year, centered as a unit */
.about-left .overlay-content{
  position:absolute; left:50%;
  bottom: var(--overlay-offset);
  transform:translateX(-50%);
  display:flex; justify-content:center; align-items:flex-end; /* bottom-align all three */
  gap: var(--overlay-gap-left, var(--overlay-gap, 20px));     /* left-side gap control */
  z-index:6;
}

/* Shared size */
.about-left .overlay-content .overlay-icon,
.about-left .overlay-content .overlay-title,
.about-left .overlay-content .overlay-year{
  font-size: var(--overlay-size);
  line-height:1;
  display:inline-block; /* predictable baseline */
}

/* Icon */
.about-left .overlay-content .overlay-icon{
  color:#fff;
  cursor:pointer;
  transition: transform .35s ease, color .35s ease, filter .35s ease;
  position:relative;
  top: var(--overlay-nudge, 0.4px);
  line-height:1.15; /* subtle optical tweak */
}
.about-left .overlay-content .overlay-icon:hover{
  transform: rotate(360deg) scale(1.12);
  color: rgba(0,0,0,.65);
  -webkit-text-stroke: 1px var(--brand-cyan);
  text-shadow: 0 0 6px rgba(0,204,255,.6);
  filter: drop-shadow(0 0 4px rgba(0,204,255,.5));
}

/* Title */
.about-left .overlay-content .overlay-title{
  color:#fff; font-weight:600; white-space:nowrap;
  position:relative;
  top: var(--overlay-nudge, 0.4px);
  line-height:1.15;
}

/* Year (right-side gap + outlined look; no nudge) */
.about-left .overlay-content .overlay-year{
  margin-left: calc(var(--overlay-gap-right, 20px) - 2px);
  font-weight:600;
  color: rgba(0,0,0,.55);
  -webkit-text-stroke: 1px var(--brand-cyan);
  -webkit-text-fill-color: rgba(0,0,0,.55);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  line-height:1;
  top:0;
  position:relative;
}

/* Fallback "legacy" band when overlay_group = false */
.about-left .abt-info{
  position:absolute; left:0; right:0; bottom:0;
  padding: var(--overlay-pad, 12px) 14px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index:4;
}
.abt-info.light-text{ color:#fff; }
.abt-info.dark-text { color:#222; }
.about-left .abt-info .about-title{
  margin:0; line-height:1.1; text-transform:none;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
}

/* Blur band element */
.about-left::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: calc(var(--overlay-size) + (2 * var(--overlay-band-pad)));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  background: var(--overlay-band-bg);
  z-index:4; pointer-events:none;
}

/* Adaptive band + text shadow variable (consumed by other rules you already have) */
.about-left.light-text{ --overlay-band-bg: rgba(0,0,0,.35); --overlay-text-shadow: 0 2px 6px rgba(0,0,0,0.75); }
.about-left.dark-text { --overlay-band-bg: rgba(255,255,255,.3); --overlay-text-shadow: 0 2px 6px rgba(255,255,255,0.7); }

/* Respect reduced motion (optional) */
@media (prefers-reduced-motion: reduce) {
  .abt-thumb img { animation: none; }
}

/* Minor paint isolation (optional, reduces repaints) */
.about-left { contain: paint; }

/* Apply adaptive text shadow to overlay row items */
.about-left .overlay-content .overlay-icon,
.about-left .overlay-content .overlay-title,
.about-left .overlay-content .overlay-year{
  text-shadow: var(--overlay-text-shadow, none);
}