/* ===== s20 ===== */
@scope (.s20) {
  :scope{
    --navy:#0e0d2c;
    --gold:#e1caa5;
    --white:#fff;
    --canvas-w:1920px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:var(--navy);font-family:"Assistant","Heebo",system-ui,sans-serif}

  /* Scaled-stage helper — build at 1920, scale to viewport width (RTL anchor right) */
  .scaled{position:relative;width:100%;overflow:hidden;height:calc(100vw * var(--h) / 1920)}
  .scaled > .stage{
    position:absolute;top:0;right:0;
    width:var(--canvas-w);height:calc(var(--h) * 1px);
    transform-origin:top right;
    transform:scale(calc(100vw / var(--canvas-w)));
    direction:rtl;
  }

  .sec{--h:1624}
  /* the Figma group starts at x=-14; widening the stage keeps its own coordinates
     while the full-bleed background still reaches both page edges */
  .sec > .stage{width:1934px}
  .stage{
    /* white top band (0–323) behind heading + gold frame top, navy below */
    background:linear-gradient(to bottom,#fff 0,#fff 323px,var(--navy) 323px,var(--navy) 1624px);
  }

  /* ===== PRESS BOX ===== */
  /* Figma 5647:19842 "Subtract": 10px gold rectangle 1303x655 at (309,6102), square corners,
     top line cut where the section title sits (gap 410px wide). */
  .press-frame{
    position:absolute;left:323px;top:18px;width:1303px;height:655px;
    border:10px solid var(--gold);border-radius:0;background:#fff;
  }
  .press-head{
    position:absolute;left:323px;top:0;width:1303px;height:80px;
    text-align:center;line-height:80px;
  }
  .press-head span{
    display:inline-block;background:#fff;width:410px;padding:0;
    font-family:"Heebo",sans-serif;font-weight:900;font-size:44px;color:var(--navy);
    letter-spacing:-.5px;
  }

  /* ===== CARDS ===== */
  .card{
    position:absolute;top:81px;width:376px;height:534px;border-radius:13px;
    background:#fff;overflow:hidden;
    box-shadow:0 8px 24px rgba(14,13,44,.10);
  }
  .card.reshet{left:371px}
  .card.israel{left:787px}
  .card.arutz{left:1204px}

  .card .art{position:absolute;object-fit:fill;border-radius:8px}
  .card .grad{
    position:absolute;left:0;top:164px;width:376px;height:370px;
    background:linear-gradient(to bottom,rgba(14,13,44,0) 0%,rgba(14,13,44,0) 28%,rgba(14,13,44,.45) 62%,rgba(14,13,44,.96) 100%);
  }
  .logo-box{
    position:absolute;top:279px;left:76px;width:224px;height:114px;border-radius:13px;
    background:#fff;box-shadow:0 6px 18px rgba(14,13,44,.20);
    display:flex;align-items:center;justify-content:center;
  }
  .israel .logo-box{left:77px}
  .logo-box img{display:block}
  .cap{
    position:absolute;top:432px;width:333px;
    font-family:"Heebo",sans-serif;font-weight:500;font-size:24px;line-height:32px;
    color:#fff;text-align:center;
  }
  .reshet .cap{left:24px}
  .israel .cap{left:24px}
  .arutz  .cap{left:23px}

  /* ===== FEATURES ===== */
  .feat-photo{
    position:absolute;left:976px;top:761px;width:962px;height:745px;
    object-fit:cover;border-radius:8px;
  }
  .feat-title{
    position:absolute;left:323px;top:769px;width:565px;
    font-family:"Heebo",sans-serif;font-weight:400;font-size:50px;line-height:60px;
    color:#fff;text-align:right;
  }
  .feat-title b{font-weight:800}

  .f-icon{position:absolute}
  .f-title{
    position:absolute;font-family:"Heebo",sans-serif;font-weight:700;font-size:24px;
    line-height:30px;color:#fff;text-align:right;
  }
  .f-desc{
    position:absolute;font-family:"Assistant",sans-serif;font-weight:400;font-size:20px;
    line-height:28px;color:rgba(255,255,255,.82);text-align:right;
  }

  /* ===== TABLET + MOBILE — real flow layout (stack, no scaled canvas) ===== */
  
  /* ===== MOBILE ===== */

/* ============================================================
   RESPONSIVE — tablet ≤1199 / mobile ≤767
   Figma mobile: press carousel inside a notched gold frame over a
   white→navy band, then the feature rows, then the photo.
   ============================================================ */

/* ===== TABLET 768–1199 ===== */

/* ===== MOBILE ≤767 — 1:1 with the Figma mobile frame ===== */

/* ============================================================
   RESPONSIVE — tablet ≤1199 / mobile ≤767
   Figma mobile: press carousel inside a notched gold frame over a
   white→navy band, then the feature rows, then the photo.
   ============================================================ */
@media (max-width:1199px){
  body{overflow-x:hidden}
  .scaled{height:auto;overflow:visible}
  .scaled > .stage{position:relative;z-index:0;right:auto;left:auto;
    width:100%;max-width:100%;height:auto;transform:none;background:var(--navy);
    display:flex;flex-direction:column;align-items:stretch;padding:0;direction:rtl;overflow-x:clip}

  /* ---- press ---- */
  .press-group{order:1;position:relative;max-width:760px;width:100%;margin:0 auto;
    padding:0 0 35px;--cs:1}
  /* Figma mobile 5686:23520 "Subtract": 6px gold frame, square corners */
  .press-frame{position:absolute;top:16px;left:15px;right:15px;bottom:0;
    width:auto;height:auto;background:transparent;border:6px solid var(--gold);border-radius:0}
  /* full-bleed white band — the page turns navy just past the middle of the frame */
  .press-frame::before{content:"";position:absolute;z-index:-1;top:-17px;left:-50vw;right:-50vw;
    height:calc(52% + 17px);background:#fff}
  .press-head{position:relative;z-index:2;left:auto;top:auto;width:100%;height:auto;
    line-height:1.2;text-align:center}
  .press-head span{display:inline-block;background:#fff;padding:0 22px;
    font-size:32px;color:var(--navy);letter-spacing:-.5px}

  .press-row{position:relative;z-index:1;display:flex;gap:20px;margin-top:16px;
    overflow-x:auto;overflow-y:hidden;height:calc(534px * var(--cs));
    padding-inline:calc((100% - 376px * var(--cs)) / 2);
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .press-row::-webkit-scrollbar{display:none}
  .card{position:relative;top:auto;flex:0 0 376px;width:376px;height:534px;margin:0;
    transform:scale(var(--cs));transform-origin:top right;
    margin-inline-end:calc(-376px * (1 - var(--cs)));scroll-snap-align:center}
  .card.reshet,.card.israel,.card.arutz{left:auto}

  .press__navwrap{position:relative;z-index:6;height:0}
  .press__nav{position:absolute;top:calc((-534px * var(--cs)) / 2 - 26px);
    width:52px;height:52px;border-radius:50%;background:#fff;border:0;padding:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(14,13,44,.22)}
  .press__nav svg{width:26px;height:26px}
  .press__nav--prev{right:3.2%}
  .press__nav--next{left:17.6%}

  /* ---- features ---- */
  .feat-title{order:2;position:static;width:100%;max-width:720px;margin:56px auto 0;padding:0 24px;
    text-align:center;font-size:32px;line-height:42px;color:#fff}
  .feat-list{order:3;width:100%;max-width:720px;margin:34px auto 0;padding:0 16px}
  .feat{position:relative;display:grid;grid-template-columns:70px 1fr;column-gap:18px;
    grid-template-areas:"icon title" "icon desc";align-items:center;padding:13px 0 19px}
  .feat + .feat{border-top:1px solid rgba(255,255,255,.18)}
  .feat .f-icon{grid-area:icon;position:static!important;left:auto!important;top:auto!important;
    width:56px!important;height:auto!important;justify-self:center;align-self:center}
  .feat .f-title{grid-area:title;position:static!important;left:auto!important;top:auto!important;
    width:auto!important;text-align:right;font-size:22px;line-height:30px}
  .feat .f-desc{grid-area:desc;position:static!important;left:auto!important;top:auto!important;
    width:auto!important;text-align:right;font-size:16px;line-height:26px;margin-top:6px}
  /* Figma mobile order: personal ▸ expertise ▸ determination ▸ results */
  .feat:nth-child(3){order:2}
  .feat:nth-child(4){order:1}
  .feat-list{display:flex;flex-direction:column}

  .feat-photo{order:4;position:static;width:calc(100% - 32px);max-width:720px;height:auto;
    aspect-ratio:344/267;object-fit:cover;border-radius:8px;margin:41px auto 0}
}

/* ===== TABLET 768–1199 ===== */
@media (min-width:768px) and (max-width:1199px){
  .press-group{--cs:1}
  .feat-list{max-width:640px}
}

/* ===== MOBILE ≤767 — 1:1 with the Figma mobile frame ===== */
@media (max-width:767px){
  .press-group{--cs:min(1,calc(79.7vw / 376px));padding-bottom:35px}
  .press-head span{font-size:26px;padding:0 16px}
  .press-row{margin-top:16px;gap:16px}
  .feat-title{margin-top:56px;padding:0 20px;font-size:28px;line-height:38px}
  .feat-list{margin-top:34px;padding:0 15px}
  .feat{column-gap:16px;padding:13px 0 19px}
  .feat .f-title{font-size:22px;line-height:30px}
  .feat .f-desc{font-size:16px;line-height:26px}
  .feat-photo{width:calc(100% - 30px);margin-top:41px}
}

/* ===== Figma mobile 5647:20493 — corrected type scale ===== */
@media (max-width:1199px){
  .press-head span{width:auto;}
}
@media (max-width:767px){
  .press-head span{font-size:30px;line-height:40px;}
  .card .cap{font-size:19px;line-height:28px;}
  .feat .f-title{font-size:24px;line-height:30px;}
  .feat .f-desc{font-size:18px;line-height:26px;}
  .feat-title{font-size:32px;line-height:38px;}
}
}