/* =====================================================

   NDC Exclusive Partners (Premium)

   - Grid + cards

   - Wrapped ribbon

   - Center-screen modal (viewport-centered on ALL screens)

===================================================== */



/* =====================================================

   PAGE WRAPPER (sits on time-of-day backgrounds)

===================================================== */



.ndc-partners-wrap{

  max-width: 1140px;

  margin: 0 auto;

  padding: 10px 18px 34px;

}



/* hero */

.ndc-page-hero{

  text-align: center;

  padding: 8px 10px 14px;

}



.ndc-page-title{

  margin: 0 0 10px;

  font-size: 44px;

  font-weight: 900;

  color: #ff7a1a;

  letter-spacing: -0.02em;

}



.ndc-page-sub{

  margin: 0 auto;

  max-width: 860px;

  font-size: 16px;

  line-height: 1.55;

  color: rgba(0,0,0,0.72);

}



/* =====================================================

   GRID

===================================================== */



.ndc-partners-grid{

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 18px;

}



@media (max-width: 980px){

  .ndc-partners-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

}



@media (max-width: 620px){

  .ndc-partners-grid{ grid-template-columns: 1fr; }

}



/* =====================================================

   CARD

===================================================== */



.ndc-partner-card{

  position: relative;

  border-radius: 24px;

  background: rgba(255,255,255,0.92);

  box-shadow: var(--ndc-shadow-light);

  border: 1px solid rgba(0,0,0,0.07);

  padding: 22px 20px 18px;

  overflow: hidden;



  display: flex;

  flex-direction: column;

  min-height: 420px;

}



.ndc-partner-logo-wrap{

  width: 108px;

  height: 108px;

  border-radius: 999px;

  background: #fff;

  margin: 10px auto 12px;

  box-shadow: 0 16px 34px rgba(0,0,0,0.18);

  border: 6px solid rgba(255,255,255,0.95);

  overflow: hidden;

  display: grid;

  place-items: center;

}



.ndc-partner-logo-wrap img{

  width: 100%;

  height: 100%;

  object-fit: contain;

}



/* Logo fallback (first letter) */

.ndc-partner-logo-fallback{

  width: 100%;

  height: 100%;

  display: grid;

  place-items: center;

  font-size: 42px;

  font-weight: 900;

  color: #111;

}



.ndc-partner-name{

  text-align: center;

  font-size: 20px;

  font-weight: 900;

  margin: 0 0 10px;

  color: #111;

}



.ndc-partner-category{

  display: flex;

  justify-content: center;

  margin-bottom: 12px;

}



.ndc-partner-category span{

  display: inline-flex;

  padding: 7px 14px;

  border-radius: 999px;

  background: rgba(0,159,189,0.12);

  color: #0b5663;

  font-weight: 900;

  font-size: 12px;

  text-transform: capitalize;

}



.ndc-partner-deal{

  text-align: center;

  font-size: 14.5px;

  line-height: 1.45;

  color: rgba(0,0,0,0.82);

  padding: 4px 8px 0;

  margin-bottom: 10px;

}



.ndc-partner-meta{

  text-align: center;

  font-size: 12.5px;

  line-height: 1.35;

  color: rgba(0,0,0,0.55);

  padding: 0 8px;

}



/* =====================================================

   ACTIONS

===================================================== */



.ndc-partner-actions{

  margin-top: auto;

  display: grid;

  grid-template-columns: 1fr;

  gap: 10px;

  justify-items: center;

  align-items: center;

  text-align: center;

}



/* CLIP DEAL (anchor styled as button) */

.ndc-partner-card .ndc-clip-btn{

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  text-align: center !important;



  width: 100%;

  padding: 12px 14px;

  border-radius: 999px;



  border: none;

  background: #009FBD;

  color: #fff;



  font-weight: 900;

  text-decoration: none;

  cursor: pointer;



  transition: transform 0.15s ease,

              box-shadow 0.15s ease,

              opacity 0.15s ease;

}



.ndc-partner-card .ndc-clip-btn:hover{

  transform: translateY(-1px);

  box-shadow: 0 12px 24px rgba(0,0,0,0.14);

  text-decoration: none;

}



/* clipped state (added by clipped.js) */

.ndc-partner-card .ndc-clip-btn.is-clipped{

  background: #ff7a1a;

  color: #fff;

  opacity: 0.95;

}



/* VIEW DETAILS (real button) */

.ndc-details-btn{

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  text-align: center !important;

  width: 100%;

  padding: 12px 14px;

  border-radius: 999px;



  border: 1px solid rgba(0,0,0,0.14);

  background: #ffffff;

  color: #111;



  font-weight: 900;

  font-size: 14px;

  text-decoration: none;

  cursor: pointer;



  transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.ndc-details-btn:hover{

  transform: translateY(-1px);

  box-shadow: 0 10px 20px rgba(0,0,0,0.10);

}



/* Optional: clean focus (keyboard users) */

.ndc-clip-btn:focus-visible,

.ndc-details-btn:focus-visible{

  outline: 3px solid rgba(0,159,189,0.35);

  outline-offset: 2px;

}



/* =====================================================

   WRAPPED RIBBON

===================================================== */



.ndc-partner-ribbon{

  position: absolute;

  top: 18px;

  left: -42px;

  transform: rotate(-45deg);

  z-index: 10;



  background: #ff7a1a;

  color: #fff;



  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-size: 12px;



  padding: 9px 60px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.15);



  /* Make it look like it wraps around the card edge */

  overflow: visible;

}



/* =====================================================

   MODAL (VIEWPORT-CENTERED ALWAYS)

   - Uses a fixed full-screen flex container

   - Never centers relative to page height

===================================================== */



.ndc-partner-modal{

  position: fixed;

  inset: 0;

  z-index: 99999;



  /* hidden by default */

  display: none;



  /* center child (dialog) in the VISIBLE viewport */

  align-items: center;

  justify-content: center;



  /* allow dialog to scroll internally on short screens */

  padding: 16px;

}



.ndc-partner-modal.is-open{

  display: flex;

}



.ndc-partner-modal-backdrop{

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.55);

}



.ndc-partner-modal-dialog{

  position: relative;

  width: min(760px, 100%);

  max-height: calc(100vh - 32px);



  background: rgba(255,255,255,0.96);

  border-radius: 26px;

  box-shadow: 0 22px 60px rgba(0,0,0,0.35);

  border: 1px solid rgba(0,0,0,0.10);



  padding: 22px;



  /* keep it above backdrop */

  z-index: 1;



  /* if content is tall on mobile, scroll inside dialog */

  overflow: auto;

}



.ndc-partner-modal-close{

  position: absolute;

  top: 10px;

  right: 14px;

  width: 40px;

  height: 40px;

  border-radius: 999px;

  border: 1px solid rgba(0,0,0,0.12);

  background: #fff;

  font-size: 22px;

  font-weight: 900;

  cursor: pointer;

}



.ndc-partner-modal-head{

  display: grid;

  grid-template-columns: 108px 1fr;

  gap: 16px;

  align-items: center;

  margin-bottom: 14px;

}



@media (max-width: 560px){

  .ndc-partner-modal-head{

    grid-template-columns: 1fr;

    justify-items: center;

    text-align: center;

  }

}



.ndc-partner-modal-logo-wrap{

  width: 108px;

  height: 108px;

  border-radius: 999px;

  overflow: hidden;

  box-shadow: 0 16px 34px rgba(0,0,0,0.18);

  border: 6px solid rgba(255,255,255,0.95);

  background: #fff;

  display: grid;

  place-items: center;

}



.ndc-partner-modal-logo{

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.ndc-partner-modal-name{

  font-size: 24px;

  font-weight: 900;

  margin-bottom: 6px;

  color: #111;

}



.ndc-partner-modal-cat{

  font-weight: 900;

  color: rgba(0,0,0,0.60);

}



.ndc-partner-modal-offer{

  font-size: 16px;

  font-weight: 800;

  margin: 8px 0 10px;

  color: rgba(0,0,0,0.88);

}



.ndc-partner-modal-details{

  font-size: 14.5px;

  line-height: 1.55;

  color: rgba(0,0,0,0.78);

  margin-bottom: 12px;

}



.ndc-partner-modal-meta{

  font-size: 13px;

  color: rgba(0,0,0,0.70);

}



.ndc-partner-modal-row{

  margin: 6px 0;

}



.ndc-partner-modal-row a{

  color: #009FBD;

  font-weight: 900;

  text-decoration: none;

}

/* =====================================================

   Exclusive Partners — EXTRA TIGHT MODE (Guaranteed)

   Targets the real spacing sources from site.css + this file

   Uses ONLY spacing vars

===================================================== */



.ndc-ep-tight-panel{

  /* site.css default is HUGE (calc(var(--ndc-gap-lg) * 2)) */

  padding-top: var(--ndc-gap) !important;

  margin-top: var(--ndc-gap-sm) !important;

}



/* site.css adds margin-bottom to hero; remove it */

.ndc-ep-tight-panel .ndc-page-hero.ndc-ep-hero{

  margin-bottom: var(--ndc-gap) !important;

  padding-top: 0 !important;

  padding-bottom: 0 !important;

}



/* partners-premium.css adds padding to hero; tighten it */

.ndc-ep-tight-panel .ndc-page-hero{

  padding: 0 !important;

}



/* partners-premium.css adds 10px top padding + 18px side padding */

.ndc-ep-tight-panel .ndc-partners-wrap{

  max-width: 100% !important;

  margin: 0 !important;

  padding: 0 !important; /* THIS is the hero→cards dead space */

}



/* Keep grid tight + premium */

.ndc-ep-tight-panel .ndc-partners-grid{

  gap: var(--ndc-gap) !important;

  margin-top: 0 !important;

}