/* =========================================================
   FOLDER ON PHONES: A STACK OF CARDS  (phones only)
   On a phone held upright the folder (cover, back cover, pages that fan open on hover)
   is replaced by three simple cards:
     1. C V Raman        - comes first
     2. Driving Challenge - arrives from the bottom and stacks on top of C V Raman
     3. Abdul Kalam       - arrives from the bottom and stacks on top of Driving Challenge
   - Scrolling down stacks the cards one after another; scrolling back up un-stacks them.
     (Pure CSS: every card is position: sticky, a little lower than the one before, so the
      tab of each card below stays visible.)
   - Tapping a card does nothing: the cards only stack. The arrow button on a card still works.
   Desktop / tablet / landscape are not touched: the whole file is inside the media query,
   the same one js/folder-mobile/main.js uses.
   ========================================================= */

@media (max-width: 700px) and (orientation: portrait) {

  .folder {
    /* how far each card sits below the one behind it (the tab of the card behind stays visible) */
    --m-step: calc(var(--w) * 0.095);

    aspect-ratio: auto;          /* the height now comes from the cards */
    height: auto;
    perspective: none;
    display: block;
    cursor: default;

  }

  /* room after the last card, so every card can stay stuck (and the finished stack stays on
     screen for a moment) before the folder scrolls away */
  .folder::after {
    content: "";
    display: block;
    height: 40vh;
  }

  /* simple cards: no cover, no back cover */
  .folder .lb,
  .folder .lc {
    display: none;
  }

  /* each card is a sticky block: they pile up under the header as you scroll */
  main .folder.folder .layer.layer {
    position: sticky;
    inset: auto;
    width: 100%;
    aspect-ratio: 1042 / 1518;   /* phone card artwork: assets/images/Inside-N-mobile.svg */
    margin: 0 0 18vh;            /* the gap before the next card comes up from the bottom */
    transform: translateY(var(--m-dy, 0px));
    transform-origin: 50% 50%;
    cursor: default;             /* tapping a card does nothing, the cards only stack */
    -webkit-tap-highlight-color: transparent;
  }

  /* order of the stack: C V Raman at the back, Abdul Kalam on top.
     Each gap is one step smaller than the one before, so when the end of the folder is reached
     the whole stack scrolls away together instead of coming apart. */
  main .folder.folder .l3.l3 { top: var(--m-top, 84px); z-index: 1; }
  main .folder.folder .l2.l2 { top: calc(var(--m-top, 84px) + var(--m-step)); z-index: 2; margin-bottom: calc(18vh - var(--m-step)); }
  main .folder.folder .l1.l1 { top: calc(var(--m-top, 84px) + var(--m-step) * 2); z-index: 3; margin-bottom: calc(18vh - var(--m-step) * 2); }

  /* the opened card is in front of the others */
  main .folder.folder .layer.layer.m-active { z-index: 5; }

  /* a soft shadow so each card is separated from the one behind it (always on, not only on hover) */
  main .folder.folder .layer.layer:not(.lc) {
    filter:
      drop-shadow(0 -2px 5px rgba(40, 30, 20, .14))
      drop-shadow(0 8px 14px rgba(40, 30, 20, .12));
  }

  /* Phone card order: photos (text may sit a little over the bottom edge of the photos),
     then the text, with the arrow button at the bottom right, level with "Tools Used".
     The button's centre is a % of the card (x / 1042, y / 1518).
     The phone cards are not tilted, so --tilt is 0.
     The button is bigger than on desktop so it is easy to tap with a thumb:
     --btn-h = 17vw (66px on a 390px phone), never below 58px or above 84px.
     --btn-w and --k follow from it (see css/tab-button.css). */
  main .folder.folder .l1 .tab-go { --cx: 82.5%; --cy: 87.4%; --tilt: 0deg; }   /* Abdul Kalam */
  main .folder.folder .l2 .tab-go { --cx: 82.5%; --cy: 86.2%; --tilt: 0deg; }   /* Driving Challenge */
  main .folder.folder .l3 .tab-go { --cx: 82.5%; --cy: 86.2%; --tilt: 0deg; }   /* C V Raman */

  main .folder.folder .layer .tab-go {
    --btn-h: clamp(58px, 17vw, 84px);
    --btn-w: calc(var(--btn-h) * 96 / 101);
    --k: calc(var(--btn-h) / 101);
  }

  /* a bigger invisible tap area around the button */
  main .folder.folder .layer .tab-go::after {
    inset: -12px;
  }

  /* the green pulse over the "Abdul Kalam" tab: the phone tab is drawn 1.6x bigger (288 x 88 units -> 461 x 141) */
  .folder .tab-boom {
    width: 44.2226%;   /* 288 x 1.6 / 1042 */
    height: 9.2754%;   /* 88 x 1.6 / 1518 */
  }

  /* the arrow button works on every card that is on top of the pile or opened;
     (cards covered by another card can't be reached anyway) */
  .folder .layer .tab-go {
    pointer-events: auto;
  }
}