/* Academiq v4 - info pages (haqqimizda, elaqe, cafe, valideyn-nezareti).
   Link order: tokens -> base -> bombe -> instruments -> pages -> info.
   Everything is scoped to .info-page so nothing leaks to courses/ or blogs/.
   Contains: shared flow grid, gallery contact sheet, contact panel, cafe mosaic,
   and the home-page components that inner pages need (.split, .sweden-step, .features--2col, .devsys-*). */

/* ---------- shared flow ---------- */
.info-flow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start;min-width:0}
.info-flow>*{grid-column:1/-1;min-width:0}
.info-flow>.btn{justify-self:start}
.info-page .detail-title{max-width:20ch}
.info-page .detail-tagline{margin-bottom:var(--sp7)}
.info-page .checks li::before{box-shadow:0 0 0 3px var(--s0),0 0 0 4px var(--mint)}
.info-page .article-body{padding:40px}
@media (max-width:639px){.info-page .article-body{padding:28px 20px}}

.info-kicker{
  display:flex;align-items:center;gap:var(--sp3);margin:var(--sp9) 0 var(--sp5);
  font:400 .75rem/1.4 var(--f-data);font-stretch:87.5%;letter-spacing:.06em;color:var(--mint);
}
.info-kicker::after{content:"";flex:1;height:1px;background:var(--rule)}

/* home.css components needed on inner pages */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp7);align-items:start}
.split>:first-child{grid-column:1/8;min-width:0}
.split>:last-child{grid-column:8/-1;min-width:0}
.split .article-body{max-width:none}
@media (max-width:1023px){.split>:first-child,.split>:last-child{grid-column:1/-1}}

.features--2col{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);background:none;border:0;border-radius:0}
.features--2col::before{display:none}
.features--2col .feature{flex-direction:column;gap:0;padding:0;border-radius:var(--r1);box-shadow:var(--seat)}
.features--2col .feature:hover{background:var(--p0)}
.features--2col .ic{width:auto;height:auto;margin:20px 24px 0;padding:0;border:0;background:none;justify-content:flex-start;font:600 3rem/.8 var(--f-display);color:var(--violet)}
.features--2col .ic+div{padding:12px 24px 28px}
.features--2col h4{margin-bottom:var(--sp3)}
.features--2col p{font-size:1.0625rem;line-height:1.6}
@media (max-width:767px){.features--2col{grid-template-columns:1fr}}

.sweden-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);margin-top:var(--sp7);padding-top:72px}
.sweden-steps>[data-instrument="method"]{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.sweden-step{padding:24px;min-height:176px}
.sweden-step .n{display:block;margin-bottom:var(--sp3);font:400 .75rem/1 var(--f-data);letter-spacing:.06em;color:var(--blue-ink)}
.sweden-step h4{margin-bottom:var(--sp2)}
.sweden-step p{font:400 .9375rem/1.55 var(--f-body);color:var(--p-ink-2)}
.sweden-step.is-visited{box-shadow:var(--seat),inset 0 3px 0 var(--mint)}
@media (max-width:1023px){.sweden-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.sweden-steps{grid-template-columns:1fr;padding:0 0 0 56px}}

/* ---------- haqqimizda: editorial ---------- */
@media (min-width:1024px){
  .info-about .info-flow>.detail-eyebrow,.info-about .info-flow>.detail-title,.info-about .info-flow>.detail-tagline{grid-column:1/9}
  .info-about .info-flow>.article-body{grid-column:1/8;grid-row:4}
  .info-about .info-flow>.about-stats{grid-column:9/-1;grid-row:4}
}
.info-about .info-flow>.article-body{max-width:none}
.about-stats{display:grid;gap:var(--sp3);align-content:start;margin:0 0 var(--sp7);counter-reset:st}
.about-stats>span{
  counter-increment:st;position:relative;display:flex;align-items:center;min-height:72px;padding:12px 56px 12px 20px;
  background:var(--s1);border:1px solid var(--rule);border-left:4px solid var(--c6);
  font:600 1.0625rem/1.35 var(--f-body);color:var(--ink);letter-spacing:0;
}
.about-stats>span:nth-child(1){border-left-color:var(--c1)}
.about-stats>span:nth-child(2){border-left-color:var(--c3)}
.about-stats>span:nth-child(3){border-left-color:var(--c6)}
.about-stats>span::after{
  content:counter(st,bin3);position:absolute;right:12px;top:10px;font:400 .625rem/1 var(--f-data);letter-spacing:.14em;color:var(--ink-3);
}

.about-gallery-title{
  margin:var(--sp8) 0 var(--sp5);padding-top:var(--sp5);border-top:1px solid var(--rule);
  font:600 clamp(1.375rem,1.1rem + 1vw,1.875rem)/1.15 var(--f-display);letter-spacing:-.01em;color:var(--ink);
}
/* contact sheet: numbered frames with registration marks and a ruler */
.about-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gutter);counter-reset:frame}
.about-gallery figure{
  position:relative;grid-column:span 2;counter-increment:frame;padding:8px 8px 0;margin:0;
  background:var(--s1);border:1px solid var(--rule);border-radius:var(--r1);
  transition:border-color var(--t2);
}
.about-gallery figure:nth-child(n+4){grid-column:span 3}
.about-gallery figure::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--xh-plate) left 2px top 2px no-repeat,var(--xh-plate) right 2px top 2px no-repeat;
}
.about-gallery figure:hover{border-color:var(--blue)}
.about-gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--s2);outline:1px solid var(--rule);outline-offset:-1px}
.about-gallery figure:nth-child(n+4) img{aspect-ratio:16/10}
.about-gallery figure::after{
  content:counter(frame,decimal-leading-zero);display:flex;align-items:center;height:32px;
  font:400 .75rem/1 var(--f-data);letter-spacing:.14em;color:var(--ink-2);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M.5 0v6' stroke='%232E3968'/%3E%3C/svg%3E") right center/50% 6px repeat-x;
}
@media (max-width:639px){
  .about-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp3)}
  .about-gallery figure,.about-gallery figure:nth-child(n+4){grid-column:span 1}
  .about-gallery figure:first-child{grid-column:1/-1}
  .about-gallery img,.about-gallery figure:nth-child(n+4) img{aspect-ratio:4/3}
}
.about-principles{margin-bottom:var(--sp8)}
@media (min-width:1100px){.about-principles{grid-template-columns:repeat(4,minmax(0,1fr))}.about-principles p{font-size:1rem}}

/* ---------- elaqe: contact panel ---------- */
.contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin:0 0 var(--sp9)}
.contact-card{
  position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--sp4);align-items:center;min-height:96px;padding:20px;
  background:var(--p0);color:var(--p-ink);border-radius:var(--r1);box-shadow:var(--seat);
  transition:box-shadow var(--t2) var(--ease),transform var(--t1);
}
.contact-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--xh-plate) right 6px top 6px no-repeat,var(--xh-plate) left 6px bottom 6px no-repeat}
.contact-card:hover{box-shadow:var(--seat),var(--lift)}
.contact-card:active{transform:translateY(1px)}
.contact-card:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.contact-card .ic{
  display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--p1);border:1px solid var(--p-rule);border-radius:var(--r1);
  font:400 1.375rem/1 "Segoe UI Symbol","Apple Symbols",var(--f-data);font-variant-emoji:text;color:var(--blue-ink);
  transition:background-color var(--t1),color var(--t1);
}
.contact-card:hover .ic{background:var(--blue);border-color:var(--blue);color:var(--p0)}
.contact-card div:last-child{min-width:0}
.contact-card span{display:block;font:400 .75rem/1.4 var(--f-data);font-stretch:87.5%;letter-spacing:.06em;color:var(--p-ink-2)}
.contact-card b{display:block;margin-top:2px;font:600 1.125rem/1.25 var(--f-display);letter-spacing:-.005em;overflow-wrap:anywhere}

.contact-location{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp7);align-items:start}
.contact-location-text{grid-column:1/7;min-width:0}
.contact-map{
  grid-column:7/-1;position:relative;min-width:0;min-height:480px;padding:8px;
  background:var(--p0);border-radius:var(--r1);box-shadow:var(--seat);border-top:4px solid var(--c5);
}
.contact-map::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:var(--xh-plate) left 2px top 2px no-repeat,var(--xh-plate) right 2px bottom 2px no-repeat}
.contact-map iframe{display:block;width:100%;height:100%;min-height:464px;border:0;outline:1px solid var(--p-rule);outline-offset:-1px}
.contact-location-text h2{margin-bottom:var(--sp4);font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem)}
.contact-metro{
  display:inline-flex;align-items:center;gap:var(--sp3);min-height:36px;margin-bottom:var(--sp5);padding:0 14px 0 0;
  font:400 .8125rem/1.2 var(--f-data);font-stretch:87.5%;letter-spacing:.06em;color:var(--ink);
  border:1px solid var(--rule);background:var(--s1);
}
.contact-metro::before{content:"";align-self:stretch;width:12px;background:var(--c5);margin-right:2px}
.contact-map-links{display:flex;flex-wrap:wrap;gap:var(--sp3)}
.contact-map-links .btn{display:inline-flex;align-items:center;justify-content:center}
.contact-directions{margin:var(--sp6) 0;border-top:1px solid var(--rule)}
.contact-directions li{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--sp4);padding:16px 0;border-bottom:1px solid var(--rule)}
.contact-directions b{font:400 .75rem/1.6 var(--f-data);font-stretch:87.5%;letter-spacing:.06em;color:var(--mint)}
.contact-directions span{color:var(--ink-2);font-size:1rem;line-height:1.6}
.contact-cta{display:inline-flex;align-items:center}
@media (max-width:1023px){
  .contact-cards{grid-template-columns:1fr;gap:var(--sp3);margin-bottom:var(--sp8)}
  .contact-location-text,.contact-map{grid-column:1/-1}
  .contact-map{min-height:360px}
  .contact-map iframe{min-height:344px}
}
@media (max-width:639px){
  .contact-directions li{grid-template-columns:1fr;gap:var(--sp1)}
  .contact-map-links .btn{flex:1 1 140px}
}

/* ---------- cafe: photo mosaic + life field ---------- */
@media (min-width:640px){
  .cafe-life{grid-column:9/-1;grid-row:1/4;justify-self:end}
  .info-cafe .info-flow>.detail-eyebrow,.info-cafe .info-flow>.detail-title,.info-cafe .info-flow>.detail-tagline{grid-column:1/9}
}
.cafe-life{width:100%;max-width:260px;aspect-ratio:1/1;background:var(--s2);border:1px solid var(--rule);position:relative}
.cafe-life::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--xh-plate) left 3px top 3px no-repeat,var(--xh-plate) right 3px bottom 3px no-repeat}
.cafe-life canvas{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:639px){.cafe-life{display:none}}

.cafe-gallery{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(130px,17vw,230px);gap:var(--gutter);
  margin:0 0 var(--sp8);counter-reset:cf;
}
.cafe-gallery figure{
  position:relative;grid-column:span 2;counter-increment:cf;margin:0;padding:6px;overflow:hidden;
  background:var(--p0);border-radius:var(--r1);box-shadow:var(--seat);
}
.cafe-gallery figure:nth-child(1){grid-column:1/5;grid-row:1/3}
.cafe-gallery figure:nth-child(2){grid-column:5/7;grid-row:1}
.cafe-gallery figure:nth-child(3){grid-column:5/7;grid-row:2}
.cafe-gallery figure:nth-child(4),.cafe-gallery figure:nth-child(5){grid-column:span 3;grid-row:3}
.cafe-gallery img{width:100%;height:100%;object-fit:cover;outline:1px solid var(--p-rule);outline-offset:-1px}
.cafe-gallery figure::after{
  content:counter(cf,bin3);position:absolute;left:14px;top:14px;z-index:2;display:flex;align-items:center;height:20px;padding:0 6px;
  background:var(--s2);color:var(--ink);font:400 .6875rem/1 var(--f-data);letter-spacing:.1em;
}
@media (max-width:639px){
  .cafe-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:38vw;gap:var(--sp3)}
  .cafe-gallery figure:nth-child(n){grid-column:span 1;grid-row:auto}
  .cafe-gallery figure:nth-child(1){grid-column:1/-1;grid-row:span 2}
}
.cafe-features{margin:0 0 var(--sp7)}
.cafe-features .ic{font-size:1.125rem;filter:grayscale(1);opacity:.85;font-variant-emoji:text}
.cafe-note{max-width:640px;padding:20px 24px;font:500 1rem/1.6 var(--f-body)}
.cafe-cta{display:inline-flex;align-items:center;margin-top:var(--sp6)}

/* ---------- valideyn-nezareti: DevSys ---------- */
.devsys-card{padding:32px}
.devsys-card.plate{background:var(--s1);color:var(--ink);border:1px solid var(--rule);box-shadow:none}
.devsys-card .mono{display:block;margin-bottom:var(--sp4);color:var(--mint)}
.devsys-card h3{margin-bottom:var(--sp3)}
.devsys-card>p{color:var(--ink-2)}
/* wide screens: text + store badges left, phone right, so the card matches the copy column's height */
@media (min-width:1024px){
  .info-parent .split>:first-child{grid-column:1/7}
  .info-parent .split>:last-child{grid-column:7/-1}
}
@media (min-width:640px){
  .devsys-card{display:grid;grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:auto auto 1fr auto;column-gap:var(--sp5)}
  .devsys-card>:not(.devsys-phone){grid-column:1}
  .devsys-card .devsys-phone{grid-column:2;grid-row:1/-1;margin:0}
  .devsys-card .store-badges{grid-row:4;flex-direction:column;align-items:flex-start;margin-top:var(--sp5)}
}
/* phone mock: lock screen with DevSys push notifications */
.devsys-phone{
  max-width:300px;margin:var(--sp6) auto 0;padding:10px;background:#05070F;border-radius:46px;
  box-shadow:0 0 0 1px #2A3150,0 0 0 3px #0B0E1A,0 24px 48px -16px rgba(5,7,15,.55);
}
.dp-screen{
  position:relative;display:flex;flex-direction:column;gap:8px;aspect-ratio:9/17.5;padding:12px 12px 30px;overflow:hidden;border-radius:37px;color:#fff;
  background:
    linear-gradient(180deg,rgba(10,13,28,.5) 0%,rgba(10,13,28,.05) 28%,rgba(18,24,48,0) 46%,#121830 70%),
    url("../assets/devsys/family-wallpaper.webp") center top/100% auto no-repeat,
    #121830;
}
/* buzz when a notification lands: two keyframe names so each state change restarts it */
.devsys-phone[data-state="1"]{animation:dp-buzz-a .6s var(--ease)}
.devsys-phone[data-state="2"]{animation:dp-buzz-b .6s var(--ease)}
@keyframes dp-buzz-a{0%,100%{transform:none}15%,45%,75%{transform:translateX(-4px) rotate(-1.2deg)}30%,60%,90%{transform:translateX(4px) rotate(1.2deg)}}
@keyframes dp-buzz-b{0%,100%{transform:none}15%,45%,75%{transform:translateX(-4px) rotate(-1.2deg)}30%,60%,90%{transform:translateX(4px) rotate(1.2deg)}}
.devsys-notif.is-on{animation:dp-drop .45s var(--ease)}
@keyframes dp-drop{from{transform:translateY(-14px) scale(.96);opacity:.4}}
.dp-status{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:2px 14px 0;font:600 .8125rem/1 var(--f-body)}
.dp-island{width:84px;height:24px;background:#000;border-radius:14px}
.dp-sys{display:flex;justify-content:flex-end;gap:5px}
.dp-sys svg{height:11px;width:auto}
.dp-clock{margin:18px 0 22px;text-align:center;font:600 clamp(3.25rem,15vw,4.25rem)/1 var(--f-display);letter-spacing:-.02em;color:rgba(255,255,255,.94)}
.devsys-phone-label{margin-top:auto;padding:0 6px;font:500 .6875rem/1.4 var(--f-data);font-stretch:87.5%;letter-spacing:.06em;color:rgba(255,255,255,.7)}
.devsys-notif{
  display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:11px 12px;border-radius:18px;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;opacity:.72;
  transition:opacity var(--t2),transform var(--t2) var(--ease),background-color var(--t2);
}
.dp-icon{width:34px;height:34px;border-radius:9px;object-fit:cover}
.dp-body{display:grid;gap:1px;min-width:0}
.dp-head{display:flex;justify-content:space-between;gap:8px;font:500 .6875rem/1.3 var(--f-body);color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.04em}
.dp-time{text-transform:none;letter-spacing:0}
.devsys-notif b{font:600 .875rem/1.3 var(--f-body)}
.devsys-notif .dp-body>span{font:400 .8125rem/1.35 var(--f-body);color:rgba(255,255,255,.88)}
.devsys-notif.is-on{opacity:1;transform:scale(1.025);background:rgba(255,255,255,.26)}
.dp-home{position:absolute;left:50%;bottom:9px;width:110px;height:4px;margin-left:-55px;background:rgba(255,255,255,.85);border-radius:3px}

.store-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp3);margin-top:var(--sp5)}
.store-badge{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px 6px 12px;background:#05070F;color:#fff;
  border:1px solid #2A3150;border-radius:10px;transition:border-color var(--t1),transform var(--t1);
}
.store-badge:hover{border-color:var(--mint)}
.store-badge svg{width:22px;height:22px;flex:none}
.store-badge span{display:grid;font:600 1.0625rem/1.1 var(--f-body)}
.store-badge small{font:400 .6875rem/1.2 var(--f-body);color:rgba(255,255,255,.75)}

.info-parent .devsys-section-title{margin-top:var(--sp10)}
.info-parent .devsys-section-sub{max-width:62ch}
.info-parent .features--2col{margin-top:var(--sp6)}
.devsys-moments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);margin-top:var(--sp9)}
.devsys-moment{padding:28px 32px}
.devsys-moment .n{display:block;margin-bottom:var(--sp3);font:400 .75rem/1 var(--f-data);letter-spacing:.06em;color:var(--blue-ink)}
.devsys-moment h3{margin-bottom:var(--sp3)}
.devsys-moment p{color:var(--p-ink-2)}
.devsys-cta-box{
  margin-top:var(--sp9);padding:clamp(24px,4vw,48px);background:var(--s1);border:1px solid var(--rule);border-left:4px solid var(--mint);border-radius:var(--r1);
}
.devsys-cta-box h3{max-width:32ch;margin-bottom:var(--sp3);font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem)}
.devsys-cta-box p{max-width:56ch;margin-bottom:var(--sp5);color:var(--ink-2)}
.devsys-cta-box .btn{display:inline-flex;align-items:center}
@media (max-width:767px){.devsys-moments{grid-template-columns:1fr}.devsys-card{padding:24px 20px}}

@media (prefers-reduced-motion:reduce){
  .contact-card,.contact-card .ic,.about-gallery figure,.devsys-notif,.store-badge{transition:none}
  .devsys-phone,.devsys-notif.is-on{animation:none}
}

/* tweaks after first review */
.cafe-life{margin-bottom:var(--sp7)}
.info-parent .devsys-section-sub{margin-bottom:var(--sp5)}
.info-parent .sweden-steps{margin-top:0}