/* ==========================================================================
   EZE Cloud — Monthly Newsletter (July edition)
   Standalone, responsive rebuild of the source PDF.
   The global site header (logo + Workday partner badges + nav) is provided by
   the site template and is intentionally NOT included here.
   ========================================================================== */

:root {
  /* Brand colours (sampled from the source PDF) */
  --blue:        #1461C8;   /* heading blue on light backgrounds */
  --blue-deep:   #0E3C86;
  --sec-blue-1:  #0A63C6;    /* All Hearts section gradient */
  --sec-blue-2:  #034C9C;
  --rr-1:        #0C50A2;    /* Rewards section gradient */
  --rr-2:        #063A7A;
  --orange-1:    #FB8E20;
  --orange-2:    #F06E00;
  --gold:        #F5A11D;
  --ink:         #2B3541;    /* body text on light */
  --muted:       #5E6976;
  --paper:       #FFFFFF;
  --paper-2:     #F6F8FC;

  --maxw:        1060px;
  --serif:       "PT Serif", Georgia, "Times New Roman", serif;
  --sans:        "Lato", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --script:      "Great Vibes", "Segoe Script", cursive;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }

/* ---- Section shells (full-bleed colour, centred content) ---- */
.sec { padding: 64px 0; position: relative; overflow: hidden; }
.sec--white  { background: var(--paper); }
.sec--paper  { background: var(--paper-2); }
.sec--blue   { background: linear-gradient(150deg, var(--sec-blue-1), var(--sec-blue-2)); color: #fff; }
.sec--orange { background: linear-gradient(150deg, var(--orange-1), var(--orange-2)); color: #fff; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.two.narrow-left  { grid-template-columns: 0.85fr 1.15fr; }
.two.narrow-right { grid-template-columns: 1.15fr 0.85fr; }
/* Bengaluru: larger photo on the left, text on the right */
.two.beng { grid-template-columns: 1.12fr 0.88fr; }
/* Bigger media variants (text + larger photo) */
.two.big-right { grid-template-columns: 0.86fr 1.14fr; }  /* text left, big photo right */
.two.big-left  { grid-template-columns: 1.14fr 0.86fr; }  /* big photo left, text right */

/* ---- Titles (classic Roman serif, royal blue) ---- */
h2.title {
  font-family: var(--serif); font-weight: 700; line-height: 1.16;
  font-size: clamp(1.75rem, 3.4vw, 2.55rem); margin: 0 0 20px;
  letter-spacing: .1px;
}
.sec--white h2.title, .sec--paper h2.title { color: var(--blue); }
.sec--blue h2.title { color: #fff; }
.sec--orange h2.title { color: #fff; }
.sec--orange h2.title.on-orange-blue { color: var(--blue-deep); }

/* ---- Body copy (Lato, semibold like the source) ---- */
p.body { font-size: 1.03rem; font-weight: 600; margin: 0 0 15px; color: var(--ink); }
.sec--white p.body, .sec--paper p.body { color: #34404E; }
.sec--blue p.body, .sec--orange p.body { color: #fff; }
p.body:last-child { margin-bottom: 0; }

.media { border-radius: 18px; overflow: hidden; box-shadow: 0 20px 46px rgba(6,40,96,.22); }
.media img { width: 100%; height: auto; display: block; }

/* decorative accents */
.dot  { position: absolute; border-radius: 50%; opacity: .8; pointer-events: none; }
.star { position: absolute; color: var(--gold); pointer-events: none; opacity: .9; font-size: 18px; line-height: 1; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { background: #fff; padding: 0; text-align: center; }
/* Full-bleed hero photo — spans edge to edge, tagline overlaid on the top band */
.hero-photo { position: relative; width: 100%; border-radius: 0; overflow: hidden; box-shadow: none; }
.hero-photo img { width: 100%; height: auto; display: block; }
.tagline {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  margin: 0; white-space: nowrap; z-index: 2;
  font-family: var(--serif); color: var(--blue); font-weight: 700;
  font-size: clamp(1.2rem, 3.6vw, 2.4rem); letter-spacing: .3px;
}
.tagline .sep { color: var(--orange-2); margin: 0 .4em; font-size: .8em; vertical-align: middle; }
@media (max-width: 560px) { .tagline { top: 5%; } }

/* ==========================================================================
   WORKDAY / HACKATHON EVENT  (contained rounded card: orange panel + photo)
   ========================================================================== */
.event-wrap { background: var(--paper); padding: 44px 0; }
.event-card {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 26px 58px rgba(213,110,0,.22);
  background: linear-gradient(145deg, var(--orange-1), var(--orange-2));
}
.event-card .ec-text { padding: 48px 22px 48px 50px; color: #fff; }
.event-card .ec-text h2.title { color: #fff; margin-bottom: 20px; }
.event-card .ec-text p.body { color: #fff; }
/* photo floats inset inside the orange card, rounded corners + orange margin */
.event-card .ec-media { padding: 26px 30px 26px 6px; }
.event-card .ec-media img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; box-shadow: 0 16px 34px rgba(0,0,0,.20);
}
@media (max-width: 820px) {
  .event-card { grid-template-columns: 1fr; }
  .event-card .ec-text { padding: 34px 26px 10px; }
  .event-card .ec-media { padding: 6px 26px 30px; }
}

/* ==========================================================================
   BENGALURU SKYLINE (bottom illustration)
   ========================================================================== */
.skyline-band { width: 100%; margin-top: 18px; text-align: right; }
.skyline-band img { width: 58%; max-width: 720px; margin: 0 0 0 auto; display: block; opacity: .55; }
@media (max-width: 820px) { .skyline-band { margin-top: 10px; } .skyline-band img { width: 78%; } }

/* ==========================================================================
   REWARDS & RECOGNITIONS
   ========================================================================== */
.rr-banner { text-align: center; margin-bottom: 44px; }
.rr-banner .ezecloud {
  font-family: var(--sans); font-weight: 400; letter-spacing: .42em;
  font-size: clamp(1.9rem, 5vw, 3rem); color: #fff; margin: 0; padding-left: .42em;
}
.rr-banner .script {
  font-family: var(--script); color: var(--gold);
  font-size: clamp(2.6rem, 6.5vw, 4.2rem); line-height: .85; margin: 4px 0 0;
}

.awardees { display: flex; gap: 30px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.awardee { text-align: center; width: 150px; }
.awardee img { width: 148px; height: 148px; object-fit: contain; margin: 0 auto 10px; }
.awardee b { display: block; color: #fff; font-size: 1rem; font-weight: 700; }

.rr-block { padding: 34px 0; }
.rr-block + .rr-block { border-top: 1px solid rgba(255,255,255,.16); }
.sub-serif { font-family: var(--serif); font-weight: 700; color: #fff;
             font-size: clamp(1.45rem, 2.6vw, 1.95rem); margin: 0 0 8px; }
.congrats { color: var(--gold); font-weight: 700; margin: 0 0 14px; font-size: 1.02rem; }

/* ==========================================================================
   EZE ASCEND quote
   ========================================================================== */
.quote { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--orange-2);
         font-size: 1.2rem; margin: 18px 0 0; }

/* ==========================================================================
   NEW ENERGIES
   ========================================================================== */
.joiner-card { background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 18px 44px rgba(6,40,96,.22); }
.joiner-card img { border-radius: 14px; }

/* ==========================================================================
   ANNIVERSARIES
   ========================================================================== */
.anniv-head { text-align: center; max-width: 800px; margin: 0 auto 38px; }
.anniv-head p.body { color: var(--muted); font-weight: 600; }
.anniv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.anniv-grid img { width: 100%; height: auto; border-radius: 16px;
                  box-shadow: 0 10px 26px rgba(6,40,96,.12); background: #fff; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.nl-footer { background: var(--sec-blue-2); color: rgba(255,255,255,.92); }
.nl-footer .wrap { display: flex; justify-content: space-between; align-items: center;
                   gap: 14px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; font-size: .9rem; }
.nl-footer a { color: rgba(255,255,255,.92); text-decoration: none; font-weight: 600; }
.nl-footer a:hover { text-decoration: underline; }
.nl-footer .links span { margin: 0 10px; opacity: .5; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 820px) {
  .two, .two.narrow-left, .two.narrow-right { grid-template-columns: 1fr; gap: 28px; }
  .sec { padding: 48px 0; }
  .order-media-first .media-col { order: -1; }
}
@media (max-width: 560px) {
  .anniv-grid { grid-template-columns: 1fr; }
  .tagline .sep { margin: 0 .25em; }
}