/*Tablet Allocation*/
/*=========================================================
TABLET
768px+
=========================================================*/

@media (min-width:768px){

    :root{

        /* Grid */

        --card-grid-columns:2;

        --card-grid-gap:28px;

        /* Hero */

        --card-hero-height:320px;

        /* Internal spacing */

        --card-content-padding:var(--space-lg);
        
         --card-actions-padding:20px 24px;

    }
    
    .ms-card__content{

        gap:12px;

    }
    
    .ms-card__summary{

        -webkit-line-clamp:2;

    }
     .ms-card__title{

        font-size:1.55rem;

    }

}

/*=========================================================
LAPTOP
1100px+
=========================================================*/

@media (min-width:1100px){

    :root{
        
        --card-grid-columns:2;

        --card-grid-gap:32px;/*--card-grid-gap:calc(var(--space-xl) * 1.25);*/

        /* Hero */

        --card-hero-height:380px;
        
        --card-content-padding:28px;
        
        --card-actions-padding:22px 28px;
 
    }
    
    .ms-card__content{

        gap:14px;

    }
    
     .ms-card__summary{

        -webkit-line-clamp:2;

    }
    .ms-card__title{

        font-size:1.7rem;

    }
    

}

/*=========================================================
DESKTOP
1400px+
=========================================================*/

@media (min-width:1400px){

    :root{

      

        /* Grid */

        --card-grid-columns:3;

        /* Hero */

         --card-hero-height:455px;/*--card-hero-height:400px;*/
        
        --card-grid-gap:36px;
        
        --card-content-padding:var(--space-xl);
        
        --card-actions-padding:24px 32px;
        
    }
    .ms-card__badge{

        top:var(--space-lg);

        left:var(--space-lg);

    }
    
    .ms-card__content{

        gap:16px;

    }
    .ms-card__title{

        font-size:1.85rem;

    }
    
    .ms-card__summary{

       max-width:100%;/*max-width:32ch;*/
        -webkit-line-clamp:3;
        font-size:1.05rem;

    }

    
    

}



@media (max-width:480px){
    
   .ms-card__summary{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;
    }
    
    
    .ms-card__badge{

        padding:6px 12px;

        font-size:.6875rem;

    }
}

/*=========================================================
GRID
(Mobile First)
=========================================================*/

.safari-grid{

    display:grid;

    grid-template-columns:
        repeat(var(--card-grid-columns), 1fr);

    gap:var(--card-grid-gap);

}


/*=========================================================
MARAMATTA CARD
PHASE 1 — CARD SHELL
=========================================================*/

.ms-card{

    position: relative;

    width: 100%;
    
    max-width:var(--card-max-width);

    background: var(--ms-surface);

    border: var(--border-light);

    border-radius: var(--radius-lg);

    overflow: hidden;

    isolation: isolate;

    box-shadow: var(--shadow-small);

    cursor: pointer;
    
    /*for mobile*/
    display:flex;

    flex-direction:column;

    transition:
        transform var(--transition-normal) var(--ease-luxury),
        box-shadow var(--transition-normal) var(--ease-luxury);

}

/*CARD HOVER DESKTOP*/
@media (hover:hover){

    .ms-card:hover{

        transform:translateY(-6px);

        box-shadow:var(--shadow-large);

    }

}
/*Touch Feedback On touch devices, there's no hover, but a small press effect feels responsive.*/
@media (hover:none){

    .ms-card:active{

        transform:scale(0.99);

    }

}


/*=========================================================
BODY LAYOUT
=========================================================*/

.ms-card__body{

    display:flex;

    flex-direction:column;

    flex:1;

}




/*=========================================================
CONTENT REGION
=========================================================*/

.ms-card__content{

    display:flex;

    flex-direction:column;

    flex:1;

}



/*=========================================================
ACTION REGION
=========================================================*/

.ms-card__actions{

    flex-shrink:0;

}



/*=========================================================
PHASE 3
HERO MEDIA: Responsibility Owns only: media height image container image fit badge position Owns nothing else.
=========================================================*/

.ms-card__media{

    position:relative;

    overflow:hidden;

    width:100%;

    height:var(--card-hero-height);/*aspect-ratio: var(--card-media-ratio);*/

    background:var(--ms-surface-soft);
}

.ms-card__media::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(39,73,33,.06);

    pointer-events:none;

}
  /*
  The image simply fills the media.
  */
.ms-card__media > .ms-card__image{

    display:block;

    width:100%;

    object-fit:cover;

    object-position:center;
    
    position:absolute;
    inset:0;

    height:100%;/*height:auto;*/
    
    transition:
        transform var(--transition-cinematic)
        var(--ease-luxury);
}
/*DESTTOP ONLY*/
@media (hover:hover){

    .ms-card:hover .ms-card__image{

        transform:scale(1.05);

    }

}


/*The badge belongs to the media.*/
.ms-card__badge{

    position:absolute;

    top:var(--space-md);

    left:var(--space-md);
    
    border-left:3px solid var(--ms-orange);

    z-index:2;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.12);/*background:rgba(255,255,255,.92);*/

    backdrop-filter:blur(18px);/*backdrop-filter:blur(10px);*/

    -webkit-backdrop-filter:blur(18px);/*-webkit-backdrop-filter:blur(10px);*/

    border:1px solid rgba(255,255,255,.18);/*border:1px solid rgba(255,255,255,.35);*/
    
    font-size:.75rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#fff;/*color:var(--ms-green);*/
    
    text-shadow:0 1px 2px rgba(0,0,0,.35);
    
    box-shadow: 0 4px 18px rgba(0,0,0,.18);/*box-shadow: 0 4px 12px rgba(0,0,0,.08); */
  
}



.ms-card__content{

    display:flex;

    flex-direction:column;

    gap:var(--space-xs);

    padding:var(--card-content-padding);/*padding:var(--space-lg);*/

    flex:1;

    min-height:0;
    
    display:flex;
}

.ms-card__header{

    display:flex;

    flex-direction:column;

    margin-bottom:12px;

}
.ms-card__title{

    margin:0;

    font-family:var(--font-heading);

    font-size:clamp(1.4rem,2vw,2rem);/*font-size:var(--fs-card-title);*/

    font-weight:var(--fw-bold);/*font-weight:var(--fw-semibold);*/

    line-height:1.2;/*line-height:var(--lh-heading);*/

    color:var(--ms-green) !important;/*color:var(--ms-heading);*/

    letter-spacing:-0.02em;

}
.ms-card__content > .ms-card__summary{

    margin:0;

    color:rgba(39,73,33,.72);/*color:var(--ms-text);*/

    font-size:1rem;/*font-size:var(--fs-body);*/

    line-height:1.65;/*line-height:var(--lh-body); */ 

    font-family:var(--font-body);
    
     display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;
    
    line-height:1.6;
    
    font-weight:400;

}

.ms-card__meta{

     margin:0;

    color:rgba(39,73,33,.55);/*color:var(--ms-text-light);*/

    font-size:.875rem;/*font-size:var(--fs-meta);*/

    line-height:1.4;/*line-height:var(--lh-small);*/
    
    font-weight:var(--fw-medium);

    letter-spacing:.03em;/*letter-spacing:var(--ls-meta);*/
    
}

.ms-card__actions{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-md);

    padding:var(--card-actions-padding);/*padding:var(--space-lg);*/

    border-top:var(--border-light);

    flex-shrink:0;

}

/*Price: The price is secondary to the title but stronger than the meta.*/
.ms-card__price{

    flex:1;/*The price expands naturally and leaves the remaining space for the button.*/

    min-width:0;

    font-size:clamp(1.5rem,2vw,2rem);/*font-size:var(--fs-price);*/

    font-weight:var(--fw-bold);/*font-weight:var(--fw-semibold);*/

    color:var(--ms-green);/*color:var(--ms-heading);*/

    line-height:1.1;/*line-height:1.2;*/

}

.ms-card__actions > .ms-card__button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 24px;/*padding:14px 22px;*/

    border-radius:var(--radius-pill);

    text-decoration:none;

    white-space:nowrap;
    
    background: var(--ms-green);
    
    color:var(--ms-white);

    flex-shrink:0;/*prevents the footer from shrinking away.*/

    font-family:var(--font-body);

    font-size:.95rem;/*font-size:var(--fs-button);*/

    font-weight:var(--fw-semibold);
    
    letter-spacing:.01em;

    transition:
        background var(--transition-normal) var(--ease-luxury),
        transform var(--transition-fast) var(--ease-luxury);

}
/*Desktop Only*/
@media (hover:hover){

    .ms-card__button:hover{

        transform:translateY(-2px);

        background:var(--ms-green-light);

    }

}
/*Focus State (Keyboard Accessibility) Don't forget keyboard users.*/
.ms-card__button:focus-visible{
    
    outline:3px solid var(--ms-orange);

    outline-offset:4px;

    border-radius:var(--radius-md);

}



/*=========================================================
REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion: reduce){

    .ms-card,
    .ms-card__image,
    .ms-card__button{

        transition:none;

    }

    .ms-card:hover{

        transform:none;

    }

    .ms-card:hover .ms-card__image{

        transform:none;

    }

}