/* ============================================================
   Phone layout
   ------------------------------------------------------------
   Everything here is inside the phone breakpoint on purpose.
   The desktop layout is settled and must not move: if a rule in
   this file ever needs to apply above 1024px, it belongs in
   another file, not here.
   ============================================================ */

@media (max-width: 1023px) {

  /* ── The horizontal gallery on the home page ────────────────
     It is built to be scrolled sideways as the page scrolls down, which
     needs room a phone does not have: on a 390px screen its track ran from
     -2469 to 2859, so most of it sat off-screen and the pictures inside
     looked like they had failed to load. There is no phone-sized version of
     that idea worth having, so the section is left out entirely rather than
     shown broken. */
  .scroll-section {
    display: none !important;
  }

  /* Hiding the gallery left its section behind: an empty band 591px tall,
     padded and coloured, sitting between two real sections like a picture that
     had not loaded. The section exists only to hold the gallery, so it goes
     with it. */
  :has(> .scroll-section) {
    display: none !important;
  }

  /* ── Carousels are never cut ────────────────────────────────
     A card sliced down the middle reads as a mistake, not as "there is more
     this way". On a phone there is no room to hint at the next card without
     cutting it, so a card is shown whole or not at all, and the run keeps the
     page's own side margin at both ends.

     This is the standing rule for every carousel on the site — desktop cuts
     only at the edge of the screen, and a phone does not cut at all. Adding a
     carousel later means adding its class here. */
  .my-project-swiper,
  .my-news-swiper,
  .my-subsidiary-swiper,
  .swiper {
    overflow: hidden;
  }

  /* A carousel's own side padding shifts the whole run: the projects one
     carries 15px on one side only, which left its cards 35px from one edge of
     the screen and 20 from the other. The margin either side of a run is the
     page's, set once by the container — the carousel adds none of its own. */
  html .swiper {
    padding-inline: 0;
  }

  /* The row of subsidiaries carries its own 20px gap, which was the space
     between four cards side by side. Inside a carousel the spacing is the
     carousel's to set, and leaving both in place cost the card 40px of its
     width — it came out 311px wide in a 351px space, short of the margin on
     both sides. */
  html .my-subsidiary-swiper .services-wrapper {
    gap: 0;
    /* The row is turned into a column on a phone — that was the whole of its
       phone layout before there was a carousel. A carousel's track runs
       sideways, and left as a column the four cards simply stacked inside it
       and the arrows moved a track that was not going anywhere. */
    flex-direction: row;
  }

  /* The carousel is a new box between the section and the row of cards, and the
     section lays its children out by their contents — so without a width of its
     own the carousel came out 311px wide in a 351px space, short of the page
     margin on both sides. The row it replaced asked for the full width; so does
     it. */
  html .my-subsidiary-swiper {
    width: 100%;
  }

  /* The subsidiary cards are a fixed 280px tall, which was enough while a phone
     only ever saw an icon and a name. In the carousel the card in view is the
     open one, so its photograph and its description are showing too, and the
     card has to be as tall as what is in it. */
  html .my-subsidiary-swiper .service-card {
    height: auto;
    min-height: 280px;
  }

  /* Cards whose inner box asks for the full width of the card and then adds its
     padding on top of that, rather than inside it. The subsidiary card came out
     411px wide in a 351px card and the description ran off the edge mid-word
     ("فرآوری تخ"); the news card came out 380 in 350 and its text ran under the
     "ادامه مطلب" button and off the side. Neither showed while the cards were
     narrower than the screen — there was slack to hang over into. Inside a
     carousel a card is now exactly the width of the run, so there is none, and
     the padding has to be counted as part of the width. */
  html .swiper-slide,
  html .swiper-slide * {
    box-sizing: border-box;
  }

  /* Open by being the card you are looking at, rather than by being hovered. */
  html .my-subsidiary-swiper .service-card.active .description {
    max-height: 160px;
  }

  /* The "ادامه مطلب" link is pinned to the bottom corner of the news card,
     which works while the excerpt is short enough never to reach it. On a phone
     the same excerpt takes twice as many lines and runs underneath the link,
     with the two printed over each other. Let it sit after the text instead.
     Anchored on the link itself, so it holds wherever that card is used. */
  html .swiper-slide :has(> .wp-block-read-more) {
    position: static;
    margin-top: 12px;
  }

  /* One whole card, with the page margin either side of the run.
     The `html` matters here as it does above: the news block carries its own
     rule setting the slide to 80% !important — a deliberate peek at the next
     card on a wide screen — written into the page and printed after this file.
     On a phone that peek is a card cut down the middle, which is the one thing
     the site does not do. */
  html .my-project-swiper .swiper-slide,
  html .my-news-swiper .swiper-slide,
  html .my-subsidiary-swiper .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* The news block on the home page sits on a 10px gutter of its own rather
     than the page's 20, and its arrows carry a 120px gutter written for a wide
     screen — a third of a phone. Anchored on the arrows' own class, so it holds
     wherever that block is used. */
  /* The `html` on the front of these is doing real work: the page builder
     writes its own rule for the very same element at exactly the same strength,
     and prints it after this file. One element name is enough to settle it. */
  html .slider-top-nav {
    padding-inline: 0;
  }

  /* Only a section sitting directly in the page's flow. A carousel further in
     is already inside a section that is on the margin, and giving it the margin
     again insets it twice: on the projects page that pushed the run to 40px
     from one edge and 55 from the other, and on the home page it cost the
     subsidiary card 40px of its width. */
  html .main-content-wrapper > :has(> .slider-top-nav) {
    padding-inline: 20px;
  }

  /* ── The job cards ──────────────────────────────────────────
     Each card is 300px tall whatever is in it, which on a wide screen is what
     keeps a row of them level. Stacked on a phone there is no row to be level
     with, and a card whose contents run to 240px just ends in 60px of nothing.

     The list has a hand-written class of its own — job-list, added to the box
     that holds the cards — because every card carries a different generated
     class, so there was nothing to write a rule against that would still hold
     when a sixth job is posted. */
  html .job-list > * {
    height: auto;
    /* And a card's words are not written on its edge. There is no inner spacing
       at all on a phone — the job title ended flush against the right side of
       the card and the button ran from one edge to the other, so the card read
       as a box drawn around the text rather than as a card. */
    padding: 20px;
  }

  /* The list asks for 95% of what holds it, which on a phone is already the page
     margin — so the cards came out at 316px inside a 351px column, a second
     margin inside the first. Everything else on the page runs to 351. */
  html .job-list {
    width: 100%;
  }

  /* The city, the hours and the company. At 18px they read as loudly as the job
     title and take three lines to do it; they are what you check after the
     title, not before it. */
  html .job-list > * > :first-child > :nth-child(2) p {
    font-size: 15px;
  }

  /* A button that runs the width of the card is easier to hit with a thumb, and
     the card has nothing else on that line to share it with. */
  html .job-list > * > :last-child a {
    width: 100%;
    justify-content: center;
  }

  /* ── The hiring steps ───────────────────────────────────────
     Five numbered steps spread across a rail. On a wide screen they are spaced
     out along it; on a phone the same five were pushed into 351px by spreading
     them between the two ends, which does not shrink them — it only removes the
     space between them. Steps 1 and 2 ended up touching, with the rail between
     them gone, while 3, 4 and 5 still had gaps: an order that reads as a
     mistake rather than as a sequence.

     They keep their spacing now and the row scrolls sideways instead, which is
     what the owner asked for. This is the one run on the site allowed to be cut
     by the screen edge: it is not a carousel of cards but a scale, and seeing
     the next step half-arrived is what tells you it goes on. */
  html .timeline-steps {
    justify-content: flex-start;
    gap: 26px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* The run begins on the page margin like everything else, and keeps it at
       the far end too, so the last step does not finish against the screen. */
    scroll-padding-inline: 0;

    /* A step half-visible at the far edge is the point — it is what says there
       are more — but cut square it reads as a mistake instead. Faded out, the
       same half-step reads as an invitation to swipe. The fade is only at the
       end the run continues towards; the first step stays sharp against the
       page margin, so it is still obvious where the sequence begins. */
    -webkit-mask-image: linear-gradient(to var(--msk-run-direction, left), #000 78%, transparent 100%);
    mask-image: linear-gradient(to var(--msk-run-direction, left), #000 78%, transparent 100%);
  }

  html .timeline-steps::-webkit-scrollbar {
    display: none;
  }

  html .timeline-steps .step {
    flex: 0 0 auto;
    width: 92px;
    scroll-snap-align: start;
    position: relative;
  }

  /* The rail is one bar stretched across the whole section, which is right when
     the steps are spread along it and wrong the moment they scroll: it stayed
     still while they moved, and it ran on past the first step to the edge of the
     screen — so step 1 looked cut off at the start of its own sequence, which is
     exactly what the owner circled.

     Each step carries its own piece of rail instead, reaching to the next one.
     It travels with the steps, and there is none after the last: where the rail
     stops is where the sequence stops. */
  html .timeline-line {
    display: none;
  }

  html .timeline-steps .step:not(:last-child)::after {
    content: "";
    position: absolute;
    /* The circle is 60px tall, so its middle is 30 down. */
    top: 30px;
    /* From this step's circle, across the gap, to the next step's circle: 16px
       of this step's own margin + the 26px gap + 16 of the next one's. */
    inset-inline-end: -42px;
    width: 58px;
    height: 3px;
    background: #2d686a;
  }

  /* ── The picture at the top of a post ───────────────────────
     It hangs below the header and the article begins under it. The article's
     start is a fixed 150px from the top of its own section, but the picture is
     positioned from the top of the header — so it moves down as the title grows,
     and the space under it is whatever is left: 129px under a two-line title,
     88px under a three-line one. Same design, different gap on every post, which
     is what the owner meant by "whether the title is one line or three".

     The picture is pinned to the bottom of the header instead. It has both a top
     and a bottom in its own styles, and when an absolutely positioned box is
     given both plus a height, the top wins and the bottom is ignored — which is
     why the bottom it already declares was never doing anything. Releasing the
     top lets it take effect, and the gap is then the same on every post.

     The box it is measured from has to be the header, too. It was being
     measured from the div holding the title, whose height *is* the title — so
     pinning it to that box's bottom would have kept exactly the drift we are
     removing. That div gives up its own positioning, and the header, which is a
     fixed 590px, becomes what the picture hangs from. */
  html .hero-overlap > div:has(> .hero-overlap__image) {
    position: static !important;
  }

  html .hero-overlap .hero-overlap__image {
    top: auto !important;
    /* 150px of article padding, less 90, leaves 60px under the picture. */
    bottom: -90px !important;
  }

  /* ── The blog panel in the menu ─────────────────────────────
     On a wide screen the blog item opens a panel: categories down one side,
     the five latest posts as picture cards down the other. The panel is built
     for that width and styled only there, so on a phone the same markup arrives
     with no layout at all — the categories ran together on a single line and the
     five cards stacked into a black heap of overlapping titles.

     A phone menu wants a list of places to go, not a magazine. The cards go, and
     the categories become what everything else in that menu already is: one link
     per line. The posts are still built server-side, so this costs nothing to
     hide — and it cannot be decided in PHP, because the page is cached once and
     served to phones and desktops alike. */
  html .msk-bm {
    display: block;
  }

  html .msk-bm__posts {
    display: none;
  }

  html .msk-bm__cats {
    display: flex;
    flex-direction: column;
  }

  /* The menu item above already says بلاگ; a heading saying "categories" under
     it is a word for a layout that is no longer there. */
  html .msk-bm__h {
    display: none;
  }

  html .msk-bm__cat,
  html .msk-bm__all {
    display: block;
    padding: 12px 0;
    font-size: 15px;
  }

  /* ── Rounded corners ────────────────────────────────────────
     Every card on the site is rounded; a few on the phone layout were left
     square, which reads as unfinished next to the rest. */
  html .gb-element-cc853923,
  html [class*="gb-element"] > .wp-block-cover,
  html .msk-card,
  html .swiper-slide > [class*="gb-element"] {
    border-radius: 25px;
  }

}