/* Sydas Sector Unified Responsive Layout v60
   One visual system for all public pages, article types, utilities and Admin. */
:root{
  --v60-canvas:1480px;
  --v60-content:1120px;
  --v60-reading:820px;
  --v60-gutter:clamp(18px,3.2vw,58px);
  --v60-section:clamp(42px,6vw,82px);
  --v60-radius:16px;
  --v60-radius-sm:11px;
  --v60-control:44px;
  --v60-shadow:0 12px 34px rgba(0,0,0,.08);
}

/* ---------- foundation ---------- */
html{scroll-padding-top:94px}
body.layout-v60{min-width:320px;text-rendering:optimizeLegibility}
.layout-v60 main{min-height:60vh}
.layout-v60 .wrap{
  width:min(calc(100% - 2 * var(--v60-gutter)),var(--v60-canvas));
  max-width:none;
  margin-inline:auto;
  padding-inline:0;
}
.layout-v60 main>section,
.layout-v60 main>.block{margin-block:var(--v60-section)}
.layout-v60 main>section:first-child{margin-top:clamp(24px,4vw,52px)}
.layout-v60 main>section:last-child{margin-bottom:var(--v60-section)}
.layout-v60 img{display:block;max-width:100%;height:auto}
.layout-v60 :where(.panel,.card,.post,.pillar,.start-card-v28,.dash-card,.book-card-v34){border-radius:var(--v60-radius-sm)}
.layout-v60 :where(button,a,input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--gold) 72%,white);outline-offset:3px}

/* ---------- global header ---------- */
.layout-v60 .nav{position:sticky;top:0;z-index:900;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px) saturate(135%)}
.layout-v60 .nav-in{width:min(calc(100% - 2 * var(--v60-gutter)),var(--v60-canvas));max-width:none;height:68px;margin-inline:auto;padding:0}
.layout-v60 .logo{flex:0 0 auto;white-space:nowrap}
.layout-v60 .menu{min-width:0;gap:clamp(13px,1.45vw,25px)}
.layout-v60 .menu a{display:inline-flex;align-items:center;min-height:40px;white-space:nowrap}
.layout-v60 .nav-right{flex:0 0 auto;gap:8px}
.layout-v60 .nav-right :where(.icon-btn,.hamb){width:40px;height:40px;min-width:40px}
.layout-v60 .explore-nav-v271{position:relative;z-index:30}
.layout-v60 .explore-scroll-v271{width:min(calc(100% - 2 * var(--v60-gutter)),var(--v60-canvas));max-width:none;margin-inline:auto;padding-inline:0;scrollbar-width:none}
.layout-v60 .explore-scroll-v271::-webkit-scrollbar{display:none}
.layout-v60 .explore-scroll-v271 a{min-height:42px;display:inline-flex;align-items:center;white-space:nowrap}

/* ---------- headings and section rhythm ---------- */
.layout-v60 .sec-head{align-items:flex-end;gap:24px;margin-bottom:clamp(22px,3vw,34px)}
.layout-v60 .sec-title{max-width:800px}
.layout-v60 .sec-title h2{font-size:clamp(30px,3.2vw,48px);line-height:1.05;letter-spacing:-.035em}
.layout-v60 .section-summary-v28{max-width:68ch;line-height:1.65}
.layout-v60 .page-wrap{width:min(calc(100% - 2 * var(--v60-gutter)),var(--v60-content));max-width:none;margin-inline:auto;padding-inline:0}
.layout-v60 .cat-head{padding-top:clamp(42px,6vw,78px);padding-bottom:clamp(22px,3vw,38px)}
.layout-v60 .cat-head h1{font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-.045em}
.layout-v60 .cat-head p{max-width:760px;font-size:17px}

/* ---------- cards and grids ---------- */
.layout-v60 .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(17px,2vw,28px)}
.layout-v60 .pillars{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.layout-v60 .related{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.layout-v60 .post,.layout-v60 .pillar,.layout-v60 .start-card-v28{min-width:0;height:100%;overflow:hidden}
.layout-v60 .post{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.layout-v60 .post:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:var(--v60-shadow)}
.layout-v60 .post .ph{aspect-ratio:16/9}
.layout-v60 .post .pb{padding:clamp(17px,2vw,25px)}
.layout-v60 .featured-card{grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);overflow:hidden;border-radius:20px}
.layout-v60 .start-grid-v28{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.layout-v60 .trust-strip-v28{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;overflow:hidden;border-radius:14px}
.layout-v60 .pop-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}

/* ---------- forms and controls ---------- */
.layout-v60 :where(input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea){min-height:var(--v60-control)}
.layout-v60 :where(.btn,.mini,.sbtn,.filter-btn){min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.layout-v60 .filter-btn{padding-inline:16px}
.layout-v60 .filters{gap:7px;overflow-x:auto;scrollbar-width:none}
.layout-v60 .filters::-webkit-scrollbar{display:none}
.layout-v60 .row2,.layout-v60 .row3{gap:14px}
.layout-v60 .panel{padding:clamp(20px,2.5vw,30px)}

/* ---------- editorial article system ---------- */
.layout-v60 .article-hero{width:min(calc(100% - 2 * var(--v60-gutter)),1080px);max-width:none;margin-inline:auto;padding-inline:0}
.layout-v60 .article-hero h1{max-width:100%;text-wrap:balance}
.layout-v60 .article-deck{max-width:760px}
.layout-v60 .article-cover{width:100%;overflow:hidden}
.layout-v60 .prose{width:min(calc(100% - 2 * var(--v60-gutter)),var(--v60-reading));max-width:none;margin-inline:auto;padding-inline:0;overflow-wrap:anywhere}
.layout-v60 .prose :where(p,li){text-wrap:pretty}
.layout-v60 .prose :where(img,video,iframe){border-radius:12px}
.layout-v60 .prose table{width:100%}
.layout-v60 .callout-src{width:min(calc(100% - 2 * var(--v60-gutter)),var(--v60-reading));max-width:none;margin-inline:auto}
.layout-v60 :where(.prevnext,.share-row,.article-end){width:min(calc(100% - 2 * var(--v60-gutter)),980px);max-width:none;margin-inline:auto}
.layout-v60 :where(.related-v27,.cred-v27){width:min(calc(100% - 2 * var(--v60-gutter)),1180px);max-width:none;margin-inline:auto}

/* Dynamic V32 article uses a wide editorial frame with a readable text measure. */
.layout-v60.article-desktop-v32 .article-hero{width:min(calc(100% - 2 * var(--v60-gutter)),var(--v60-canvas));max-width:none}
.layout-v60.article-desktop-v32 .reading-shell-v30{width:min(calc(100% - 2 * var(--v60-gutter)),1400px);max-width:none;grid-template-columns:270px minmax(0,1fr)}
.layout-v60.article-desktop-v32 .reading-main-v30{padding-inline:clamp(48px,5vw,86px)}
.layout-v60.article-desktop-v32 .reading-main-v30 .prose{width:100%;max-width:840px;margin-left:0}
.layout-v60.article-desktop-v32 .reading-main-v30>.cred-v27{width:100%;max-width:840px;margin-left:0}

/* ---------- shop ---------- */
.layout-v60 .shop-hero-v34>.wrap{max-width:var(--v60-canvas)}
.layout-v60 .shop-toolbar-v34{gap:18px}
.layout-v60 .shop-grid-v34{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.layout-v60 .book-card-v34{display:flex;min-width:0;flex-direction:column}
.layout-v60 .book-body-v34{display:flex;flex:1;flex-direction:column}
.layout-v60 .book-foot-v34{margin-top:auto}
.layout-v60 .home-shop-v35{gap:clamp(40px,4vw,72px)}

/* ---------- maps, graph, timeline and special pages ---------- */
.layout-v60 .map-shell-v48{max-width:var(--v60-canvas);grid-template-columns:260px minmax(0,1fr);padding-inline:var(--v60-gutter)}
.layout-v60 .mk-hero-v48,.layout-v60 .map-hero-v48{max-width:var(--v60-canvas);padding-inline:var(--v60-gutter)}
.layout-v60 .graph-wrap-v27{max-width:100%;overflow:auto}
.layout-v60 #knowledgeGraph{max-width:none}
.layout-v60 .timeline{max-width:100%}

/* ---------- admin workstation ---------- */
.layout-v60.admin-v29 .admin-wrap{width:min(calc(100% - 48px),1600px);max-width:1600px;padding-inline:0}
.layout-v60.admin-v29 header.nav .nav-in{width:min(calc(100% - 48px),1600px);max-width:1600px}
.layout-v60.admin-v29 .admin-grid{grid-template-columns:minmax(290px,330px) minmax(0,1fr);gap:22px}
.layout-v60.admin-v29 .rte-area{min-height:500px}
.layout-v60.admin-v29 .admin-tabs{scrollbar-width:none}
.layout-v60.admin-v29 .admin-tabs::-webkit-scrollbar{display:none}

/* ---------- footer ---------- */
.layout-v60 footer{margin-top:clamp(56px,8vw,110px)}
.layout-v60 .foot-in{width:min(calc(100% - 2 * var(--v60-gutter)),var(--v60-canvas));max-width:none;margin-inline:auto;padding-inline:0;gap:clamp(28px,4vw,64px)}
.layout-v60 .foot-links{gap:10px}
.layout-v60 .foot-links a{display:inline-flex;align-items:center;min-height:34px}
.layout-v60 .global-foot-links{padding-inline:var(--v60-gutter)}

/* ---------- laptop / tablet ---------- */
@media (max-width:1199px){
  :root{--v60-gutter:clamp(20px,3vw,34px)}
  .layout-v60 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout-v60 .pillars,.layout-v60 .start-grid-v28{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout-v60 .shop-grid-v34{grid-template-columns:repeat(3,minmax(0,1fr))}
  .layout-v60 .menu{gap:12px}
  .layout-v60 .menu a{font-size:12px}
  .layout-v60 .yt-btn{display:none}
  .layout-v60.article-desktop-v32 .reading-shell-v30{grid-template-columns:230px minmax(0,1fr)}
  .layout-v60.article-desktop-v32 .reading-main-v30{padding-inline:clamp(34px,4vw,58px)}
}
@media (max-width:900px){
  :root{--v60-gutter:20px;--v60-section:52px}
  .layout-v60 .nav-in{height:62px}
  .layout-v60 .hamb{display:grid;place-items:center}
  .layout-v60 .menu.open{display:flex;max-height:calc(100vh - 62px);overflow:auto;padding:10px 0 18px}
  .layout-v60 .menu.open a{width:100%;min-height:46px;padding-inline:var(--v60-gutter);font-size:14px}
  .layout-v60 .featured-card{grid-template-columns:1fr}
  .layout-v60 .featured-card .thumb{aspect-ratio:16/9;min-height:0}
  .layout-v60 .home-shop-v35{grid-template-columns:1fr}
  .layout-v60 .shop-grid-v34{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout-v60 .map-shell-v48{grid-template-columns:1fr}
  .layout-v60.article-desktop-v32 .reading-shell-v30{display:block;width:min(calc(100% - 2 * var(--v60-gutter)),840px);border-radius:16px}
  .layout-v60.article-desktop-v32 .reading-rail-v30{display:none}
  .layout-v60.article-desktop-v32 .reading-main-v30{padding:0 var(--v60-gutter) 48px}
  .layout-v60.article-desktop-v32 .reading-main-v30 .reader-tools{margin-bottom:30px}
  .layout-v60.admin-v29 .admin-wrap{width:calc(100% - 2 * var(--v60-gutter))}
  .layout-v60.admin-v29 .admin-grid{grid-template-columns:1fr}
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  :root{--v60-gutter:14px;--v60-section:42px;--v60-radius:14px;--v60-radius-sm:10px}
  html{scroll-padding-top:72px}
  .layout-v60 .wrap,
  .layout-v60 .page-wrap,
  .layout-v60 .article-hero,
  .layout-v60 .prose,
  .layout-v60 .callout-src,
  .layout-v60 :where(.prevnext,.share-row,.article-end,.related-v27,.cred-v27){width:calc(100% - 2 * var(--v60-gutter));margin-inline:auto;padding-left:0;padding-right:0}
  .layout-v60 .nav-in{width:calc(100% - 24px);height:58px}
  .layout-v60 .logo{max-width:152px;overflow:hidden;text-overflow:ellipsis;font-size:14px}
  .layout-v60 .nav-right{gap:5px}
  .layout-v60 .nav-right :where(.icon-btn,.hamb){width:38px;height:38px;min-width:38px}
  .layout-v60 .nav-right>a[aria-label="Cari"]{display:none}
  .layout-v60 .lang-switch-v58 button{min-width:34px;padding:6px 7px}
  .layout-v60 .explore-scroll-v271{width:100%;padding-inline:12px;gap:6px}
  .layout-v60 .explore-scroll-v271 a{min-height:38px;font-size:10px}

  .layout-v60 main>section:first-child{margin-top:24px}
  .layout-v60 .sec-head{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:20px}
  .layout-v60 .sec-title h2{font-size:31px}
  .layout-v60 .section-summary-v28{font-size:13px}
  .layout-v60 .cat-head{padding-top:34px;padding-bottom:18px}
  .layout-v60 .cat-head h1{font-size:clamp(34px,11vw,48px)}
  .layout-v60 .cat-head p{font-size:14px}

  .layout-v60 .grid,
  .layout-v60 .pillars,
  .layout-v60 .related,
  .layout-v60 .start-grid-v28,
  .layout-v60 .pop-list{grid-template-columns:1fr;gap:12px}
  .layout-v60 .trust-strip-v28{grid-template-columns:1fr}
  .layout-v60 .post .pb{padding:17px}
  .layout-v60 .post .ph{aspect-ratio:16/9}
  .layout-v60 .featured-card{border-radius:14px}
  .layout-v60 .featured-card .fc-body{padding:22px 18px}
  .layout-v60 .panel{padding:17px}

  .layout-v60 :where(.btn,.mini,.sbtn,.filter-btn,button){min-height:42px}
  .layout-v60 .filters{width:100%;padding-bottom:3px;flex-wrap:nowrap}
  .layout-v60 .filter-btn{flex:0 0 auto}
  .layout-v60 .searchbar{width:100%;max-width:none}
  .layout-v60 .row2,.layout-v60 .row3{grid-template-columns:1fr}
  .layout-v60 .form-actions{align-items:stretch;flex-direction:column}
  .layout-v60 .form-actions :where(.btn,.mini){width:100%}

  /* Mobile articles: edge-to-edge media, compact readable text. */
  .layout-v60 .article-hero{padding-top:24px;text-align:left}
  .layout-v60 .article-hero h1{font-size:clamp(34px,10vw,47px);line-height:1.02;letter-spacing:-.04em}
  .layout-v60 .article-deck{max-width:100%;font-size:16px;line-height:1.6}
  .layout-v60 .article-hero .meta,.layout-v60 .breadcrumb{justify-content:flex-start}
  .layout-v60 .article-cover{max-width:100%;aspect-ratio:16/10;margin-top:24px;border-radius:12px}
  .layout-v60 .prose{font-size:17px;line-height:1.78}
  .layout-v60 .prose>p{margin-bottom:23px}
  .layout-v60 .prose h2{margin-top:42px;font-size:28px}
  .layout-v60 .prose h3{font-size:22px}
  .layout-v60 .prose blockquote{margin:30px 0;padding:20px 18px}
  .layout-v60 .prose figure{margin-inline:0}
  .layout-v60 .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .layout-v60 .prevnext{grid-template-columns:1fr;gap:10px}
  .layout-v60.article-desktop-v32 .article-hero{width:calc(100% - 2 * var(--v60-gutter))}
  .layout-v60.article-desktop-v32 .reading-shell-v30{width:calc(100% - 2 * var(--v60-gutter));border:0;background:transparent;box-shadow:none}
  .layout-v60.article-desktop-v32 .reading-main-v30{padding:0}
  .layout-v60.article-desktop-v32 .reading-main-v30 .prose{width:100%;max-width:none}

  /* Keep Shop compact on phones, as requested in earlier versions. */
  .layout-v60 .shop-hero-v34{padding:40px 14px 28px}
  .layout-v60 .shop-toolbar-v34{padding:18px 14px 12px}
  .layout-v60 .shop-grid-v34{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px;padding-inline:10px}
  .layout-v60 .book-body-v34{padding:12px}
  .layout-v60 .book-body-v34 h2{font-size:16px}
  .layout-v60 .book-note-v34{display:none}
  .layout-v60 .book-foot-v34{align-items:flex-start;flex-direction:column}
  .layout-v60 .home-shop-v35{margin-inline:10px;padding:22px 16px}

  .layout-v60 .map-shell-v48{padding-inline:10px}
  .layout-v60 .map-shell-v48>aside{grid-template-columns:1fr 1fr;padding:16px}
  .layout-v60 .map-results-v48{grid-template-columns:1fr}
  .layout-v60 .mk-hero-v48,.layout-v60 .map-hero-v48{padding-inline:16px}
  .layout-v60 .mk-stats-v48{grid-template-columns:repeat(2,1fr)}
  .layout-v60 .mk-grid-v48,.layout-v60 .mk-offers-v48{grid-template-columns:1fr}

  .layout-v60.admin-v29 .admin-wrap{width:calc(100% - 24px);padding-inline:0}
  .layout-v60.admin-v29 .admin-top{align-items:flex-start}
  .layout-v60.admin-v29 .admin-dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout-v60.admin-v29 .admin-tabs{margin-inline:0}
  .layout-v60.admin-v29 .rte-area{min-height:340px;padding:22px 16px}

  .layout-v60 footer{margin-top:56px}
  .layout-v60 .foot-in{width:calc(100% - 2 * var(--v60-gutter));grid-template-columns:1fr;padding-inline:0}
  .layout-v60 .foot-col p{max-width:none}
}

@media (max-width:370px){
  .layout-v60 .shop-grid-v34{grid-template-columns:1fr!important;padding-inline:12px}
  .layout-v60 .lang-switch-v58{display:none}
}

@media (prefers-reduced-motion:reduce){
  .layout-v60 *{scroll-behavior:auto!important}
}

/* ---------- final touch-target pass ---------- */
.layout-v60 .page-context-v28 a,
.layout-v60 .breadcrumb a{display:inline-flex;align-items:center;min-height:36px}
.layout-v60 .timeline-event a{display:inline-flex;align-items:center;min-height:38px;margin-top:10px;padding:7px 12px;border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line));border-radius:999px;text-decoration:none}
.layout-v60 .toc a,.layout-v60 .toc-v27 a{display:flex;align-items:center;min-height:38px}
.layout-v60 :where(.dossier-link,.correction-link){display:inline-flex;align-items:center;min-height:38px;padding-block:7px}
.layout-v60 #memberChip{min-width:42px}
.layout-v60 footer .foot-col>a:not(.logo),
.layout-v60 .footer-policy-v273 a{display:inline-flex;align-items:center;min-height:36px;padding-block:7px}
@media(max-width:640px){
 .layout-v60 .footer-policy-v273{gap:4px 12px}
 .layout-v60 .footer-policy-v273 a{min-height:40px;padding:9px 4px}
 .layout-v60 footer .foot-col>a:not(.logo){min-height:40px}
}