/*------------------------------------------------------------
	header tab
------------------------------------------------------------*/  
.title-index {
    padding: 70px 0px 40px 0px;
    text-align: center;
}
.title-index h1{
    font-size: var(--fs-h1);
    font-weight: 600;
}
.title-index h5{
    font-size: var(--fs-h5);
    font-weight: 300 !important;
}
.tab-index{
    margin: 10px 0px 25px 0px;
}
.tab-index-box {
    justify-content: center;
}
.tab-item{
    gap: .5rem;
}
.tab-btn{
    font-size: var(--fs-h6); background-color: #00000000; display: flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: .3s;
}
.tab-btn:hover{
    background: var(--color-bg-sec);
    color: #50C4ED;
    transition: .3s;
}
.tab-btn img{
    width: 20px; height: 20px;
}
.tab-btn.active{
    background: #50C4ED; padding: 7px 15px; border-radius: 6px; color: #fff !important;
}
@media (max-width: 480px) {
    .title-index {
        padding: 40px 0px 20px 0px;
    }
    .title-index h1 {
        font-size: var(--fs-h3);
        font-weight: 500;
    }
    .title-index h5 {
        font-size: var(--fs-h6);
        font-weight: 300;
    }
    .tab-index {
        width: max-content; display: flex; flex-wrap: nowrap; padding: 10px 0px 0px; margin: .5rem .5rem 1.5rem;
    }
    .tab-item {
        display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 0;
    }
    .search-box-tab {
        padding: 10px 10px 15px 10px !important; border-radius: 0 !important; border-bottom: solid 1px #d8d8d8;
    }
    .tab-btn {
        flex-shrink: 0; margin-left: 1px; display: flex; justify-content: center;
    }
    .tab-index-box::-webkit-scrollbar {
        display: none; 
    }
    .tab-index-box
    {
        scrollbar-width:none;
    }
    .tab-search-box {
        width: 94% !important; border-radius: 8px; flex-direction: column; justify-content: normal; padding: 10px;
    }
    .submit-search-tab {
        padding: 10px 20px !important; border-radius: 8px !important; margin: 15px 10px 5px !important; 
    }
}
@media (max-width: 1024px) {
    .tab-index-box{
        display: flex; justify-content: normal;
    }
    .tab-index-box {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
}
/*------------------------------------------------------------
	search tab
------------------------------------------------------------*/
.tab-search-box {
    width: 80%; padding: 5px; border-radius: 8px; border: 1px solid #ebebeb; box-shadow: 0px 0px 5px 0px rgba(200, 200, 200, 0.2);
}
@media (min-width: 480px) and (max-width: 1024px) {
    .tab-search-box {
        width: 85% !important;
    }
}
@media (max-width: 1024px) {
    .tbseach {
        width: 100% !important;
    }
}
.tab-search {
    justify-content: center;
}
.search-box-tab {
    font-size: var(--fs-h6); padding: 10px; border-radius: 20px;  background: #00000000; width: 100%;
}
.submit-search-tab {
    font-size: var(--fs-h6); padding: 10px 20px; background-color: #50C4ED; border-radius: 6px; color: #fff; transition: 0.3s ease!important;
}
.submit-search-tab:hover{
    background-color: #387ADF; transition: 0.3s ease!important; cursor: pointer;
}
button:focus {
    outline: 0 ; 
}
.tbseach {
    display: grid; justify-items: center; position: relative; width: 80%;
}
.search-results {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 100%; height: 400px; max-width: 800px; max-height: 400px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); margin-top: 10px; padding: 15px; z-index: 90; display: none; animation: fadeIn 0.3s ease-in-out;
}
.search-results.active {
    display: block;
}
.hotel-location{
    white-space:nowrap; width: 100%;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); }
}

/*------------------------------------------------------------
	Show More btn index
------------------------------------------------------------*/
.tguide-title, .pst-title-flws, .tnews-title {
    justify-content: space-between;
    margin-bottom: .5rem;
    margin-top: 1rem;
}
.tguide-title h1, .pst-title-flws h1, .tnews-title h1 {
    margin-bottom: 0 !important;
}
.inx-btctg {
    border-radius: 6px;
    background: #50C4ED;
    color: #fff;
    transition: 0.3s ease!important;
}
.inx-btctg a {
    color: #fff;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    height: 100%;
}
.inx-btctg:hover {
    background-color: #387ADF; transition: 0.3s ease!important; cursor: pointer;
}
/*------------------------------------------------------------
  Travel Guide Grid — caption no glass, persistent bottom shadow
------------------------------------------------------------*/
.tg-item .tg-title {
  padding: 12px 14px;
}
.tg-title{
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  margin: 0 !important;
  color: #fff;
  font-size: var(--fs-h6);
  font-weight: var(--fw-heading, 600);
  line-height: var(--line-height-heading, 1.3);
  text-align: right; direction: rtl;
  text-shadow: var(--cm-text-shadow);
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.tg-item{
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius, 14px);
  height: 100%;
  box-shadow: 0 0 5px rgba(0,0,0,.06);
  border: 1px solid var(--color-border);
  background: var(--color-bg-sec);
  transition: box-shadow var(--transition,.25s), transform var(--transition,.25s);
  isolation: isolate;
}
.tg-item::before{
  content:"";
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.45) 14%,
    rgba(0,0,0,.16) 42%,
    rgba(0,0,0,0) 70%
  );
}
.tg-item::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.14) 12%, transparent 24%);
  mix-blend-mode: screen;
  transform: translateX(-35%) skewX(-12deg);
  transition: opacity .6s ease, transform .9s ease;
}
.tg-item:hover::after{ opacity:.9; transform: translateX(28%) skewX(-12deg); }

.tg-item a{ display:block; height:100%; color:inherit; text-decoration:none; }
.tg-item a picture{ width:100%; height:100%; display:block; }
.tg-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  -webkit-user-drag:none; user-select:none;
  transition: transform 700ms cubic-bezier(.2,.6,.2,1), filter 700ms ease;
  will-change: transform;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.12));
}
.tg-item:hover img{ transform: scale(1.05); filter: saturate(1.04) contrast(1.02); }

.tg-viewport{ position:relative; overflow:hidden; width:100%; touch-action:pan-y; cursor:grab; }
.tg-viewport.dragging{ cursor:grabbing; user-select:none; }
.tg-track{
  display:flex;
  flex-direction: row-reverse !important;
  will-change: transform;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
}

.tg-slide{ flex:0 0 100%; height:330px; display:flex; }
.tg-slide > .travelguide-grid{ width:100%; }

.travelguide-grid{
  display:grid;
  grid-template-areas:
    "item-1 item-3 item-4"
    "item-2 item-3 item-5";
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--card-gap, 20px);
  height:100%;
}
.tg-item-1{ grid-area:item-1; }
.tg-item-2{ grid-area:item-2; }
.tg-item-3{ grid-area:item-3; height:100%; }
.tg-item-4{ grid-area:item-4; }
.tg-item-5{ grid-area:item-5; }

.tg-item .grd-img-ix{ pointer-events:none; }

.tg-item a:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--focus-ring, rgba(80,196,237,.35));
  border-radius: var(--card-radius, 14px);
}

@media (max-width:768px){
  .tg-slide{ height:auto; }
  .travelguide-grid{ display:block; }
  .tg-item{ height:120px; margin-bottom:1rem; }
}

@media (prefers-reduced-motion: reduce){
  .tg-track{ transition-duration:.01ms !important; }
  .tg-item img{ transition-duration:.01ms !important; }
}

/* -----------------------------------------------------------
	Hero ۳ Banner
----------------------------------------------------------- */
#hero-3-bnr {
    gap: 1rem;
}
#hero-3-bnr a {
    position: relative;
    columns: 3;
    width: 100%;
    display: flex;
    background: #000000;
    background: linear-gradient(145deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.6) 100%);
    border-radius: 8px;
}
#hero-3-bnr a img {
    width: 100%;
    object-fit: cover;
    height: 200px;
    border-radius: 8px;
    position: relative;
    z-index: -1;
}
.title-3bnr {
    position: absolute; bottom: 28px; right: 0; color: #fff; border-radius: 4px; font-weight: 500; margin-bottom: 0 !important; width: 100%; padding: 20px 20px 10px; color: #fff;
}
.tg-title-3bnr {
    position: absolute; bottom: 0; right: 0; color: #fff; border-radius: 4px; font-weight: 500; margin-bottom: 0 !important; width: 100%; padding: 20px 20px 10px; color: #fff;
}

/* -----------------------------------------------------------
	visa Grids 
----------------------------------------------------------- */
.card-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--card-gap);
    align-items: start;
}
@media (max-width: 1200px){
  .card-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px){
    .card-grid{
        display: flex !important;          /* از Grid به Flex سوییچ کن */
        gap: var(--card-gap);
        overflow-x: auto;                   /* اسکرول افقی */
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .card{
        flex: 0 0 70%;                      /* عرض هر کارت ~80% ویوپورت */
        scroll-snap-align: start;
        min-width: 0;                       /* جلوگیری از کش اجباری عرض */
    }
    .card__img{
        height: var(--card-img-home) !important;       /* از توکن خودت */
    }
    .card__img.visa {
        height: var(--card-img-h) !important;
    }
    .card__glass{ display: none; }        /* تاچ = کلیک، پنل مخفی */
}

@media (max-width: 768px){
    .container, .section, .wrapper{
        overflow: visible;
    }
}
.card__img{
    width: 100%;
    height: var(--card-img-h);
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    transition: transform 700ms cubic-bezier(.2,.6,.2,1), filter 700ms ease;
    will-change: transform;
}

.card__overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.45) 8%, rgba(0,0,0,0) 55%);
    transition: opacity var(--transition);
    opacity: .9;
}
.card__caption{
    position: absolute;
    inset: auto 0 12px 0;
    z-index: 2;
    padding: 0 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    direction: rtl;
    text-align: right;
    gap: 4px;
}
.card__title{
    margin: 0;
    color: #fff;
    font-size: var(--fs-h6);
    line-height: var(--line-height-heading);
    text-shadow: var(--cm-text-shadow);
    font-weight: var(--fw-heading, 600);
}
.card__meta{
    color: #fff;
    font-size: var(--fs-small);
    font-weight: var(--fw-strong, 600);
}
.card__glass{
    position: absolute;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 3;
    border-radius: var(--card-radius);
    color: var(--color-text, #1F2937);
    padding: 12px 14px;
    transform: translateY(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
    background: color-mix(in srgb, rgba(0,0,0,.68), rgba(255,255,255,.10) 10%);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    box-shadow:
        0 8px 32px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -1px 0 rgba(255,255,255,.08);
    overflow: hidden;
    direction: rtl; text-align: right;
}
.card__glass::before{
    content: '';
    position: absolute; top:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
}
.card__glass::after{
    content: '';
    position: absolute; top:0; left:0; width:1px; height:100%;
    background: linear-gradient(180deg, rgba(255,255,255,.7), transparent, rgba(255,255,255,.25));
}
.card__glass-inner{ display: grid; gap: 10px; }
.card__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card__label{
    font-size: var(--fs-small);
    color: var(--color-text-wte);
    font-weight: var(--fw-muted, 400);
}
.card__value{
    font-size: var(--fs-h6);
    font-weight: var(--fw-strong, 600);
    color: var(--color-text-wte, #0F172A);
}
.card__link:hover .card__img{
    transform: scale(1.06);
    filter: saturate(1.05);
}
.card__link:hover .card__caption{
    opacity: 0;
    transition: opacity 220ms ease;
}
.card__link:hover .card__glass{
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .26s ease, transform .26s ease;
}
.card__link:hover .card__overlay{ opacity: 1; }

/* موبایل: پنل گلس نشان داده نشود (تاچ = کلیک لینک) */
@media (max-width: 768px){
    .card__glass{ display: none; }
}
.card__link:focus-visible{
    outline: none;
    box-shadow: 0 0 0 4px var(--focus-ring, rgba(80,196,237,.35));
    border-radius: var(--card-radius);
}

/* -----------------------------------------------------------
   Tour Grid — caption always visible, no glass, persistent shadow
----------------------------------------------------------- */
.grid-box{ --gap: var(--card-gap, 20px); }

.horizontal-scroll{
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 768px){
    .horizontal-scroll{
        display: flex !important;          /* از Grid به Flex سوییچ کن */
        gap: var(--card-gap);
        overflow-x: auto;                   /* اسکرول افقی */
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        height: 100%;
    }
    .tour-box{
        flex: 0 0 70%;
        scroll-snap-align: start;
        min-width: 0;
        height: var(--card-img-h-larg-2) !important;
    }
}
@media (max-width: 1200px){
  .horizontal-scroll{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .horizontal-scroll{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .horizontal-scroll{ grid-template-columns: 1fr; }
}
.horizontal-scroll .tour-box:nth-child(n+9){ display: none; }
.tour-box{
  height: var(--card-img-h-larg-2);
  position: relative;
  border: 1px solid var(--color-border);
  background: var(--color-bg-sec);
  border-radius: var(--card-radius, 14px);
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0,0,0,.06);
  isolation: isolate;
  transition: box-shadow var(--transition,.25s), transform var(--transition,.25s);
}
.tour-box::before{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.48) 14%,
    rgba(0,0,0,.18) 40%,
    rgba(0,0,0,0) 68%
  );
  opacity: .98;
}
.tour-box::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 12%, transparent 24%);
  mix-blend-mode: screen;
  transform: translateX(-35%) skewX(-12deg);
  transition: opacity .6s ease, transform .9s ease;
}
.tour-box > a{
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  height: 100%;
}
.tour-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 700ms cubic-bezier(.2,.6,.2,1), filter 700ms ease;
  will-change: transform;
}
.tour-details.pdall{
  position: absolute;
  inset: auto 12px 12px 12px; 
  z-index: 2;
  margin: 0;
  padding: 0;
  direction: rtl; text-align: right; color:#fff;
  display: grid; gap: .45rem;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.tour-name{
  color:#fff;
  font-size: var(--fs-h6);
  line-height: var(--line-height-heading, 1.3);
  font-weight: var(--fw-heading, 600);
  text-shadow: var(--cm-text-shadow);
}
.tour-price-box{
  display: flex;
  align-items: center;
  gap: .35rem .6rem;
  color:#fff;
  font-size: var(--fs-small);
}
.tour-price-box > span{ opacity:.95; text-shadow: var(--cm-text-shadow); width: -moz-available; width: -webkit-fill-available;}
.tour-price{
  font-size: calc(var(--fs-h6) * 1.05);
  font-weight: var(--fw-strong, 600);
  color:#fff; text-shadow: var(--cm-text-shadow);
}
.tour-price-value{
  align-self: center;
  opacity:.95;
  font-size: var(--fs-small);
  color:#fff; text-shadow: var(--cm-text-shadow);
}
.more-tour-detail{
  color:#fff;
  opacity:.95;
  font-size: var(--fs-small);
  display: -webkit-box; -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: var(--cm-text-shadow);
}
.tour-box:hover{ box-shadow: 0 10px 28px rgba(0,0,0,.10); transform: translateY(-2px); }
.tour-box:hover .tour-img{ transform: scale(1.06); filter: saturate(1.06) contrast(1.02); }
.tour-box:hover::after{ opacity:.9; transform: translateX(28%) skewX(-12deg); }
.tour-box > a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring, rgba(80,196,237,.35));
  border-radius: var(--card-radius, 14px);
}
@media (prefers-reduced-motion: reduce){
  .tour-img{ transition-duration: .01ms !important; }
}

/* ============================================================
   Destination — caption no glass, persistent bottom shadow + sheen
============================================================ */
#hs-viewport{
  position: relative;
  overflow: hidden;
  user-select: none;
  background: transparent;
}
#hs-track{
  display: flex; align-items: stretch;
  gap: var(--card-gap, 20px);
  will-change: transform;
  transform: translate3d(0,0,0);
  padding-block: 4px;
  direction: ltr;
}
#hs-track > *{ flex: 0 0 calc((100% - (var(--card-gap,20px) * 2)) / 3); min-width: 0; }
@media (max-width: 992px){ #hs-track > *{ flex-basis: calc((100% - var(--card-gap,20px)) / 2); } }
@media (max-width: 768px){ #hs-track > *{ flex-basis: calc(100% * .82); } }

#hs-track .card{
  position: relative;
  height: 100%;
  transition: box-shadow var(--transition,.25s), transform var(--transition,.25s);
  overflow: hidden;
  border-radius: var(--card-radius,14px);
  isolation: isolate;
}
/* سایه‌ی ثابت پایین تصویر */
#hs-track .card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.48) 14%,
    rgba(0,0,0,.18) 40%,
    rgba(0,0,0,0) 68%
  );
  opacity:.98;
}
/* شِین روی هاور */
#hs-track .card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 12%, transparent 24%);
  mix-blend-mode: screen;
  transform: translateX(-35%) skewX(-12deg);
  transition: opacity .6s ease, transform .9s ease;
}

#hs-track .card__img{
  width: 100%; height: var(--card-img-h);
  object-fit: cover; display: block; -webkit-user-drag: none;
  transition: transform 700ms cubic-bezier(.2,.6,.2,1), filter 700ms ease;
}
@media (max-width: 768px){ #hs-track .card__img{ height: var(--card-img-h) !important; } }
#hs-track .card__link:hover .card__img{ transform: scale(1.04); filter: saturate(1.03); }

/* اورلی گرادیان (می‌تونی نگه داری؛ با ::before جمع می‌شود) */
#hs-track .card__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.58) 10%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 70%);
  opacity: .95;
}

#hs-track .card__caption{
  display: grid;
  margin-inline: 10px;
  padding: 0;
  border-radius: 0;
  color:#fff;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;

  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  z-index: 2;
  gap: .35rem;
  direction: rtl; text-align: right;
}
#hs-track .small{
  margin:0; font-size: var(--fs-h6);
  line-height: var(--line-height-heading,1.3);
  color:#fff; text-shadow: var(--cm-text-shadow);
}
#hs-track .card__title{
  color:#fff; text-shadow: var(--cm-text-shadow);
  font-weight: var(--fw-normal,400);
}

/* Hover polish */
#hs-track .card:hover::after{ opacity:.9; transform: translateX(28%) skewX(-12deg); }

#hs-viewport .card__link:focus-visible{
  outline: none; box-shadow: 0 0 0 4px var(--focus-ring, rgba(80,196,237,.35));
  border-radius: var(--card-radius);
}
#hs-viewport:hover{ cursor: grab; }
#hs-viewport.dragging{ cursor: grabbing; }

/* -----------------------------------------------------------
   Hotel Grid — caption always visible, no glass, persistent shadow + sheen
----------------------------------------------------------- */
#hotel-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--card-gap,20px);
  align-items:start;
}
@media (max-width: 1200px){ #hotel-grid{ display: flex; overflow-x: auto; overflow-y: hidden; } }

/* Card shell + media */
#hotel-grid .card{
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius,14px);
  transition: box-shadow var(--transition,.25s), transform var(--transition,.25s);
  isolation: isolate;
}
#hotel-grid .card__img{
  height: 320px;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.6,.2,1), filter 700ms ease;
}

/* disable old overlay */
#hotel-grid .card__overlay{ opacity: 0 !important; background: none !important; pointer-events: none; }

/* persistent shadow */
#hotel-grid .card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.50) 20%, rgba(0,0,0,.20) 35%, rgba(0,0,0,0) 50%);
  opacity:.98;
}
/* sheen */
#hotel-grid .card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 12%, transparent 24%);
  mix-blend-mode: screen;
  transform: translateX(-35%) skewX(-12deg);
  transition: opacity .6s ease, transform .9s ease;
}

/* badge (rating stars) */
#hotel-grid .badge {
  position:absolute; top:10px; left:50%; transform: translateX(-50%);
  display:inline-flex; gap:6px; align-items:center; justify-content:center;
  padding:.35rem .5rem;
  color:#fff;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  -webkit-backdrop-filter: blur(var(--glass-blur,4px)); backdrop-filter: blur(var(--glass-blur,4px));
  box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
  z-index:3;
  transition: all .4s ease;
}
#hotel-grid .badge svg{
  color: #FFD700;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  transition: transform .4s ease, opacity .4s ease;
}

/* caption text */
#hotel-grid .card__caption{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  display:grid; gap:.35rem; margin:0; padding:0; border-radius:0;
  color:#fff; direction:rtl; text-align:right;
  background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important; transform:none !important; opacity:1 !important;
}
#hotel-grid .card__title{
  margin:0; font-size: var(--fs-h6); line-height: var(--line-height-heading);
  color:#fff; font-weight: var(--fw-normal,400);
  text-shadow: var(--cm-text-shadow);
}
#hotel-grid .small{
  color:#fff; font-weight: var(--fw-normal,400);
  text-shadow: var(--cm-text-shadow);
}

/* hover effects */
#hotel-grid .card:hover{
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
#hotel-grid .card__link:hover .card__img{
  transform: scale(1.08);
  filter: saturate(1.06) contrast(1.02);
}
/* sheen active */
#hotel-grid .card:hover::after{
  opacity:.9;
  transform: translateX(28%) skewX(-12deg);
}
/* hide stars on hover (slide + fade up) */
#hotel-grid .card:hover .badge {
  opacity: 0;
  transform: translateY(-100px);
}

/* -----------------------------------------------------------
   Airport Grid — same behavior
----------------------------------------------------------- */
#airport-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--card-gap,20px);
  align-items:start;
}
@media (max-width: 1200px){ #airport-grid{ display: flex; overflow-x: auto; overflow-y: hidden; } }

#airport-grid .card{
  position: relative; overflow: hidden; border-radius: var(--card-radius,14px);
  transition: box-shadow var(--transition,.25s), transform var(--transition,.25s);
  isolation:isolate;
}
#airport-grid .card__img{ height: var(--card-img-h-larg, 320px); object-fit: cover; }
@media (max-width: 768px){ #airport-grid .card__img{ height: var(--card-img-h-sm, 180px); } }

/* kill old overlay; use ::before */
#airport-grid .card__overlay{ opacity:0 !important; background:none !important; pointer-events:none; }
#airport-grid .card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.50) 16%, rgba(0,0,0,.20) 42%, rgba(0,0,0,0) 70%);
  opacity:.98;
}
#airport-grid .card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 12%, transparent 24%);
  mix-blend-mode: screen; transform: translateX(-35%) skewX(-12deg);
  transition: opacity .6s ease, transform .9s ease;
}

#airport-grid .card .card__link .badge {
    position:absolute; top:10px; left:50%; 
    display:inline-flex; gap:6px; align-items:center; justify-content:center;
    padding:.35rem .5rem;
    color:#fff;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    -webkit-backdrop-filter: blur(var(--glass-blur,4px)); backdrop-filter: blur(var(--glass-blur,4px));
    box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
    z-index:3;
    transition: all .4s ease;
}
/* caption text-only */
#airport-grid .card__caption{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  display:grid; gap:.35rem; margin:0; padding:0; color:#fff; direction:rtl; text-align:right;
  background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important; transform:none !important; opacity:1 !important; border-radius:0;
}
#airport-grid .card__title{
  margin:0; font-size: var(--fs-h6); line-height: var(--line-height-heading);
  color:#fff; text-shadow: var(--cm-text-shadow);
}
#airport-grid .small, #airport-grid .caption{
  color:#fff; font-size: var(--fs-small); font-weight: var(--fw-normal,400);
  text-shadow: var(--cm-text-shadow);
}

/* hover */
#airport-grid .card:hover{ box-shadow: 0 10px 28px rgba(0,0,0,.10); transform: translateY(-2px); }
#airport-grid .card__link:hover .card__img{
  transform: scale(1.04); filter: saturate(1.03);
  transition: transform 700ms cubic-bezier(.2,.6,.2,1), filter 700ms ease;
}
#airport-grid .card:hover::after{ opacity:.9; transform: translateX(28%) skewX(-12deg); }

/* -----------------------------------------------------------
   Restaurant Grid — same behavior
----------------------------------------------------------- */
#restaurant-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--card-gap,20px);
  align-items:start;
}
@media (max-width: 1200px){ #restaurant-grid{ display: flex; overflow-x: auto; overflow-y: hidden; } }

#restaurant-grid .card{
  position: relative; overflow: hidden; border-radius: var(--card-radius,14px);
  transition: box-shadow var(--transition,.25s), transform var(--transition,.25s);
  isolation:isolate;
}
#restaurant-grid .card__img{ height: var(--card-img-h-larg, 320px); object-fit: cover; }
@media (max-width: 768px){ #restaurant-grid .card__img{ height: var(--card-img-h-larg, 280px); } }

/* kill old overlay; use ::before */
#restaurant-grid .card__overlay{ opacity:0 !important; background:none !important; pointer-events:none; }
#restaurant-grid .card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.52) 16%, rgba(0,0,0,.22) 42%, rgba(0,0,0,0) 70%);
  opacity:.98;
}
#restaurant-grid .card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 12%, transparent 24%);
  mix-blend-mode: screen; transform: translateX(-35%) skewX(-12deg);
  transition: opacity .6s ease, transform .9s ease;
}

/* caption text-only */
#restaurant-grid .card__caption{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  display:grid; gap:.35rem; margin:0; padding:0; color:#fff; direction:rtl; text-align:right;
  background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important; transform:none !important; opacity:1 !important; border-radius:0;
}
#restaurant-grid .card__title{
  margin:0; font-size: var(--fs-h6); line-height: var(--line-height-heading);
  color:#fff; text-shadow: var(--cm-text-shadow);
}
#restaurant-grid .small{
  color:#fff; opacity:.95; font-weight: var(--fw-medium,500);
  text-shadow: var(--cm-text-shadow);
}
#restaurant-grid .caption{
  color:#fff; display:inline-flex; align-items:center; gap:6px;
  text-shadow: var(--cm-text-shadow);
}
#restaurant-grid .caption svg{ filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

/* hover */
#restaurant-grid .card:hover{ box-shadow: 0 10px 28px rgba(0,0,0,.10); transform: translateY(-2px); }
#restaurant-grid .card__link:hover .card__img{
  transform: scale(1.08); filter: saturate(1.06) contrast(1.02);
  transition: transform 700ms cubic-bezier(.2,.6,.2,1), filter 700ms ease;
}
#restaurant-grid .card:hover::after{ opacity:.9; transform: translateX(28%) skewX(-12deg); }

/* -----------------------------------------------------------
   Blog Grid — desktop grid / mobile horizontal rail
----------------------------------------------------------- */
.blog-grid{
  --gap: var(--card-gap, 20px);
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "p1 p1 p1 p2 p2 p2"
    "p3 p3 p4 p4 p5 p5";
  /* جلوگیری از بیرون‌زدگی‌های عجیب در فلکس‌کانتکست‌ها */
  min-width: 0;
  box-sizing: border-box;
}

.blog-tg-item-1{ grid-area: p1; height: var(--card-img-h-larg-2); }
.blog-tg-item-2{ grid-area: p2; height: var(--card-img-h-larg-2); }
.blog-tg-item-3{ grid-area: p3; height: var(--card-img-h); }
.blog-tg-item-4{ grid-area: p4; height: var(--card-img-h); }
.blog-tg-item-5{ grid-area: p5; height: var(--card-img-h); }

/* <= 1200px: ریل افقی پایدار با همه‌ی پست‌ها */
@media (max-width: 1200px){
  .blog-grid{
    /* 1) هر چی از دسکتاپ مونده خنثی کن */
    grid-template-areas: unset !important;
    grid-template-columns: none !important;

    /* 2) ریل افقی با گرید ضمنیِ ستونی */
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: clamp(260px, 85vw, 360px); /* عرض هر کارت */
    gap: var(--gap);

    /* 3) اسکرول داخل خود کانتینر */
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: inline proximity;
    overscroll-behavior-inline: contain;

    /* 4) اندازه‌ی درست نسبت به والد/ویوپورت */
    inline-size: 100%;
    max-inline-size: 100%;
    box-sizing: border-box;
    padding-inline: 12px;
    direction: ltr;
    scrollbar-width: none;
    contain: layout inline-size;
  }
  .blog-grid::-webkit-scrollbar{ display:none; }

  /* خیلی مهم: کارت‌ها دیگر «area» نداشته باشند */
  .blog-tg-item{ grid-area: auto !important; }

  /* اسنپ هر کارت + ارتفاع و محدودیت‌های اندازه */
  .blog-tg-item{
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: clamp(210px, 42vw, 280px);
    min-inline-size: 0;
  }

  /* جلوگیری از کش‌دادن محتوای داخلی */
  .blog-tg-item > a{ display:block; min-width:0; }
  .grd-img-ix{ inline-size:100%; block-size:100%; max-inline-size:100%; object-fit:cover; }
}

/* موبایل خیلی کوچک */
@media (max-width: 640px){
  .blog-grid{
    grid-auto-columns: clamp(240px, 88vw, 320px);
    padding-inline: 8px;
  }
}

/* ====== بقیه‌ی استایل کارت‌ها همون قبلی ====== */

/* Card shell */
.blog-tg-item{
  position: relative;
  border-radius: var(--card-radius, 14px);
  overflow: hidden;
  background: var(--color-bg-sec, #F8FAFC);
  border: 1px solid var(--color-border, #E5E7EB);
  box-shadow: 0 0 5px rgba(0,0,0,.06);
  isolation: isolate;
}

/* Clickable area full-bleed */
.blog-tg-item > a{
  display: block;
  position: relative;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Media */
.grd-img-ix{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  transition: transform 700ms cubic-bezier(.2,.6,.2,1), filter 700ms ease;
  will-change: transform;
}

/* Shadow overlay: always-on for readability */
.blog-tg-item > a::before{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.52) 16%, rgba(0,0,0,.22) 42%, rgba(0,0,0,0) 70%);
  opacity:.98;
  transition: opacity var(--transition,.25s), background var(--transition,.25s);
}

/* Caption */
.blog-tg-item .tg-title{
  position: absolute;
  left: 10px; right: 10px; bottom: 10px; z-index: 2;
  margin: 0;
  color: #fff; text-align: right; direction: rtl;
  font-size: var(--fs-h6); line-height: var(--line-height-heading,1.3);
  text-shadow: var(--cm-text-shadow);
}

/* Hover */
.blog-tg-item > a:hover .grd-img-ix{
  transform: scale(1.08);
  filter: saturate(1.06) contrast(1.02);
}
.blog-tg-item::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 10%, transparent 22%);
  mix-blend-mode: screen;
  transform: translateX(-30%) skewX(-10deg);
  transition: opacity .45s ease, transform .8s ease;
}
.blog-tg-item:hover::after{
  opacity:.9; transform: translateX(25%) skewX(-10deg);
}

/* Focus ring a11y */
.blog-tg-item > a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring, rgba(80,196,237,.35));
  border-radius: var(--card-radius,14px);
}

/* ============================================================
   Travel News — caption always visible, no glass, persistent shadow + sheen
============================================================ */
.tn-section{ --gap: var(--card-gap,20px); }
.tn-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }

/* Rail: اسکرول واقعی + snap نرم + UX درگ */
.tn-rail{
  display:flex; gap:var(--gap);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:auto;                 /* انیمیشن رو JS میده */
  -webkit-overflow-scrolling:touch;
  padding:.25rem 0; margin:0; list-style:none;
  scrollbar-width:none;
  cursor:grab;
}
.tn-rail::-webkit-scrollbar{ display:none; }
.tn-rail.dragging{ cursor:grabbing; user-select:none; }

/* Slides: 2up دسکتاپ/تبلت، 1up موبایل */
.tn-slide{
  position:relative;
  flex:0 0 calc((100% - var(--gap)) / 2);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  height: var(--card-img-h-larg-2);
}
@media (max-width:640px){
  .tn-slide{ flex-basis:100%; height: var(--card-img-h); }
}

/* Card shell */
.tn-link{
  position:relative; display:block; height:100%;
  color:inherit; text-decoration:none;
  border:1px solid var(--color-border);
  background:var(--color-bg-sec);
  border-radius:var(--card-radius,14px);
  overflow:hidden;
  box-shadow:0 0 5px rgba(0,0,0,.06);
  transition:box-shadow var(--transition,.25s), transform var(--transition,.25s);
  isolation:isolate;                    /* برای لایه‌های ::before/::after */
}

/* Media */
.tn-media{ position:relative; aspect-ratio:16/10; background:#f3f4f6; }
.tn-img{
  width:100%; height:100%; object-fit:cover; display:block;
  -webkit-user-drag:none; user-select:none;
  transition:transform 850ms cubic-bezier(.22,.61,.36,1), filter 850ms ease; /* هماهنگ با اسلاید */
  will-change:transform;
}

/* overlay قدیمی غیرفعال؛ سایه‌ی پایدار با ::before ساخته می‌شود */
.tn-overlay{ opacity:0 !important; background:none !important; pointer-events:none; }

/* سایه‌ی مشکیِ ثابت پایین تصویر (برای خوانایی کپشن) */
.tn-link::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to top, rgba(0,0,0,.52) 16%, rgba(0,0,0,.22) 42%, rgba(0,0,0,0) 70%);
  opacity:.98;
}

/* افکت شِین روی هاور */
.tn-link::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 12%, transparent 24%);
  mix-blend-mode: screen;
  transform: translateX(-35%) skewX(-12deg);
  transition: opacity .6s ease, transform .9s ease;
}

/* Caption: متنِ همیشه‌نمایان، بدون گلس/بلور */
.tn-dock{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  display:grid; gap:.4rem; padding:0;
  direction:rtl; text-align:right; color:#fff;
  background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important; transform:none !important; opacity:1 !important; border-radius:0 !important;
}
.tn-meta{ display:flex; align-items:center; gap:.5rem; color:#fff; opacity:.95; }
.tn-date{ font-size:var(--fs-small); color:#fff; text-shadow: var(--cm-text-shadow); }
.tn-headline{
  margin:0; font-size:var(--fs-h6); line-height:var(--line-height-heading); color:#fff;
  text-shadow: var(--cm-text-shadow);
}
.tn-excerpt{
  margin:0; color:#fff; font-size:var(--fs-small);
  text-shadow: var(--cm-text-shadow);
}

/* Hover — فقط مدیا بولد + شِین، کپشن ثابت */
.tn-link:hover .tn-img{ transform:scale(1.06); filter:saturate(1.06) contrast(1.02); }
.tn-link:hover::after{ opacity:.9; transform: translateX(28%) skewX(-12deg); }

/* شِین ظریف روی کل اسلاید (حفظ می‌شود) */
.tn-slide::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 10%, transparent 22%);
  mix-blend-mode:screen;
  transform:translateX(-30%) skewX(-10deg);
  transition:opacity .45s ease, transform .9s ease;
}
.tn-slide:hover::after{ opacity:.9; transform:translateX(25%) skewX(-10deg); }

/* A11y */
.tn-link:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--focus-ring, rgba(80,196,237,.35)); border-radius:var(--card-radius,14px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tn-img{ transition-duration:.01ms !important; }
  .tn-dock{ transition:none !important; }
}