/* Design polish, 3 November: small alignment and consistency fixes.
   Loaded after owner-visual.css. The look of the site stays the same. */

/* Match labels to the actual panels in the original 1800x450 artwork.
   The mobile crop is x=640..1175, y=340..450. Its proportions must not
   depend on the inherited 44px minimum height of the tap targets. */
@media(min-width:1001px){
 #top_menu1,#top_menu2,#top_menu3{top:12.5px;display:flex;align-items:center;justify-content:center;line-height:1}
 #top_menu1{left:11px}
 #top_menu2{left:173.5px}
 #top_menu a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1;text-align:center}
}
@media(max-width:1000px){
 #top_menu{display:block;position:relative;box-sizing:content-box;aspect-ratio:535/110;height:auto;min-height:0;padding:0;background-size:336.448598% auto;background-position:50.592885% 100%;mask-image:none;-webkit-mask-image:none}
 #top_menu1,#top_menu2,#top_menu3{display:flex;position:absolute;top:50%;left:19.252336%;transform:translate(-50%,-50%);width:27.663551%;height:44px;min-height:44px;flex:none;margin:0;padding:0;border:0;align-items:center;justify-content:center;box-sizing:border-box;font-size:clamp(11px,3.3vw,13px);line-height:1}
 #top_menu2{left:49.626168%}
 #top_menu3{left:79.626168%}
 #top_menu a{display:flex;position:static;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;min-height:44px;margin:0;padding:0;line-height:1;text-align:center;white-space:nowrap}
}

/* 1. "Arial Narrow" is missing on Android, iOS and Linux, so headings, the top
   menu and the slogan fell back to Times. Windows/macOS keep the real font;
   other devices get PT Sans Narrow (OFL), which has the same proportions. */
@font-face{font-family:"Arial Narrow";font-weight:400;font-display:swap;src:local("Arial Narrow"),local("ArialNarrow"),url("/assets/fonts/pt-sans-narrow-400-cyr.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Arial Narrow";font-weight:400;font-display:swap;src:local("Arial Narrow"),local("ArialNarrow"),url("/assets/fonts/pt-sans-narrow-400-lat.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Arial Narrow";font-weight:700;font-display:swap;src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),url("/assets/fonts/pt-sans-narrow-700-cyr.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Arial Narrow";font-weight:700;font-display:swap;src:local("Arial Narrow Bold"),local("ArialNarrow-Bold"),url("/assets/fonts/pt-sans-narrow-700-lat.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 2. Home section headings: "Туризм в Алматы" (12px inline span) and the guide
   heading (bold underlined link) now match "Google Отзывы" / "Частные маршруты". */
.owner-home .main_container .almaty-demoted-heading,.main_container .geo-guide>h2{font:normal 23px/1.3 Georgia,'Times New Roman',serif!important;color:var(--travel-ink,#28454e);text-align:center;margin:28px 0 14px!important}
.owner-home .main_container .almaty-demoted-heading span,.owner-home .main_container .almaty-demoted-heading strong{font:inherit!important}
.main_container .geo-guide>h2 a{color:inherit;text-decoration:none}
.main_container .geo-guide>h2 a:hover{color:var(--travel-blue,#165c7a);text-decoration:underline;text-underline-offset:4px}
.main_container .geo-guide>p{color:#526c74;margin:0 0 8px}
.main_container .geo-guide ul{margin-bottom:18px}

/* 3. The YouTube text link under the video poster: centred and set exactly like
   the photo caption under the collage, so both media blocks read as a pair. */
.main_container p.almaty-video-link{margin:0 0 14px!important;text-align:center;font:italic 15px/1.4 Georgia,serif!important}
.almaty-video-link a{display:inline-block;padding:10px 6px;color:var(--travel-blue,#165c7a)}

/* 4. Route list: day label and route name sit on one baseline. */
.owner-home .almaty-route-row{align-items:baseline}

/* 5. Order form button: same soft blue button as "Все отзывы в Google". */
#form_sub_btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:1px solid #9abfca;border-radius:5px;background:linear-gradient(#fff,#e0f0f4);color:#165c7a;font:14px/1.5 Arial,sans-serif;cursor:pointer}
#form_sub_btn:hover{background:linear-gradient(#fff,#d3e9ef)}
#order_form input[type=text],#order_form textarea{box-sizing:border-box;border:1px solid #b9cfd6;border-radius:4px;padding:6px 8px;font:inherit}
#order_form input[type=text]:focus,#order_form textarea:focus{border-color:#165c7a;outline:none;box-shadow:0 0 0 3px #165c7a22}

@media(min-width:1001px){
 /* 6. Slogan no longer runs across the snowboarder's face: it wraps in the free
    sky area under the logo, with a soft halo for contrast. Its left edge
    follows the "KAZAKHSTAN TRAVEL AGENCY" lettering (60px), not the box. */
 #site_title{left:60px;max-width:470px;line-height:1.25;text-shadow:0 0 4px #fff}
 /* 7. "Гид по Казахстану" sat outside the menu table and was shifted 50px left;
    it now lines up with the other left-menu items. */
 #left_menu>a[data-geo-demo]{display:flex;align-items:center;min-height:61px;padding-left:50px}
}

@media(max-width:1000px){
 /* 8. Same side gutter for every block (18px, like the page text). */
 #sideRight{margin-left:18px;margin-right:18px}
 .instagram-feed-container{padding-left:18px!important;padding-right:18px!important}
 .owner-home .main_container .almaty-demoted-heading,.main_container .geo-guide>h2{font-size:22px!important}
 /* 9. Footer: the city picture used to end with a hard edge and the copyright
    line was printed over the buildings. The picture now fades out and the
    copyright starts below it. */
 #footer{position:relative}
 #footer:after{content:"";position:absolute;left:0;right:0;top:108px;height:88px;background:linear-gradient(#fff0,#fff 62%);pointer-events:none}
 #footer_container{position:relative;z-index:1}
 #copy{margin-top:34px!important}
}

/* 10. Mobile, 3 November (Emil's screenshot): the leaf strip behind
   "О компании / Онлайн заказ / Контакты" was a hard-edged rectangle cut from
   the header artwork, with snow corners and a piece of the snowboard. Its
   edges now dissolve into the page, so only the tabs and leaves remain. */
@media(max-width:1000px){
 #top_menu{aspect-ratio:535/86;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 14%,#000 78%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 14%,#000 78%,transparent);mask-composite:intersect}
 /* The crop starts 24 artwork px lower (no snowboard, no box corner); the
    labels keep their place on the panels: 55 of 110 px = 31 of 86 px. */
 #top_menu1,#top_menu2,#top_menu3{top:36.05%}
 /* The bottom of the header picture showed a stray leaf and the top edge of
    the content box behind "Пишите: WhatsApp". Fade it out a little earlier. */
 /* The page tint behind the strip made its white artwork read as a box. */
 #middle{background:linear-gradient(#fff,#f3f9f6 26px,#fff 54px)}
 #header:before{-webkit-mask-image:linear-gradient(#000 62%,transparent 90%);mask-image:linear-gradient(#000 62%,transparent 90%)}
}

/* 11. Mobile audit, 3 November. */
@media(max-width:1000px){
 /* Photo albums: the 3-column table was wider than the phone, so every third
    photo was clipped out of sight. Now an even 3-column grid. */
 .main_container table:has(img.gal_photo){display:block;overflow:visible!important;width:100%!important;border-spacing:0;margin:4px 0 6px}
 .main_container table:has(img.gal_photo)>tbody{min-width:0!important;width:100%!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .main_container table:has(img.gal_photo) tr{display:contents}
 .main_container table:has(img.gal_photo) td{display:block;width:auto!important;padding:0}
 .main_container img.gal_photo{display:block;width:100%!important;height:auto!important;aspect-ratio:1;object-fit:cover;padding:3px;border-color:#dfe8ea}
 /* Gallery page numbers were 8 px wide tap targets. */
 .page-links{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 6px}
 .page-links>*{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 10px;box-sizing:border-box;border:1px solid #cfe0e4;border-radius:6px;text-decoration:none;color:#165c7a}
 .page-links>span{background:#e6f1f3;border-color:#9abfca;color:#28454e}
 .page-links+div{font-size:13px;color:#526c74}
 /* Tour and resort lists: a 120 px photo column plus table spacing left the
    text in a narrow strip. Tighter photo column, text uses the full width. */
 .main_container table:has(>tbody>tr>td.article_image){border-spacing:0;margin:0 0 4px}
 .main_container td.article_image{width:108px!important;padding:2px 14px 0 0!important}
 .main_container td.article_image img{width:100%!important;padding:3px;box-sizing:border-box;object-fit:cover}
 .main_container table:has(>tbody>tr>td.article_image) h2{margin:0 0 6px!important;font-size:17px!important;text-align:left}
 .main_container table:has(>tbody>tr>td.article_image) div[style*=italic]{font-size:14px!important;color:#3d5560}
 /* Sidebar reviews card title in the same serif as the cards above it. */
 .reviews-card .reviews-title-text{font:normal 19px/1.3 Georgia,'Times New Roman',serif}
}
@media(max-width:1000px){
 /* Site map and similar CMS lists: stray <br> tags and empty sub-lists made
    uneven 40-90 px holes between groups. */
 .main_container li>br,.main_container li>a>br,.main_container ul+br{display:none}
 .main_container ul:not(:has(li)){display:none}
}

/* 12. Design pass, 3 November ("живее, но без редизайна").
   Each rule below fixes one defect seen on screenshots; see PR for before/after. */

/* 12a. The white centre column had an 8-18px hole above the rounded bottom
   (and under the leaves): the first/last child margins collapsed through
   .main_container, so its repeat-y background stopped short of the footer
   picture. A block formatting context keeps the margins inside. */
.main_container{display:flow-root}

/* 12b. Home page rhythm: one 28px step between the blocks and one heading
   style, instead of 50-90px holes that came from stacked margins+paddings. */
.owner-home .home-reviews{margin:28px 0}
.owner-home .main_container .almaty-seo-block{margin:28px 0!important;padding:8px 0 12px!important}
.owner-home .main_container .almaty-demoted-heading{margin-top:28px!important}

/* 12c. "Туризм в Алматы": the CMS text was one paragraph broken by <br>, so it
   read as a Word page. polish.js splits it into real paragraphs; here they get
   the same ink colour, size and leading as the rest of the home text. */
.owner-home .almaty-home-text{margin:0 0 12px;font-size:14px;line-height:1.7;color:#2d4249;text-wrap:pretty}
.owner-home .almaty-home-text strong{color:var(--travel-ink)}

/* 12c'. EN home only: the intro sentence above the routes was 12px black text
   squeezed between two framed blocks, and a lone "Yurts and yurt stays" link
   floated in default blue. Both now use the italic caption voice of the page. */
.owner-home .main_container p[data-almaty-seo=intro]{margin:28px 0!important;text-align:center;font:italic 15px/1.6 Georgia,serif!important;color:#526c74;text-wrap:balance}
.owner-home .main_container p[style*="text-align: center"]>a{font:italic 15px/1.4 Georgia,serif;color:var(--travel-blue)}

/* 12d. Home guide links: the default bullets and bright browser-blue links did
   not match the route list right above. Same hairline rows and colours now,
   with one chevron from the shared icon set. */
.geo-guide[data-geo-demo=home]>p{text-align:center;font:italic 15px/1.5 Georgia,serif;color:#526c74}
.main_container .geo-guide[data-geo-demo=home] ul{list-style:none;margin:0 0 6px!important;padding:0!important;border-top:1px solid #deeaed}
.main_container .geo-guide[data-geo-demo=home] li{margin:0!important;border-bottom:1px solid #deeaed}
.geo-guide[data-geo-demo=home] li a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 0;box-sizing:border-box;color:var(--travel-blue);font-size:14px;line-height:1.45;text-decoration:none}
.geo-guide[data-geo-demo=home] li a:after{content:"";flex:none;width:14px;height:14px;background:#7fa7b3;-webkit-mask:var(--icon-chevron) center/contain no-repeat;mask:var(--icon-chevron) center/contain no-repeat}
.geo-guide[data-geo-demo=home] li a:hover{text-decoration:underline;text-underline-offset:3px}

@media(max-width:1000px){
 .owner-home .almaty-home-text{font-size:15px;line-height:1.65!important;margin:0 0 12px!important}
 .geo-guide[data-geo-demo=home] li a{font-size:15px;padding:10px 0}
 /* 12e. The desktop "rounded bottom" picture of the centre column showed up on
   phones as a 16px grey band across the screen. A fading hairline separates
   the text from the photo banners instead. */
 #center_footer{height:1px;width:auto;margin:30px 18px 6px;background:linear-gradient(90deg,#fff0,#cfe1e5 20%,#cfe1e5 80%,#fff0)}
 /* 12f. Right sidebar on phones: the gallery title squeezed into a half
   column next to two stacked banners. Now the banners form the same 2-up row
   as "Полёт на самолёте / Юрты" above, and the gallery sits centred below. */
 #sideRight{grid-template-columns:minmax(0,1fr)!important;gap:18px}
 #right_banner{order:-1;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
 #right_banner>.owner-banner{margin:0}
 #left_banner>.owner-banner{margin:0}
 #photo_gal{margin-top:20px!important;text-align:center}
 #photo_gal .photo_gal_head img{margin:0 auto}
 #photo_gal img.gal_photo{display:inline-block;width:auto!important;max-width:min(100%,260px)!important}
 .reviews-sidebar{grid-column:auto!important}
}
@media(min-width:600px) and (max-width:1000px){
 /* 12g. Tablets (600-1000px): text lines ran 700+px long and the 461px photo
   collage sat left-aligned under a full-width video. The column now keeps a
   readable 640px measure and the video and collage share the same edges. */
 .main_container,#left_menu,#left_banner,#sideRight{box-sizing:border-box;width:auto;max-width:640px;margin-left:auto!important;margin-right:auto!important}
 #left_banner,#sideRight{width:calc(100% - 56px)}
 .owner-home .home-visual{max-width:461px;margin-left:auto;margin-right:auto}
 .home-reviews .review-excerpts{grid-template-columns:1fr 1fr}
 #right_banner{grid-column:auto}
 #center_footer{width:calc(100% - 56px);max-width:600px;margin-left:auto;margin-right:auto}
}
@media(min-width:1001px){
 /* 12h. Left menu: 17px capitals wrapped "Прогулки на вертолетах и самолетах"
   onto three lines, so the fixed 61px rows looked alternately empty and
   crowded. At 15px with a little tracking every item fits in one or two lines
   and the rows read as an even column; the rows and colours are unchanged. */
 #left_menu{font-size:15px;letter-spacing:.02em;line-height:1.3}
}
@media(min-width:600px) and (max-width:1000px){
 /* Instagram block followed the full window width while every other block
    keeps the 640px column; its left edge now lines up with the text. */
 .instagram-feed-container{max-width:640px!important;margin-left:auto!important;margin-right:auto!important}
}
@media(min-width:881px) and (max-width:1000px){
 /* Above 880px the header picture is narrower than the window and showed hard
    vertical edges of the sky. Its sides now dissolve like its bottom does. */
 #header:before{
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent) center top/880px 100% no-repeat,linear-gradient(#000 62%,transparent 90%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent) center top/880px 100% no-repeat,linear-gradient(#000 62%,transparent 90%);mask-composite:intersect}
}